首页>>导航菜单>>移动适配的多级导航菜单(2018-10-30)

移动适配的多级导航菜单

移动适配的多级导航菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <nav class="menu">  
  2.   
  3.         <ul>  
  4.   
  5.             <li class="menu__item">  
  6.                 <a href="#" class="menu__link">Link 1</a>  
  7.             </li>  
  8.   
  9.             <li class="menu__item to-left">  
  10.                 <a href="#" class="menu__link">Link 2</a>  
  11.                 <ul class="menu__sub-menu">  
  12.                     <li class="menu__sub-menu__item">  
  13.                         <a href="" class="menu__sub-menu__link">Submenu link 1</a>  
  14.                     </li>  
  15.   
  16.                     <li class="menu__sub-menu__item">  
  17.                         <a href="" class="menu__sub-menu__link">Submenu link 2</a>  
  18.                     </li>  
  19.   
  20.                     <li class="menu__sub-menu__item to-left">  
  21.                         <a href="" class="menu__sub-menu__link">Submenu link 3</a>  
  22.   
  23.                         <ul class="menu__sub-menu">  
  24.                             <li class="menu__sub-menu__item">  
  25.                                 <a href="" class="menu__sub-menu__link">Submenu link 1</a>  
  26.                             </li>  
  27.   
  28.                             <li class="menu__sub-menu__item">  
  29.                                 <a href="" class="menu__sub-menu__link">Submenu link 2</a>  
  30.                             </li>  
  31.   
  32.                             <li class="menu__sub-menu__item">  
  33.                                 <a href="" class="menu__sub-menu__link">Submenu link 3</a>  
  34.                                 <ul class="menu__sub-menu">  
  35.                                     <li class="menu__sub-menu__item">  
  36.                                         <a href="" class="menu__sub-menu__link">Submenu link 1</a>  
  37.                                     </li>  
  38.   
  39.                                     <li class="menu__sub-menu__item">  
  40.                                         <a href="" class="menu__sub-menu__link">Submenu link 2</a>  
  41.                                     </li>  
  42.                                 </ul>  
  43.                             </li>  
  44.   
  45.                             <li class="menu__sub-menu__item">  
  46.                                 <a href="" class="menu__sub-menu__link">Submenu link 4</a>  
  47.                             </li>  
  48.                         </ul>  
  49.                     </li>  
  50.   
  51.                     <li class="menu__sub-menu__item">  
  52.                         <a href="" class="menu__sub-menu__link">Submenu link 4</a>  
  53.                     </li>  
  54.                 </ul>  
  55.   
  56.             </li>  
  57.   
  58.             <li class="menu__item">  
  59.                 <a href="#" class="menu__link">Link 3</a>  
  60.             </li>  
  61.   
  62.             <li class="menu__item">  
  63.                 <a href="#" class="menu__link">Link 4</a>  
  64.             </li>  
  65.   
  66.         </ul>  
  67.   
  68.     </nav>  

 


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