Adventures in Responsive Navigation

The Select Menu

So this method is way easier than I thought it would be. I used a jQuery plugin called TinyNav. It was crazy easy to install. You include the JS file after you load your version of jQuery, then wire it up like this:

$(function () {

Then you simply add a few lines to your CSS. You first hide the tinynav class, then you'll set it to display at whatever breakpoint you want:

/* styles for desktop */
.tinynav { display: none }

/* styles for mobile */
@media screen and (max-width: 600px) {
	.tinynav { display: block }
	#nav { display: none }

The CSS:

nav.example-nav { padding: 1em 0; }
ul.dropdown { list-style: none; padding: 0px; margin: 0px; font-weight: bold; position: relative; text-align: center; }
nav > ul.dropdown:after { content: ""; clear: both; display: block; }
ul.dropdown li { display: inline-block; text-align: left; }
ul.dropdown li a { display: block; padding: 5px 10px; text-decoration: none; color: #444; }
ul.dropdown li a:hover { background-color: #ccc; }
ul.dropdown ul { display: none; position: absolute; top: 100%; background-color: #f4f4f4; margin:0; padding:0; min-width: 250px; }
ul.dropdown li:hover > ul { display: block;  }
ul.dropdown ul li { float: none; display: block; position: relative; }
ul.dropdown ul ul { position: absolute; left: 100%; top:0; }
.tinynav { display: none; margin: 0px auto; }
@media screen and (max-width: 768px) {
  .tinynav { display: block }
  .dropdown { display: none }

Interested in Web Developement and Fitness? I am. That's why I started The Strong Web. A podcast where I interview some of the brightest minds in both web developement and fitness. Find it on iTunes or your favorite place to listen to podcasts.