首页>>导航菜单>>超简单的自适应导航菜单(2018-11-07)

超简单的自适应导航菜单

超简单的自适应导航菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <header>  
  2.         <!-- responsive nav bar -->  
  3.         <div class="nav-bar">  
  4.             <a href=""><i class="fa fa-bars"></i><span>Menu</span></a>  
  5.         </div>  
  6.         <!-- navigation -->  
  7.         <nav>  
  8.             <ul>  
  9.                 <li><a href="#"><i class="fa fa-home"></i>Home</a></li>  
  10.                 <li><a href="#"><i class="fa fa-cog"></i>About</a></li>  
  11.                 <li class="sub-menu">  
  12.                     <a href="#"><i class="fa fa-street-view"></i>Galerry <i class="fa fa-angle-down"></i></a>  
  13.                     <!-- children nav -->  
  14.                     <ul class="children">  
  15.                             <li><a href=""><span>-</span> Sub item 1</a></li>  
  16.                             <li><a href=""><span>-</span> Sub item 2</a></li>  
  17.                             <li><a href=""><span>-</span> Sub item 3</a></li>  
  18.                     </ul>  
  19.                 </li>  
  20.                 <li class="sub-menu"><a href="#"><i class="fa fa-eye-slash"></i>Blog <i class="fa fa-angle-down"></i></a>  
  21.   
  22.                     <ul class="children">  
  23.                             <li><a href=""><span>-</span> Sub item 1</a></li>  
  24.                             <li><a href=""><span>-</span> Sub item 2</a></li>  
  25.                             <li><a href=""><span>-</span> Sub item 3</a></li>  
  26.                     </ul>  
  27.   
  28.                 </li>  
  29.                 <li><a href="#"><i class="fa fa-envelope"></i>Contact</a></li>  
  30.             </ul>  
  31.         </nav> <!-- navigation end -->  
  32.           
  33.     </header> <!-- header end -->  

 


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