首页>>导航菜单>>动感时髦的展开收缩菜单(2019-04-23)

动感时髦的展开收缩菜单

动感时髦的展开收缩菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="freejs">  
  2.         <div class="swanky_title">  
  3.              
  4.         </div>  
  5.         <div class="swanky_wrapper">  
  6.           <input id="Dashboard" name="radio" type="radio">  
  7.             <label for="Dashboard">  
  8.                 <img src="images/dash.png">  
  9.                 <span>仪表盘</span>  
  10.                 <div class="lil_arrow"></div>  
  11.                 <div class="bar"></div>  
  12.                 <div class="swanky_wrapper__content">  
  13.                     <ul>  
  14.                         <li>工具</li>  
  15.                         <li>报告</li>  
  16.                         <li>分析</li>  
  17.                         <li>代码块</li>  
  18.                     </ul>  
  19.                 </div>  
  20.             </label>  
  21.           <input id="Sales" name="radio" type="radio">  
  22.             <label for="Sales">  
  23.                 <img src="images/del.png">  
  24.                 <span>销售</span>  
  25.                 <div class="lil_arrow"></div>  
  26.                 <div class="bar"></div>  
  27.                 <div class="swanky_wrapper__content">  
  28.                     <ul>  
  29.                         <li>新品</li>  
  30.                         <li>过期</li>  
  31.                         <li>销售报告</li>  
  32.                         <li>已售</li>  
  33.                     </ul>  
  34.                 </div>  
  35.             </label>  
  36.           <input id="Messages" name="radio" type="radio">  
  37.             <label for="Messages">  
  38.                 <img src="images/mess.png">  
  39.                 <span>信息</span>  
  40.                 <div class="lil_arrow"></div>  
  41.                 <div class="bar"></div>  
  42.                 <div class="swanky_wrapper__content">  
  43.                     <ul>  
  44.                         <li>收件箱</li>  
  45.                         <li>发件箱</li>  
  46.                         <li>发件</li>  
  47.                         <li>存档</li>  
  48.                     </ul>  
  49.                 </div>  
  50.             </label>  
  51.           <input id="Users" name="radio" type="radio">  
  52.             <label for="Users">  
  53.                 <img src="images/users.png">  
  54.                 <span>用户</span>  
  55.                 <div class="lil_arrow"></div>  
  56.                 <div class="bar"></div>  
  57.                 <div class="swanky_wrapper__content">  
  58.                     <ul>  
  59.                         <li>新用户</li>  
  60.                         <li>分组</li>  
  61.                         <li>权限</li>  
  62.                         <li>密码</li>  
  63.                     </ul>  
  64.                 </div>  
  65.             </label>  
  66.           <input id="Settings" name="radio" type="radio">  
  67.             <label for="Settings">  
  68.                 <img src="images/set.png">  
  69.                 <span>设置</span>  
  70.                 <div class="lil_arrow"></div>  
  71.                 <div class="swanky_wrapper__content">  
  72.                     <ul>  
  73.                         <li>数据库</li>  
  74.                         <li>设计</li>  
  75.                         <li>更改用户</li>  
  76.                         <li>退出</li>  
  77.                     </ul>  
  78.                 </div>  
  79.             </label>  
  80.         </div>  
  81.     </div>  

 


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