首页>>导航菜单>>响应式多级菜单 侧边栏菜单 带下拉购物车(2019-05-06)

响应式多级菜单 侧边栏菜单 带下拉购物车

响应式多级菜单 侧边栏菜单 带下拉购物车
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="nav-container">  
  2.     <nav class="sina-nav mobile-sidebar navbar-transparent navbar-fixed" data-top="40" data-md-top="40" data-xl-top="40">  
  3.         <div class="container-fluid">  
  4.   
  5.             <div class="search-box">  
  6.                 <form role="search" method="get" action="#">  
  7.                     <span class="search-addon close-search"><i class="fa fa-times"></i></span>  
  8.                     <div class="search-input">  
  9.                         <input type="search" class="form-control" placeholder="Search here" value="" name="">  
  10.                     </div>  
  11.                     <span class="search-addon search-icon"><i class="fa fa-search"></i></span>  
  12.                 </form>  
  13.             </div><!-- .search-box -->  
  14.   
  15.             <div class="extension-nav">  
  16.                 <ul>  
  17.                     <li class="search"><a href="#"><i class="fa fa-search"></i></a></li>  
  18.                     <li class="dropdown">  
  19.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" >  
  20.                             <i class="fa fa-shopping-bag"></i>  
  21.                             <span class="shop-badge">2</span>  
  22.                         </a>  
  23.                         <ul class="dropdown-menu shop-menu">  
  24.                             <li>  
  25.                                 <a href="#" class="shop-item-photo">  
  26.                                     <img src="http://www.freejs.net/demo/753/demo.jpg" alt=""  width="60"/>  
  27.                                 </a>  
  28.                                 <a href="#" class="shop-item-link">Delica omtantur</a>  
  29.                                 <p class="shop-item-price">2 - $19</p>  
  30.                             </li>  
  31.                             <li>  
  32.                                 <a href="#" class="shop-item-photo">  
  33.                                     <img src="http://www.freejs.net/demo/753/demo.jpg" alt="" width="60"/>  
  34.                                 </a>  
  35.                                 <a href="#" class="shop-item-link">Delica omtantur</a>  
  36.                                 <p class="shop-item-price">2 - $19</p>  
  37.                             </li>  
  38.                             <li class="shop-total-price">  
  39.                                 <a href="#" class="shop-btn">Cart</a>  
  40.                                 <span>Total: $0.00</span>  
  41.                             </li>  
  42.                         </ul>  
  43.                     </li>  
  44.                     <li><a href="#"><i class="fa fa-facebook"></i></a></li>  
  45.                     <li><a href="#"><i class="fa fa-twitter"></i></a></li>  
  46.                     <li><a href="#"><i class="fa fa-linkedin"></i></a></li>  
  47.                     <li class="widget-bar-btn"><a href="#"><i class="fa fa-bars"></i></a></li>  
  48.                 </ul>  
  49.             </div><!-- .extension-nav -->  
  50.   
  51.             <div class="sina-nav-header social-on">  
  52.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">  
  53.                     <i class="fa fa-bars"></i>  
  54.                 </button>  
  55.                 <a class="sina-brand" href="#">  
  56.                     <img src="http://www.freejs.net/images/logo.png" alt="" class="logo-primary">  
  57.                     <img src="http://www.freejs.net/images/logo.png" alt="" class="logo-secondary">  
  58.                 </a>  
  59.             </div><!-- .sina-nav-header -->  
  60.   
  61.             <!-- Collect the nav links, forms, and other content for toggling -->  
  62.             <div class="collapse navbar-collapse" id="navbar-menu">  
  63.                 <ul class="sina-menu" data-in="fadeInLeft" data-out="fadeInOut">  
  64.                     <li><a href="#home">Home</a></li>  
  65.                     <li><a href="#about">About</a></li>  
  66.                     <li class="dropdown">  
  67.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Dropdown</a>  
  68.                         <ul class="dropdown-menu">  
  69.                             <li><a href="#">Custom Menu</a></li>  
  70.                             <li><a href="#">Custom Menu<p class="description">This is Description</p></a>  
  71.                             </li>  
  72.                             <li class="dropdown">  
  73.                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Dropdown</a>  
  74.                                 <ul class="dropdown-menu">  
  75.                                     <li><a href="#">Custom Menu</a></li>  
  76.                                     <li><a href="#">Custom Menu</a></li>  
  77.                                     <li class="dropdown">  
  78.                                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Dropdown</a>  
  79.                                         <ul class="dropdown-menu">  
  80.                                             <li><a href="#">Custom Menu</a></li>  
  81.                                             <li><a href="#">Custom Menu</a></li>  
  82.                                             <li><a href="#">Custom Menu</a></li>  
  83.                                         </ul>  
  84.                                     </li>  
  85.                                     <li><a href="#">Custom Menu</a></li>  
  86.                                 </ul>  
  87.                             </li>  
  88.                         </ul>  
  89.                     </li>  
  90.                     <li class="dropdown menu-item-has-mega-menu">  
  91.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Megamenu</a>  
  92.                         <div class="mega-menu dropdown-menu">  
  93.                             <ul class="mega-menu-row" role="menu">  
  94.                                 <li class="mega-menu-col col-md-4">  
  95.                                     <h4 class="mega-menu-col-title">Menu Titlle</h4>  
  96.                                     <ul class="sub-menu">  
  97.                                         <li><a href="#">Custom Menu</a></li>  
  98.                                         <li><a href="#">Custom Menu</a></li>  
  99.                                         <li><a href="#">Custom Menu</a></li>  
  100.                                     </ul>  
  101.                                 </li>  
  102.                                 <li class="mega-menu-col col-md-4">  
  103.                                     <h4 class="mega-menu-col-title">Menu Titlle</h4>  
  104.                                     <ul class="sub-menu">  
  105.                                         <li><a href="#">Custom Menu</a></li>  
  106.                                         <li><a href="#">Custom Menu</a></li>  
  107.                                         <li><a href="#">Custom Menu</a></li>  
  108.                                     </ul>  
  109.                                 </li>  
  110.                                 <li class="mega-menu-col col-md-4">  
  111.                                     <h4 class="mega-menu-col-title">Menu Titlle</h4>  
  112.                                     <ul class="sub-menu">  
  113.                                         <li><a href="#">Custom Menu</a></li>  
  114.                                         <li><a href="#">Custom Menu</a></li>  
  115.                                         <li><a href="#">Custom Menu</a></li>  
  116.                                     </ul>  
  117.                                 </li>  
  118.                             </ul><!-- end row -->  
  119.                         </div>  
  120.                     </li>  
  121.                     <li><a href="#about">Contact</a></li>  
  122.                     <li class="sina-nav-cta-btn"><a href="http://www.freejs.net">freejs.net</a></li>  
  123.                 </ul>  
  124.             </div><!-- /.navbar-collapse -->  
  125.         </div><!-- .container -->  
  126.   
  127.         <!-- Start widget-bar -->  
  128.         <div class="widget-bar">  
  129.             <a href="#" class="close-widget-bar"><i class="fa fa-times"></i></a>  
  130.             <div class="widget">  
  131.                 <h6 class="title">Custom Pages</h6>  
  132.                 <ul class="link">  
  133.                     <li><a href="#">About</a></li>  
  134.                     <li><a href="#">Services</a></li>  
  135.                     <li><a href="#">Blog</a></li>  
  136.                     <li><a href="#">Portfolio</a></li>  
  137.                     <li><a href="#">Contact</a></li>  
  138.                 </ul>  
  139.             </div>  
  140.             <div class="widget">  
  141.                 <h6 class="title">Additional Links</h6>  
  142.                 <ul class="link">  
  143.                     <li><a href="#">Retina Homepage</a></li>  
  144.                     <li><a href="#">New Page Examples</a></li>  
  145.                     <li><a href="#">Parallax Sections</a></li>  
  146.                     <li><a href="#">Shortcode Central</a></li>  
  147.                     <li><a href="#">Ultimate Font Collection</a></li>  
  148.                 </ul>  
  149.             </div>  
  150.         </div>  
  151.         <!-- End widget-bar -->  
  152.     </nav>  
  153. </div>  
  154.   
  155. <div class="container">  
  156.     <div class="row">  
  157.         <div class="col-6 col-lg-12">  
  158.             <div id="home">  
  159.                   
  160.             </div>  
  161.   
  162.             <div id="about">  
  163.                   
  164.             </div>  
  165.   
  166.             <div id="portfolio">  
  167.                   
  168.             </div>  
  169.   
  170.             <div id="blog">  
  171.                   
  172.             </div>  
  173.   
  174.             <div id="contact">  
  175.                   
  176.             </div>  
  177.         </div>  
  178.     </div>  
  179. </div>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_763.html