如何使用Magento 2.2.6中的Bootsrap 3.3.7实现我的自定义菜单?

loading...


1

已经有一段时间了,因为我正在寻找关于这个主题的文档 . 我有一个用Bootstrap 3.3开发的水平响应菜单我可以在网站上正确显示它,创建一个块和小部件 .

我想要的是在div section-items nav-sections-items之间实现它 .

为此,我必须修改topmenu.phtml .

我以几种方式将代码插入此文件中,但我无法正确显示菜单...

这是有问题的代码示例:

<div class="container">

切换导航MegaMenu

<div class="collapse navbar-collapse js-navbar-collapse">
  <ul class="nav navbar-nav">
    <li class="dropdown mega-dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

      <ul class="dropdown-menu mega-dropdown-menu row">
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">New in Stores</li>
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="item active">
                  <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
                  <h4><small>Summer dress floral prints</small></h4>
                  <button class="btn btn-primary" type="button">49,99 €</button>
                  <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
                </div>
                <!-- End Item -->
                <div class="item">
                  <a href="#"><img src="http://placehold.it/254x150/ef5e55/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>
                  <h4><small>Gold sandals with shiny touch</small></h4>
                  <button class="btn btn-primary" type="button">9,99 €</button>
                  <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
                </div>
                <!-- End Item -->
                <div class="item">
                  <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>
                  <h4><small>Denin jacket stamped</small></h4>
                  <button class="btn btn-primary" type="button">49,99 €</button>
                  <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
                </div>
                <!-- End Item -->
              </div>
              <!-- End Carousel Inner -->
            </div>
            <!-- /.carousel -->
            <li class="divider"></li>
            <li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
          </ul>
        </li>
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">Dresses</li>
            <li><a href="#">Unique Features</a></li>
            <li><a href="#">Image Responsive</a></li>
            <li><a href="#">Auto Carousel</a></li>
            <li><a href="#">Newsletter Form</a></li>
            <li><a href="#">Four columns</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Tops</li>
            <li><a href="#">Good Typography</a></li>
          </ul>
        </li>
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">Jackets</li>
            <li><a href="#">Easy to customize</a></li>
            <li><a href="#">Glyphicons</a></li>
            <li><a href="#">Pull Right Elements</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Pants</li>
            <li><a href="#">Coloured Headers</a></li>
            <li><a href="#">Primary Buttons & Default</a></li>
            <li><a href="#">Calls to action</a></li>
          </ul>
        </li>
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">Accessories</li>
            <li><a href="#">Default Navbar</a></li>
            <li><a href="#">Lovely Fonts</a></li>
            <li><a href="#">Responsive Dropdown </a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Newsletter</li>
            <form class="form" role="form">
              <div class="form-group">
                <label class="sr-only" for="email">Email address</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email">
              </div>
              <button type="submit" class="btn btn-primary btn-block">Sign in</button>
            </form>
          </ul>
        </li>
      </ul>

    </li>
  </ul>

</div>
<!-- /.nav-collapse -->

如何使其与Magento兼容,以免丢失我的帐户和设置在移动设备上的标签

非常感谢您的帮助

loading...

0回答

No Data

评论

暂时没有评论!