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.
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 |