首页>>导航菜单>>jquery垂直响应菜单(2014-04-26)

jquery垂直响应菜单

jquery垂直响应菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="content">  
  2.     <ul class="vertical-nav dark red">  
  3.         <li class="active"><a href="#"><i class="icon-home"></i>Home</a></li>  
  4.         <li><a href="#"><i class="icon-cogs"></i>Services  
  5.         <span class="submenu-icon"></span></a>  
  6.         <ul>  
  7.             <li><a href="#">Second level</a></li>  
  8.             <li><a href="#">Second level</a></li>  
  9.             <li><a href="#">Second level</a></li>  
  10.             <li><a href="#">Second level</a></li>  
  11.             <li><a href="#">Second level</a></li>  
  12.             <li><a href="#">Second level</a></li>  
  13.         </ul>  
  14.         </li>  
  15.         <li><a href="#"><i class="icon-briefcase"></i>Projects  
  16.         <span class="submenu-icon"></span></a>  
  17.         <ul>  
  18.             <li><a href="#">Second level</a></li>  
  19.             <li><a href="#">Second level</a></li>  
  20.             <li><a href="#">Second level<span class="submenu-icon"></span></a><ul>  
  21.                 <li><a href="#">Third level</a></li>  
  22.                 <li><a href="#">Third level</a></li>  
  23.                 <li><a href="#">Third level <span class="submenu-icon"></span>  
  24.                 </a>  
  25.                 <ul>  
  26.                     <li><a href="#">Fourth level</a></li>  
  27.                     <li><a href="#">Fourth level</a></li>  
  28.                     <li><a href="#">Fourth level</a></li>  
  29.                     <li><a href="#">Fourth level</a></li>  
  30.                 </ul>  
  31.                 </li>  
  32.                 <li><a href="#">Third level</a></li>  
  33.             </ul>  
  34.             </li>  
  35.             <li><a href="#">Second level</a></li>  
  36.             <li><a href="#">Second level</a></li>  
  37.         </ul>  
  38.         </li>  
  39.         <li><a href="#"><i class="icon-user"></i>About</a></li>  
  40.         <li><a href="#"><i class="icon-comments-alt"></i>Blog</a></li>  
  41.         <li><a href="#"><i class="icon-picture"></i>Gallery</a></li>  
  42.         <li><a href="#"><i class="icon-info"></i>Info</a></li>  
  43.         <li><a href="#"><i class="icon-group"></i>Team</a></li>  
  44.         <li><a href="#"><i class="icon-question"></i>Questions</a></li>  
  45.         <li><a href="#"><i class="icon-bar-chart"></i>Charts</a></li>  
  46.         <li><a href="#"><i class="icon-envelope"></i>Contact</a></li>  
  47.     </ul>  
  48. </div>  

 


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