Responsive Drop Down Navigation

SlickNav

How to create responsive navigation.

When we view our responsive websites on the phone, we want the navigation to change to a “hamburger” icon, and drop down when touched. To do this, we’re can the slicknav jQuery plugin which manages a lot of the transition. The plugin requires jQuery as well some JavaScript. It also requires additions to the style.css and its own CSS file.

http://slicknav.com/

Step 1

Download SlickNav files

http://slicknav.com/

Step 2

Add CSS + JavaScript files

<link href="css/slicknav.css" rel="stylesheet" type="text/css" />
     

<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>

Add links to the CSS file + JS file + Modernizer + jQuery library. Insert into the head of the HTML page.

Be sure to add these files to your “final web” folder. The slicknav.css file is placed in your css folder. Create a js folder for the jquery.slicknav.min.js file.

What is Modernizr?

Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.

Step 3

Add id=“menu” to ul

<ul id="menu">

Step 4

Initialize by adding the JavaScript code before the closing body tag.

<script type="text/javascript">
$('#menu').slicknav({
label: '',
duration: 500,
prependTo:'#mobile-nav', 
});
</script>

 Step 5

Add an empty div for the mobile navigation before the nav tag in the HTML.

<div id="mobile-nav"></div>

 Step 6

Add CSS

Add this CSS rule to the CSS before the start of the media queries.

/* add this for SlickNav */

.slicknav_menu {
    display:none;
}

 Step 7

Add this CSS rule to the CSS in the media query for the smartphone.

#mobile-nav {
float: none;
padding-left: 4%;
}

.js nav {
display:none;
}

.js .slicknav_menu {
display:block;
}

 Step 8

Style the navigation in the slicknav.css file. The changes can be made in the CSS below this comment

/* 
User Default Style
Change the following styles to modify the appearance of the menu.
*/

Change color of the navigation and also remove margin-top for columns.

Leave a Reply

Your email address will not be published. Required fields are marked *