In this tutorial, we'll design a menu that can be shown on desktop sites. We'll use media queries to hide this menu on phones or tablets. Then, we'll use jQuery to display the hidden menu on smaller screens. In order to start, we're going to add the following HTML code for a menu under the closing <header> element of the theme we started last week.

        <nav class="main">
            <ul class="content">
              <li><a href="#">Responsive</a></li>
              <li><a href="#">Design</a></li>
              <li><a href="#">Brought to</a></li>
              <li><a href="#">You by</a></li>
              <li><a href="http://www.cequix.com/">Cequix</a></li>
            </ul>
            <div class="content drop">
               <a href="#" class="droplink">Menu</a>
            </div>
        </nav>

We're going to need to style this menu so it fits into the rest of our responsive theme. In keeping with the simple design from the theme last week, we're going to be very plain with our CSS. The following should be added to your style.css file under the rest of your styling, but above your media queries.

/*  Menu Styling */
nav.main{
	background: #333;
	padding: 10px 0;
}

nav.main ul{
	list-style: none;
}

nav.main ul li{
	display: inline;
}
nav.main .drop{
	display: none;
}
nav.main ul li a, nav.main .drop a{
	color: #FFF;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	padding: 5px 10px;
}
nav.main ul li a:hover{
	text-decoration: underline;
}

As you can see, I've started this block of styling with a comment. Comments separating sections of what you're styling can help you when you come back to projects in the future. I highly recommend using comments like this in all of your code.

With this CSS, we're laying out the individual menu items, removing the underline (except on hover with desktop sites), and setting up the colors to visually differentiate this section from the others. We're also hiding our .drop element. This element is going to become viewable on smaller screens and will be clicked to reveal the full menu.

Now, what we'll do is reverse this for smaller screen sizes such as tablets and phones. This will ensure that the menu displays correctly on both desktop and mobile sites. We're going to add a Media Query that targets any screen size below 991 pixels with the following CSS. Make sure that you add it below the menu CSS you've just put into your style file!

@media only screen and (max-width: 991px){
	nav.main ul{
		display: none;
	}
	nav.main ul li{
		display: block;
		border-bottom: 1px solid #EEE;
		padding: 15px 10px;
	}
	nav.main .drop{
		display: inline;
	}
}

To enhance this Menu button, you could always add a background image or any other sort of CSS. Feel free to play around with the entire code to get your site looking exactly as you'd like. Right now, we're adding extra padding to the top and bottom of the list items to make sure that our users don't have any stray clicks. We're also going to add a slight border to these list items to help separate them from each other and make it more readable.

Now, we're going to need to add jQuery to animate our dropdown menu when it's clicked. You can download the latest version of jQuery by visiting this link - jquery.com/download/
You're going to download the latest version of this JavaScript library into a 'js' directory within the root of your site. Once you have this in its proper directory, you're going to want to include it in the <head> section of your website. Simply use the following tag (making sure that the file name is correct):

	<script type="text/javascript" src="js/jquery-latest.min.js"></script>

Once jQuery is placed correctly, we can utilize the .slideToggle() function. Simply add the following to the <head> section of your theme to implement this:

		<script type="text/javascript">
			$( document ).ready(function() {
				$(function() {
					$('#droplink').on('click', function(e) {
						e.preventDefault();
						$('nav.main ul').slideToggle();
					});
				});
			});
		</script>

Now, when we view our theme on a smaller width browser, we can click our 'menu' button and watch our entire navigation pull down! You can add custom CSS and JavaScript to enhance user experience and make it clear what the Menu link does when clicked – whether the main navigation is already open or closed.

With media queries and a little bit of jQuery, we've built the foundation for a classy responsive site that could be a lot of fun for users to navigate!