A CodePen by Jorge Luis Piñon. 3 .nav types, with togglers - .nav .nav--pills (extends .nav) .nav--stacked (extends .nav) For small screens a toggle link appears that expands an each navigation. TODO: method to alternate nav types repsonsively. For example, nav--stacked becomes nav--pills at a given breakpoint

nav-styles-responsive.html

<h2>3 Nav styles (with Toggling)</h2>
<ul>
  <li>.nav (basic, horizontal list of links with padding for tap targets)</li>
  <li>.nav-pills  (extends nav, defined backgrounds, spaced)</li>
  <li>.nav--stacked (extends nav, windowshade)</li>
</ul>
<p>For "major" navigation (like site-wide), the UL should be wrapped in a NAV element. Toggle links (".nav-link") should then be added as first child of NAV, sibling to UL.</p>
<p>Toggle links appear at small screen sizes.</p>


<section>
<h3>.nav</h3>
<p>.nav is basic horizontal list, except padded for touch target (40-44px)</p>

<a class="nav-link" href="#global-nav">Menu <span id="nav-dir">▼</span></a>

<nav id="global-nav" role="navigation" class="nav--toggled">
	<ul class="nav">
		<li><a href="/">Home</a></li>
		<li><a href="/music/">Music</a></li>
		<li><a href="/movie/">Movies</a></li>
		<li><a href="/tv/">TV</a></li>
		<li><a href="/ebook/">eBooks</a></li>
		<li><a href="/audiobook/">Audiobooks</a></li>
	</ul>
</nav>  
</section>



<section>
<h3>.nav--pills - extends .nav</h3>
<p>basic nav but with visible targets</p>

<a class="nav-link" href="#global-nav-pills">Pills Menu <span id="nav-dir">▼</span></a>

<nav id="global-nav-pills" role="navigation" class="nav--toggled">
	<ul class="nav nav--pills">
		<li><a href="/">Home</a></li>
		<li><a href="/music/">Music</a></li>
		<li><a href="/movie/">Movies</a></li>
		<li><a href="/tv/">TV</a></li>
		<li><a href="/ebook/">eBooks</a></li>
		<li><a href="/audiobook/">Audiobooks</a></li>
	</ul>
</nav>
</section>



<section>
<h3>.nav--stacked - extends .nav</h3>
<p>vertical orientation, ala windowshade</p>

<a class="nav-link" href="#global-nav-stacked">Stacked Menu <span id="nav-dir">▼</span></a>

<nav id="global-nav-stacked" role="navigation" class="nav--toggled">
	<ul class="nav nav--stacked">
		<li><a href="/">Home</a></li>
		<li><a href="/music/">Music</a></li>
		<li><a href="/movie/">Movies</a></li>
		<li><a href="/tv/">TV</a></li>
		<li><a href="/ebook/">eBooks</a></li>
		<li><a href="/audiobook/">Audiobooks</a></li>
	</ul>
</nav>
</section>

script.js

$(document).ready(function() {

	$('body').addClass('js');
	
	var $navlinks = $('.nav-link'); 
	
	$navlinks.each(function(){
		$(this).on('click', function(e) {
			e.preventDefault();
			$(this).toggleClass('active').next('.nav--toggled').toggleClass('active');
		});
	});

});

style.scss

@import "compass";
a {
	color: #69c;
}
section {
  border-top: solid 3px #ddd;
  margin: 3em 0 5em;
}


.nav {
	margin: 0;
	padding: 0;

	> li {
		display: inline-block;

		> a {
			display: inline-block;
			padding: 0.5em .75em;
		}
	}
}


/* extends .nav, separate links  */
.nav--pills {
  clear: left;
  overflow: hidden;
  margin-bottom: 1em;

	> li {
    margin: 0;
    display: inline-block;

		> a {
			border: 1px solid #ccc;
			margin: 0 .5em .5em 0;
			text-decoration: none;
		}
	}
}


/* extends .nav, aka window shade  */
.nav--stacked {
  margin-bottom: 1em;
	border-top: 1px solid #ccc;

  > li{
    display:list-item;

    > a {
      display:block;
      white-space: nowrap;
      border-bottom: 1px solid #ccc;
			text-decoration: none;
      padding: .75em;
            
      &:hover, &:active {
        color: #fff;
				background-color: #69c;
				text-decoration: none;
      }
    }
  }
}


/* toggler element goes with nav--toggled on ul */
.nav-link {
  float: left;
  padding: 1em;
}
.nav--toggled {
	clear: both;
	-webkit-transition: all 0.15s ease-out;  
	-moz-transition: all 0.15s ease-out;
	-ms-transition: all 0.15s ease-out;
	-o-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
}
.js .nav--toggled {
	overflow: hidden;
	max-height: 0;
}
.nav--toggled.active {
	max-height: none;
}


@media screen and (min-width: 48.25em) {
	.nav-link {
		display: none;
	}
	.js .nav--toggled {
		max-height: none;
	}	
}