This time I will share jQuery Plugin and tutorial about iOS Style Sliding Navigation with jQuery and CSS3, hope it will help you in programming stack.
A simple jQuery script that turns big nested Html lists into a responsive, CSS3 powered, multi-level sliding drill down navigation as you seen on iOS or Facebook.
How to use it:
1. Create the navigation header with a back link.
1 |
<div class="list-header-container"> |
2 |
<a href="" class="back-link"><</a> |
2. Create a multi-level drill down menu using nested Html lists.
001 |
<div class="list-body-container"> |
002 |
<ul id="list-0" class="list-0 active-list"> |
003 |
<li class="list-0-item"> <a href="#list-1" class="list-link"><span class="list-link-label">Lorem ipsum.</span><span class="right-arrow">></span></a> |
004 |
<ul id="list-1" class="list hidden"> |
005 |
<li class="list-item"> <a href="#list-1-1" class="list-link"><span class="list-link-label">Lorem ipsum.</span><span class="right-arrow">></span></a> |
006 |
<ul id="list-1-1" class="list hidden"> |
007 |
<li class="list-item"><a href="#" class="list-link"><span class="list-link-label">Lorem ipsum.</span></a> </li> |
008 |
<li class="list-item"><a href="#" class="list-link"><span class="list-link-label">Inventore, id.</span></a> </li> |
009 |
<li class="list-item"><a href="#" class="list-link"><span class="list-link-label">Tempore, officia?</span></a> </li> |
010 |
<li class="list-item"><a href="#" class="list-link"><span class="list-link-label">Culpa, quos.</span></a> </li> |
013 |
<li class="list-item"> <a href="#list-1-2" class="list-link"><span class="list-link-label">Recusandae, molestias.</span><span class="right-arrow">></span></a> |
014 |
<ul id="list-1-2" class="list hidden"> |
015 |
<li class="list-item"><a href="#" class="list-link"><span class="list-link-label">Lorem ipsum.</span></a> </li> |
016 |
<li class="list-item"><a href="#" class="list-link"><span class="list-link-label">Cum, ab.</span></a> </li> |
017 |
<li class="list-item"><a href="#" class="list-link"><span class="list-link-label">Eaque, pariatur!</span></a> </li> |
018 |
<li class="list-item"><a href="#" class="list-link"><span class="list-link-label">Hic, dolorum.</span></a> </li> |
021 |
<li class="list-item"> <a href="#list-1-3" class="list-link"><span class="list-link-label">Quaerat, rem.</span><span class="right-arrow">></span></a> |
022 |
<ul id="list-1-3" class="list hidden"> |
023 |
<li class="list-item"><a href="#" class="list-link"><span class="list-link-label">Lorem ipsum.</span></a> </li> |
024 |
<li class="list-item"><a href="#" class="list-link"><span class="list-link-label">Architecto, nisi.</span></a> </li> |
025 |
<li class="list-item"><a href="#" class="list-link"><span class="list-link-label">Rem, impedit.</span></a> </li> |
026 |
<li class="list-item"><a href="#" class="list-link"><span class="list-link-label">Facilis, temporibus!</span></a> </li> |
029 |
<li class="list-item"> <a href="#list-1-4" class="list-link"><span class="list-link-label"
source : jqueryscript.net
|
