A CodePen by Joe Snell. Toggle Navigation: No JS - Responsive toggle navigation with CSS and no JavaScript. Fusion of Brad Frost's 'Toggle Nav' and Aaron Gustafson's 'Build a smart mobile navigation without hacks.' For small screens a “menu” button appe

index.html

    <header id="top" role="banner" class="pattern">
      <h1 id="logo">Toggle Navigation: No JS</h1>
          <a id="jump" href="#nav" class="nav-toggle small-screen">Menu</a>
    </header>
  <nav role="navigation">
  <ul id="nav" tabindex="0">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
    <li id="back" class="small-screen"><a href="#top">TOP</a></li>
    
</ul>
        </nav>
  <div class="container">	
		<section class="pattern-description">
      <h1>Toggle Navigation:<span>No JS</span></h1>
      <p>This Pen is forked from Brad Frost's <a href="http://codepen.io/bradfrost/full/sHvaz">Toggle Navigation</a> found on <a href="http://bradfrostweb.com/blog/web/responsive-nav-patterns/">Responsive Navigation Patterns</a> and fuzes techniques developed by Aaron Gustafson in <a href="http://www.netmagazine.com/tutorials/build-smart-mobile-navigation-without-hacks">Build a smart mobile navigation without hacks</a>:</p>
      <p>I had seen Aaron's post on building a CSS based navigation pattern with no JavaScript a while back, but when Brad Frost used it in his <a href="http://bradfrostweb.com/blog/post/this-is-an-updated-website/">updated website design</a> I was inspired to tackle the pattern myself.</p>
      <p>I chose to use CodePen as a playground and as a source to share the pattern with those who might be interested.</p>
      <p>Much of the following content is from the original forked <a href="http://codepen.io/bradfrost/full/sHvaz">Toggle Nav</a> by Brad Frost:</p>
			<h3>Pros</h3>
			<ul>
      <li><strong>No JS</strong>- streamlined and lightweight.</li>
			<li><strong>Keeps the user in place</strong>- Where the footer anchor jumps suddenly, the toggle menu simply appears in place, which doesn&#8217;t disorient the user.</li>
			<li><strong>Elegant</strong>- This is definitely one of the more classy approaches. No awkward forms or page jumps, just a smooth animated flyout or basic show/hide.</li>
			<li><strong>Easy to scale up</strong>- All you need to do is hide the mobile trigger and show the nav list when the appropriate breakpoint is reached and you have yourself a normal large screen nav. All this can be accomplished with CSS.</li>
			</ul>
			<h3>Cons</h3>
			<ul>
			<li><strong>Animation performance</strong>- Your mileage will vary when doing any sort of animation on mobile devices. Android is notoriously bad with CSS animations and so things might not be as smooth as you&#8217;d like. Also, for what it&#8217;s worth I&#8217;ve recently been animating <a href="http://jsfiddle.net/leaverou/zwvNY/">max-height</a> which seems to work well.</li>
			<li><strong>Javascript dependency</strong>- Again this approach relies on a bit of Javascript in order to trigger the toggle, but it&#8217;s minimal. I have one Blackberry test device that refuses to listen to any of this stuff, but most browsers, including proxy browsers like Opera Mini and Dolphin Mini, handle it just fine.</li>
			</ul>
			<h3>In the Wild</h3>
			<ul>
			<li><a href="http://www.starbucks.com/">Starbucks</a></li>
			<li><a href="http://mobilewebbestpractices.com">Mobile Web Best Practices</a></li>
			<li><a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a></li>
			</ul>
			<h3>Resources</h3>
			<ul>
			<li><a href="http://jasonweaver.name/lab/flexiblenavigation/">FlexNav</a>
			<li><a href="http://filamentgroup.com/lab/responsive_design_approach_for_navigation/">A Responsive Design Approach for Navigation, Part 1</a> by <a href="http://twitter.com/filamentgroup">@filamentgroup</a></li>
			</ul>
		</section>
		<footer role="contentinfo">   
			<div>
					<a href="http://bradfrost.github.com/this-is-responsive/patterns.html">&larr;More Responsive Patterns</a>
		</footer>
  </div> 
</div>

style.css

#logo {
  font-size: 1em;
  margin: 0;
  padding: 1em;
  line-height: 15px;
  position: relative;
  z-index: 1001;
}
#jump {
  margin: 0;
  padding: 1em;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1001;
}
body:not(:target) #nav {
  outline: 0;
  margin: 0 -1em;
  padding-top: 3em;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
}
body:not(:target) #nav a {
  display: block;
  margin: 0;
  background: #F7F7F7;
  overflow: hidden;
  height: 0;
  line-height: 0;
  padding: 0 1.8em;
}
body:not(:target) #nav:target {
  z-index:1001
}

body:not(:target) #nav:target a {
  border-bottom: 1px solid #808080;
  border-bottom-width: 1px;
  line-height: 3em;
  height: 3em;
  position: relative;
  z-index: 1;
  -moz-transition: height .25s, line-height .25s;
  -ms-transition: height .25s, line-height .25s;
  -o-transition: height .25s, line-height .25s;
  -webkit-transition: height .25s, line-height .25s;
  transition: height .25s, line-height .25s;
}
body:not(:target) #nav:target #back {
  display: block;
  position: relative;
}
body:not(:target) #nav:target #back a {
  background: transparent;
  border: 0;
  display: block;
  height: auto;
  line-height: 1;
  position: absolute;
  top: -101em;
  bottom: -101em;
  left: 0;
  right: 0;
  text-indent: -999em;
  z-index: 0;
}
h1 span {
  display: block;
}
@media screen and (min-width: 48.25em) {
  #logo {
    float: right;
  }
  .small-screen {
    text-indent: -999em;
  }
  nav[role=navigation]  li {
    display: inline-block;
    margin: 0 0.25em;
  }
  nav[role=navigation] li a {
    border: 0;
  }
 body:not(:target) #nav {
    padding-top: 1em;
    margin: 0 0 0 -0.25em;
  }
 body:not(:target) #nav a {
    display: inline;
    padding: 0 1em;
  } 
}

kkj,ljk.;lkk