首页>>导航菜单>>完整的响应式菜单，包括搜索框，多级菜单等(2018-10-18)

完整的响应式菜单，包括搜索框，多级菜单等

完整的响应式菜单，包括搜索框，多级菜单等
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <header class="am-header">  
  2.    <div class="logo" title="Place for your Logo">Freejs.net</div>  
  3.    <div class="search-trigger">  
  4.       <div class='s-wrapper'>  
  5.          <div id='circle'></div>  
  6.          <div id='bar'></div>  
  7.       </div>  
  8.    </div>  
  9.    <!--Search-trigger-->  
  10.    <div class="search-container">  
  11.       <div class="search-box">  
  12.          <div class="search-icon">  
  13.             <i class="fa fa-search search-icon"></i>  
  14.          </div>  
  15.          <form action="#search_page_link" class="search-form">  
  16.             <input type="text" name="q" placeholder="Search" id="search" autocomplete="off">  
  17.          </form>  
  18.       </div>  
  19.       <!--//search-box-->  
  20.    </div>  
  21.    <!--//search-container-->  
  22.    <!--Menu Icon-->  
  23.    <div class="menu-trigger"></div>  
  24. </header>  
  25. <nav class="am-container">  
  26.    <h3> Photo Gallery  </h3>  
  27.    <ul class="grid-items">  
  28.       <li> <img src="images/sandwich.jpg" /> </li>  
  29.       <li> <img src="images/espresso.jpg" alt="Coffee Time, Smart Mega Menu" /></li>  
  30.       <li> <img src="images/mobile.jpg" /> </li>  
  31.       <li> <img src="images/space.jpg" alt="A man in Space" /></li>  
  32.       <li> <img src="images/desert.jpg" alt="What a nice desert scene" />  </li>  
  33.       <li>  <img src="images/boat.jpg" /> </li>  
  34.       <li> <img src="images/bicycle.jpg" /> </li>  
  35.       <li>  <img src="images/bird.jpg" /> </li>  
  36.    </ul>  
  37.    <h3>Navigation List Links </h3>  
  38.    <ul class="list-item">  
  39.    <li class="has-sub">  <span class="item-icon"> <img src="icons/mypaint.svg" /> </span> My Paint</li>  
  40.    <div class="sub-items">  
  41.       <ul>  
  42.          <li><a href="#4"> sub item 1from main item </a></li>  
  43.          <li class="dropdown"> Drop down </li>  
  44.          <!--dropdown-->  
  45.          <ul class="dropdown-items">  
  46.             <li><a href="#5"> dropdown item 1 </a> </li>  
  47.             <li> <a href="#5"> dropdown item 2 </a> </li>  
  48.             <li> <a href="#5"> dropdown item 3 </a> </li>  
  49.             <li> <a href="#5"> dropdown item 4 </a> </li>  
  50.          </ul>  
  51.          <li> <a href="#5"> sub item 3 </a> </li>  
  52.          <li> <a href="#5"> sub item 4 </a> </li>  
  53.          <li class="dropdown">Another Drop down </li>  
  54.          <!--dropdown-->  
  55.          <ul class="dropdown-items">  
  56.             <li> <a href="#5"> dropdown item 1 </a> </li>  
  57.             <li> <a href="#5"> dropdown item 2 </a> </li>  
  58.             <li> <a href="#5"> dropdown item 3 </a> </li>  
  59.             <li> <a href="#5"> dropdown item 4  </a></li>  
  60.             <li> <a href="#5"> dropdown item 5 </a></li>  
  61.             <li> <a href="#5"> dropdown item 6  </a></li>  
  62.          </ul>  
  63.       </ul>  
  64.       <!--sub-items-->  
  65.    </div>  
  66.    <!--//sub-items-->  
  67.    <li class="has-sub"> <span class="item-icon"> <img src="icons/calc.svg" /> </span> Calculator </li>  
  68.    <div class="sub-items">  
  69.       <h4> Anything Can be Put Here  </h4>  
  70.       <p> Some Grid items.... </p>  
  71.       <ul class="grid-items">  
  72.          <li> <img src="images/desert.jpg" alt="What a nice desert scene" />  </li>  
  73.          <li>  <img src="images/boat.jpg" /> </li>  
  74.          <li> <img src="images/bicycle.jpg" /> </li>  
  75.          <li>  <img src="images/bird.jpg" /> </li>  
  76.       </ul>  
  77.       <p> Some List Items..... </p>  
  78.       <ul>  
  79.          <li><a href="#4"> Web Design Tutorials</a></li>  
  80.          <li><a href="#4"> Codehim Best Plugins</a></li>  
  81.          <li><a href="#4">Free Web Projects </a></li>  
  82.    </div>  
  83.    <!--//sub-items-->  
  84.    <li> <a href="#1"> <span class="item-icon"> <img src="icons/file-manager.svg" /> </span> File Manager </a> </li>  
  85.    <li> <a href="#1"> <span class="item-icon"> <img src="icons/text-editor.svg" /> </span> Text Editor </a> </li>  
  86.    </ul>  
  87.    <h3>Colorful Cloud Tags</h3>  
  88.    <ul class="cloud-tags">  
  89.       <li><a href="#2"> Insurance </a> </li>  
  90.       <li> <a href="#2"> Policy </a> </li>  
  91.       <li> <a href="#2"> jQuery </a> </li>  
  92.       <li> <a href="#2"> JS </a> </li>  
  93.       <li> <a href="#2"> PHP </a></li>  
  94.       <li> <a href="#2"> MySQL </a></li>  
  95.       <li> <a href="#2"> XML </a></li>  
  96.       <li> <a href="#2"> Angular </a></li>  
  97.       <li> <a href="#2"> ASP </a></li>  
  98.       <li> <a href="#2"> SQL </a></li>  
  99.       <li> <a href="#2"> HTML5 </a></li>  
  100.       <li> <a href="#2"> CSS3 </a></li>  
  101.    </ul>  
  102. </nav>  

 


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