Adventures in Responsive Navigation

Simple Toggle Method

I like this pattern because it "feels" like a typical drop-down menu feels on a desktop. Users are accustomed to this type of navigation and should be able to navigate this very easily. Just be sure not to load this type of menu with a ton of links - let me say that again: this won't work well with a huge menu (unless you hide the sub-nav). I never really recommend hiding the sub-nav unless you have a huge menu.

I'll leave the styling of this menu up to you - this is just for demonstration purposes.

The CSS:


.nav { width:100%; background-color: #fff; border-bottom: 1px solid #ccc; }
ul.simple-toggle { list-style: none; padding: 0px; margin: 0px; font-weight: bold; text-align: center; }
ul.simple-toggle li { display: inline-block; text-align: left; }
ul.simple-toggle li a { display: block; padding: 15px 10px; text-decoration: none; color: #444; }
ul.simple-toggle li a:hover { background-color: #ccc; }

.anchor-link { display: none; text-align: right; padding: 0 1em 0; text-align: center; padding: 10px 15px; color: #fff; background-color: #0084B4; text-decoration: none; margin: 3px; float: right; }
#mobile-nav { display:none; }

@media (max-width:48.000em){
	
	ul.simple-toggle { display: none; }
	.anchor-link, #mobile-nav { display: block; }

  ul.open { 
    background-color: #F4F4F4;
    box-shadow: 2px 2px 3px #444444;
    display: block;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 5px;
    top: 100%;
    width: 70%;
    z-index: 500; 
	}
	ul.open li { display: block; list-style: none; text-align: center; }
	ul.open li a { display: block; padding: 20px 10px; border-bottom: 1px solid #ccc; text-decoration: none; }
	ul.open li a:hover { background-color: #ccc; color: #fff; }
	
}