mobile side navigation zeynepjs - Free Download Mobile-first Multi-level Side Navigation - jQuery zeynepjs

Free Download Mobile-first Multi-level Side Navigation – jQuery zeynepjs

Posted on

This time I will share jQuery Plugin and tutorial about Mobile-first Multi-level Side Navigation – jQuery zeynepjs, hope it will help you in programming stack.

mobile side navigation zeynepjs - Free Download Mobile-first Multi-level Side Navigation - jQuery zeynepjs
File Size: 73.7 KB
Views Total: 8058
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The jQuery zeynepjs plugin lets you create a multi-level off-canvas push menu from nested HTML lists for your mobile-first web app.

The navigation system allows the user to navigate between submenus by clicking the menu back button just like the drill down menu.

The main content will be pushed to the right when the navigation is toggled to provide a better user experience.

How to use it:

1. Create nested HTML lists for the navigation system.

001 <div class="zeynep">
002   <ul>
003     <li>
004       <a href="#">Home</a>
005     </li>
006  
007     <li class="has-submenu">
008       <a href="#" data-submenu="stores">Stores</a>
009  
010       <div id="stores" class="submenu">
011         <div class="submenu-header" data-submenu-close="stores">
012           <a href="#">Main <a href="https://www.jqueryscript.net/menu/">Menu</a></a>
013         </div>
014  
015         <label>Stores</label>
016  
017         <ul>
018           <li>
019             <a href="#">Istanbul</a>
020           </li>
021  
022           <li>
023             <a href="#">Mardin</a>
024           </li>
025  
026           <li>
027             <a href="#">Amed</a>
028           </li>
029         </ul>
030       </div>
031     </li>
032  
033     <li class="has-submenu">
034         <a href="#" data-submenu="categories">Categories</a>
035  
036         <div id="categories" class="submenu">
037           <div class="submenu-header" data-submenu-close="categories">
038             <a href="#">Main Menu</a>
039           </div>
040  
041           <label>Categories</label>
042  
043           <ul>
044             <li class="has-submenu">
045               <a href="#" data-submenu="electronics">Electronics</a>
046  
047               <div id="electronics" class="submenu">
048                 <div class="submenu-header" data-submenu-close="electronics">
049                   <a href="#">Categories</a>
050                 </div>
051  
052                 <label>Electronics</label>
053  
054                 <ul>
055                   <li>
056                     <a href="#">Camera & Photo</a>
057                   </li>
058  
059                   <li>
060                     <a href="#">Home Audio</a>
061                   </li>
062  
063                   <li>
064                     <a href="#">Tv & Video</a>
065                   </li>
066  
067                   <li>
068                     <a href="#">Computers & Accessories</a>
069                   </li>
070  
071                   <li>
072                     <a href="#">Car & Vehicle Electronics</a>
073                   </li>
074  
075                   <li>
076                     <a href="#">Portable Audio & Video</a>
077                   </li>
078