A navigation that turns to a dropdown on a small screen size
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js
.gitignore
README.md
index.html

README.md

#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

  1. Add the jQuery Library:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  1. Add the JS and CSS:
    <!-- Put these into the <head> -->
    <script src="js/navigation.js"></script>
    <link rel="stylesheet" href="css/styles.css">
  1. Add markup:
    <div class="nav">
        <div class="navControl">
            <a href="#">Navigation</a>
        </div>
            
        <ul>
            <li><a href="#">Link</a>
            <li>
                <a href="">Link <span>&#9662;</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>
  1. 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>

View it in action here