CSS-Only Responsive Mobile Navigation - 10/4/13

css-only-responsive-mobile-navigation.html

<!-- http://anythinggraphic.net/responsive-mobile-navigation-techniques -->

<div class="menu-main-nav-container">
    <ul class="nav-menu" id="menu-main-nav">
        <li class="menu-item"><a href="#">Home</a></li>
        <li class="menu-item"><a href="#">About</a></li>
        <li class="menu-item"><a href="#">Services</a></li>
        <li class="menu-item"><a href="#">Portfolio</a></li>
        <li class="menu-item"><a href="#">Contact</a></li>
    </ul>
</div>

css-only-responsive-navigation-header.php

<?php
//* @link http://anythinggraphic.net/responsive-mobile-navigation-techniques
?>
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<input type='checkbox' id='toggle'/>
<label for="toggle" class="toggle" data-open="Main Menu" data-close="Close Menu" onclick></label>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

css-only-responsive-navigation.css

/* Functional Styles (Required) */
/* Tim Pietrusky advanced checkbox hack (Android <= 4.1.2) */
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

/* Nicolas Gallagher micro clearfix */
.clearfix:before, .clearfix:after {
     content: "";
     display: table;
}
.clearfix:after {
     clear: both;
}

#masthead {
     position: relative;
}

#toggle, .toggle {
     display: none;
}

.nav-menu > li {
     float:left;
     list-style: none;
}

@media only screen and (max-width: 768px) {
     .nav-menu {
          display: none;
          opacity: 0;
          position: absolute;
          right: 0;
          width: 100%;
     }

     .nav-menu li {
          display: block;
          margin: 0;
          width: 100%;
     }

     .nav-menu li a {
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          display: block;
          text-decoration: none;
          width: 100%;
     }

     .toggle {
          cursor: pointer;
          display: block;
          position: relative; 
          -webkit-touch-callout: none; /* Disables OS callout when touching and holding a link */
          -webkit-user-select: none;
          user-select: none;
     }

     #toggle:checked ~ .nav-menu, .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
          display: block;
          opacity: 1;
     }
}

/*--------------------------------
 Presentation Styles (Editable)
---------------------------------*/
#masthead {
     height: 100%;
     min-height: 100px;
     padding: 0 20px;
}

#masthead > h1 {
     color: #DFDFDF;
     float: left;		
     font-family: Georgia;
     font-size: 28px;
     font-style: italic;
     padding: 30px 0 0;
}

.menu-main-nav-container { 
     display: block; 
     float: left; 
}

.nav-menu, .nav-menu > li, .nav-menu > li > a { 
     height: 100%; 
}

.nav-menu li a {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box; 
     box-sizing: border-box;
     display: block;
     font-weight: normal;
     font-size: 16px;
     line-height: 1;
     padding: 10px 20px;
     text-align: left;
     text-decoration: none;
     -webkit-transition: all 0.25s linear;
     -moz-transition: all 0.25s linear;
     -o-transition: all 0.25s linear;
     transition: all 0.25s linear;
}

.nav-menu li a:hover, .nav-menu li a:focus {
     background: #F2F2F2;
     box-shadow: inset 5px 0 0 #51C1F1;
     color: #51C1F1;
     padding-left: 30px;
}

.toggle {
     margin: 0 auto;
     width: 200px;
     z-index: 2; 
}

@media only screen and (max-width: 768px){
     .nav-menu {
          background: #FFF;
          border-top: 1px solid #51C1F1;
          padding-top: 1em;
     }

     .nav-menu, .nav-menu > li, .nav-menu > li > a {
          height: auto;
     }

     .nav-menu > li > a{
          padding: 15px 15px;
     }

     .nav-menu > li > a:hover, .nav-menu > li > a:focus {
          background: #F2F2F2;
          box-shadow: inset 5px 0px #51C1F1;
          padding: 15px 15px 15px 25px;
     }

     .toggle:after {
          background: #51C1F1;
          -webkit-border-radius: 2px;
          border-radius: 2px;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box; 
          color: #FFFFFF;
          content: attr(data-open);
          display: block;
          font-size: 12px;
          margin: 33px 0;
          padding: 10px 50px;
          text-align: center;
          -webkit-transition: all 0.5s linear;
          -moz-transition: all 0.5s linear;
          -o-transition: all 0.5s linear;
          transition: all 0.5s linear;
          width: 200px;
     }

     .toggle:hover:after {
	     background: #45ABD6;
     }

     #toggle:checked + .toggle:after {
	     content: attr(data-close);
     }
}

@media only screen and (max-width: 479px){
     #masthead > h1 { 
          text-align: center;
     }

     #masthead > h1, .toggle:after { 
          float: none; 
     }

     .toggle:after { 
          text-align: center; width: 100%; 
     }
}