首页>>导航菜单>>移动端侧边栏导航菜单，支持自定义位置，展开效果等(2018-11-06)

移动端侧边栏导航菜单，支持自定义位置，展开效果等

移动端侧边栏导航菜单，支持自定义位置，展开效果等
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="container">  
  2.   
  3.       <header>  
  4.   
  5.         <div class="wrapper cf">  
  6.   
  7.           <nav id="main-nav">  
  8.   
  9.             <ul class="first-nav">  
  10.               <li class="cryptocurrency">  
  11.                 <a href="https://www.google.com/search?q=Crypto" target="_blank">Cryptocurrency</a>  
  12.                 <ul>  
  13.                   <li><a href="#">Bitcoin</a></li>  
  14.                   <li><a href="#">Ethereum</a></li>  
  15.                   <li class="add"><a href="#" data-add="['Litecoin','Dogecoin','Bitcoin Cash','ZCash']">Add Coin</a></li>  
  16.                 </ul>  
  17.               </li>  
  18.             </ul>  
  19.   
  20.             <ul class="second-nav">  
  21.               <li class="devices">  
  22.                 <span>Devices</span>  
  23.                 <ul>  
  24.                   <li class="mobile">  
  25.                     <a href="#">Mobile Phones</a>  
  26.                     <ul>  
  27.                       <li><a href="#">Super Smart Phone</a></li>  
  28.                       <li><a href="#">Thin Magic Mobile</a></li>  
  29.                       <li><a href="#">Performance Crusher</a></li>  
  30.                       <li><a href="#">Futuristic Experience</a></li>  
  31.                     </ul>  
  32.                   </li>  
  33.                   <li class="television">  
  34.                     <a href="#">Televisions</a>  
  35.                     <ul>  
  36.                       <li><a href="#">Flat Superscreen</a></li>  
  37.                       <li><a href="#">Gigantic LED</a></li>  
  38.                       <li><a href="#">Power Eater</a></li>  
  39.                       <li><a href="#">3D Experience</a></li>  
  40.                       <li><a href="#">Classic Comfort</a></li>  
  41.                     </ul>  
  42.                   </li>  
  43.                   <li class="camera">  
  44.                     <a href="#">Cameras</a>  
  45.                     <ul>  
  46.                       <li><a href="#">Smart Shot</a></li>  
  47.                       <li><a href="#">Power Shooter</a></li>  
  48.                       <li><a href="#">Easy Photo Maker</a></li>  
  49.                       <li><a href="#">Super Pixel</a></li>  
  50.                     </ul>  
  51.                   </li>  
  52.                 </ul>  
  53.               </li>  
  54.               <li class="magazines">  
  55.                 <a href="#">Magazines</a>  
  56.                 <ul>  
  57.                   <li><a href="#">National Geographic</a></li>  
  58.                   <li><a href="#">Scientific American</a></li>  
  59.                   <li><a href="#">The Spectator</a></li>  
  60.                   <li><a href="#">The Rambler</a></li>  
  61.                   <li><a href="#">Physics World</a></li>  
  62.                   <li><a href="#">Popular Science</a></li>  
  63.                   <li><a href="#">Popular Mechanics</a></li>  
  64.                   <li><a href="#">Sky & Telescope</a></li>  
  65.                   <li><a href="#">Discover</a></li>  
  66.                   <li><a href="#">New Scientist</a></li>  
  67.                   <li><a href="#">Psychology Today</a></li>  
  68.                   <li><a href="#">Wired</a></li>  
  69.                 </ul>  
  70.               </li>  
  71.               <li class="store">  
  72.                 <a href="#">Store</a>  
  73.                 <ul>  
  74.                   <li>  
  75.                     <a href="#">Clothes</a>  
  76.                     <ul>  
  77.                       <li>  
  78.                         <a href="#">Women's Clothing</a>  
  79.                         <ul>  
  80.                           <li><a href="#">Tops</a></li>  
  81.                           <li><a href="#">Dresses</a></li>  
  82.                           <li><a href="#">Trousers</a></li>  
  83.                           <li><a href="#">Shoes</a></li>  
  84.                           <li><a href="#">Sale</a></li>  
  85.                         </ul>  
  86.                       </li>  
  87.                       <li>  
  88.                         <a href="#">Men's Clothing</a>  
  89.                         <ul>  
  90.                           <li><a href="#">Shirts</a></li>  
  91.                           <li><a href="#">Trousers</a></li>  
  92.                           <li><a href="#">Shoes</a></li>  
  93.                           <li><a href="#">Sale</a></li>  
  94.                         </ul>  
  95.                       </li>  
  96.                     </ul>  
  97.                   </li>  
  98.                   <li>  
  99.                     <a href="#">Jewelry</a>  
  100.                   </li>  
  101.                   <li>  
  102.                     <a href="#">Music</a>  
  103.                   </li>  
  104.                   <li>  
  105.                     <a href="#">Grocery</a>  
  106.                   </li>  
  107.                 </ul>  
  108.               </li>  
  109.               <li class="collections"><a href="#">Collections</a></li>  
  110.               <li class="credits"><a href="#">Credits</a></li>  
  111.               <li class="add"><a href="#" data-add="['Charts', 'Logs', 'Tests', 'Profile']">Add Item</a></li>  
  112.             </ul>  
  113.   
  114.             <ul class="bottom-nav">  
  115.               <li class="github">  
  116.                 <a href="https://github.com/somewebmedia" target="_blank">  
  117.                   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>  
  118.                 </a>  
  119.               </li>  
  120.               <li class="email">  
  121.                 <a href="mailto:hi@somewebmedia.com" target="_blank">  
  122.                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>  
  123.                 </a>  
  124.               </li>  
  125.               <li class="ko-fi">  
  126.                 <a href="https://ko-fi.com/somewebguy" target="_blank">  
  127.                   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"/></svg>  
  128.                 </a>  
  129.               </li>  
  130.             </ul>  
  131.   
  132.           </nav>  
  133.   
  134.   
  135.   
  136.             
  137.   
  138.   
  139.           <a class="toggle">  
  140.             <span></span>  
  141.             Toggle Navigation  
  142.           </a>  
  143.   
  144.         </div>  
  145.   
  146.       </header>  
  147.   
  148.       <main>  
  149.   
  150.         <div class="wrapper">  
  151.   
  152.           <div class="content">  
  153.   
  154.             <h4>Chose position</h4>  
  155.   
  156.             <div class="actions position">  
  157.   
  158.               <div><a href="#" data-demo="{position:'left'}" class="button active">Left</a></div>  
  159.   
  160.               <div><a href="#" data-demo="{position:'right'}" class="button">Right</a></div>  
  161.   
  162.               <div><a href="#" data-demo="{position:'top'}" class="button">Top</a></div>  
  163.   
  164.               <div><a href="#" data-demo="{position:'bottom'}" class="button">Bottom</a></div>  
  165.   
  166.             </div>  
  167.   
  168.             <h4>Levels open</h4>  
  169.   
  170.             <div class="actions levels">  
  171.   
  172.               <div><a href="#" data-demo="{levelOpen:'overlap', levelSpacing:40}" class="button active">Overlap levels</a></div>  
  173.   
  174.               <div><a href="#" data-demo="{levelOpen:'expand', levelSpacing:25}" class="button">Expand levels</a></div>  
  175.   
  176.               <div><a href="#" data-demo="{levelOpen:false, levelSpacing:25}" class="button">Unfolded levels</a></div>  
  177.   
  178.             </div>  
  179.   
  180.             <h4>Additional options</h4>  
  181.   
  182.             <div class="actions checkboxes">  
  183.   
  184.               <div><label><input type="checkbox" data-demo="{closeOnClick:true}" checked><span></span>Close on click</label></div>  
  185.   
  186.               <div><label><input type="checkbox" data-demo="{disableBody:true}" checked><span></span>Disable body</label></div>  
  187.   
  188.               <div><label><input type="checkbox" data-demo="{pushContent:'#container'}" checked><span></span>Push content</label></div>  
  189.   
  190.               <div><label><input type="checkbox" data-demo="{navTitle: 'All Categories', levelTitles:true}" checked><span></span>Main nav and level titles</label></div>  
  191.   
  192.               <div><label><input type="checkbox" data-demo="{insertClose:true, insertBack:true}" checked><span></span>Close and back buttons</label></div>  
  193.   
  194.             </div>  
  195.   
  196.           </div>  
  197.   
  198.         </div>  

 


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