responsive-nav
responsive-nav copied to clipboard
Published
20 hours ago •
MartinBlackburn
MartinBlackburn
A navigation that turns to a dropdown on a small screen size
#Responsive Navigation
A navigation, with dropdowns, that turns to a collapsible dropdown on a small screen.
The navigation will also move some items to a dropdown when they don't fit onto the nav, and move them back again when they do.
Feel free to use this in any of your own projects (commercial or not), just be kind and link back here, or my site :)
##Usage instructions
- Add the jQuery Library:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
- Add the JS and CSS:
<!-- Put these into the <head> -->
<script src="js/navigation.js"></script>
<link rel="stylesheet" href="css/styles.css">
- Add markup:
<div class="nav">
<div class="navControl">
<a href="#">Navigation</a>
</div>
<ul>
<li><a href="#">Link</a>
<li>
<a href="">Link <span>▾</span></a>
<ul class="dropdown">
<li><a href="">Sub link</a>
<li><a href="">Sub link</a>
<li><a href="">Long long sub link</a>
<li><a href="">Sub link</a>
<li><a href="">Sub link</a>
</ul>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
</ul>
</div>
- Setup the nav:
<!-- Put this right before the </body> closing tag -->
<script>
$(function()
{
//for each .nav create a responsive version
$(".nav").each(function()
{
//pass the nav element and set the break point.
new ResponsiveNav($(this), 500);
});
});
</script>
Metadata
46
Stars
10
Forks
Watchers
Owner
MartinBlackburn
Metadata
A navigation that turns to a dropdown on a small screen size