首页>>导航菜单>>侧边栏手风琴式折叠菜单(2019-10-23)

侧边栏手风琴式折叠菜单

侧边栏手风琴式折叠菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container">  
  2.         <div class="main_wrapper">  
  3.             <div class="sidebar">  
  4.                 <ul class="menu">  
  5.                     <li class="menu_item menu_show">  
  6.                         <a>  
  7.                             <i class="tri_icon"></i>  
  8.                             <h2>HTML</h2>  
  9.                         </a>  
  10.                         <ul class="menu_item_child">  
  11.                             <li>  
  12.                                 <a title="HTML5">  
  13.                                     <span>HTML5</span>  
  14.                                 </a>  
  15.                             </li>  
  16.                         </ul>  
  17.                     </li>  
  18.                     <li class="menu_item">  
  19.                         <a>  
  20.                             <i class="tri_icon"></i>  
  21.                             <h2>JavaScript</h2>  
  22.                         </a>  
  23.                         <ul class="menu_item_child">  
  24.                             <li>  
  25.                                 <a>  
  26.                                     <span>AngularJS</span>  
  27.                                 </a>  
  28.                             </li>  
  29.                             <li>  
  30.                                 <a>  
  31.                                     <span>jQuery</span>  
  32.                                 </a>  
  33.                             </li>  
  34.                             <li>  
  35.                                 <a>  
  36.                                     <span>ReactJS</span>  
  37.                                 </a>  
  38.                             </li>  
  39.                             <li>  
  40.                                 <a>  
  41.                                     <span>VueJS</span>  
  42.                                 </a>  
  43.                             </li>  
  44.                         </ul>  
  45.                     </li>  
  46.                     <li class="menu_item">  
  47.                         <a>  
  48.                             <i class="tri_icon"></i>  
  49.                             <h2>CSS</h2>  
  50.                         </a>  
  51.                         <ul class="menu_item_child">  
  52.                             <li>  
  53.                                 <a>  
  54.                                     <span>CSS3</span>  
  55.                                 </a>  
  56.                             </li>  
  57.                         </ul>  
  58.                     </li>  
  59.                 </ul>  
  60.             </div>  
  61.             <div class="breadcrumb">  
  62.                 <a>jQueryScript.Net</a>  
  63.                 <span class="split"> / </span>  
  64.                 <a>HTML</a>  
  65.                 <span class="split last"> / </span>  
  66.                 <a>HTML5</a>  
  67.             </div>  
  68.             <div class="main_con">  
  69.                 <ul class="main_con_ul">  
  70.                     <li class="main_con_item">  
  71.                         <ul>  
  72.                             <li class="check">  
  73.                                 <h2 class="title">HTML5</h2>  
  74.                                 <div class="con">  
  75.                                     <p>HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts.</p>  
  76.                                     <p> It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications.</p>  
  77.                                 </div>  
  78.                             </li>  
  79.                         </ul>  
  80.                     </li>  
  81.                     <li class="main_con_item">  
  82.                         <ul>  
  83.                             <li>  
  84.                                 <h2 class="title">Angular</h2>  
  85.                                 <div class="con">  
  86.                                     <p>AngularJS is a JavaScript-based open-source front-end web framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. </p>  
  87.                                 </div>  
  88.                             </li>  
  89.                             <li>  
  90.                                 <h2 class="title">jQuery</h2>  
  91.                                 <div class="con">  
  92.                                     <p>jQuery</p>  
  93.                                 </div>  
  94.                             </li>  
  95.                             <li>  
  96.                                 <h2 class="title">ReactJS</h2>  
  97.                                 <div class="con">  
  98.                                     <p>React + React Native</p>  
  99.                                 </div>  
  100.                             </li>  
  101.                             <li>  
  102.                                 <h2 class="title">VueJS</h2>  
  103.                                 <div class="con">  
  104.                                     <p>Vue.js</p>  
  105.                                 </div>  
  106.                             </li>  
  107.                         </ul>  
  108.                     </li>  
  109.                     <li class="main_con_item">  
  110.                         <ul>  
  111.                             <li>  
  112.                                 <h2 class="title">CSS3</h2>  
  113.                                 <div class="con">  
  114.                                     <p>CSS3</p>  
  115.                                 </div>  
  116.                             </li>  
  117.                         </ul>  
  118.                     </li>  
  119.                 </ul>  
  120.             </div>  
  121.         </div>  
  122.     </div>  

 


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