Skip to content


Subversion checkout URL

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

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="//"></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>

            <li><a href="#">Link</a>
                <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>
            <li><a href="#">Link</a>
            <li><a href="#">Link</a>
  1. Setup the nav:
    <!-- Put this right before the </body> closing tag -->
            //for each .nav create a responsive version
                //pass the nav element and set the break point.
                new ResponsiveNav($(this), 500);

View it in action here

Something went wrong with that request. Please try again.