Responsive Navigtion

Written with SASS

A light-weight, easy-to-use, responsive navigation built using SASS. Use SASS variables to easily customize your own menu.

This plugin uses techniques like darken and lighten to do all the work so you can spend less time searching through code.

Download View Demo

Features

The plugin uses minimal jquery to toggle the mobile navigation and CSS does the rest. The purpose of this navigation is to keep things simple and not over complicate responsive navigation. The skin of the navigation is conrtolled by just a few SASS variables, making customizing it super quick and easy. Dropdowns can be tricky as well, so I've included dropdown detection to turn your mobile submenus in to expandable panels. The rest is up to you!

Demo

Just shrink your browser to watch it in action. You can even play with the SCSS variables yourself but clicking on the 'SCSS' link.

See the Pen Demo for responsive nav by Jason Kinney (@jkinney768) on CodePen

Usage

Follow the steps below to get your navigation up and running. If you encounter any bugs, please report them on GitHub.

Link the Files


            //Add import to your stylesheet
            @import "nav.scss";

            //Link at the bottom of your page
            <script src="js/nav.min.js"> </script>
        

Add Markup


            <a class="mobile" href="#">&#9776;</a>
            <nav>
              <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a>
                  <ul>
                    <li><a href="#">Sublink 1</a></li>
                    <li><a href="#">Sublink 2</a></li>
                    <li><a href="#">Sublink 3</a></li>
                    <li><a href="#">Sublink 4</a></li>
                  </ul>
                </li>
               <li><a href="#">Link 3</a></li>
               <li><a href="#">Link 4</a>
                 <ul>
                   <li><a href="#">Sublink 1</a></li>
                   <li><a href="#">Sublink 2</a></li>
                   <li><a href="#">Sublink 3</a></li>
                   <li><a href="#">Sublink 4</a></li>
                 </ul>
               </li>
               <li><a href="#">Link 5</a></li>
               <li><a href="#">Link 6</a></li>
              </ul>
            <div style="clear:both;"></div>
            </nav>
        

Customizing

Use the following variables to modify the skin of your navigation. I leave the rest to you!


           /*********************
            VARIABLES
            **********************/
            $link-color:white;
            $link-hover:#00aedb;
            $link-vertical-padding:15px;      //Controls Menu top & bottom padding
            $link-horizontal-padding:20px;    //Contols Menu left & right padding
            $menu-background: #353535;        //Control Menu Color Scheme