Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A navigation that turns to a dropdown on a small screen size
JavaScript
branch: master
Failed to load latest commit information.
css main LIs move into an additional dropdown when there are too many
js
.gitignore added base files
README.md updated read me
index.html now adds the LIs back when there is room

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

Something went wrong with that request. Please try again.