Mobile Nav

[email protected]

by Ryan Brackett

HTML

<!-- start MOBILE BTN -->
<div id="mobnav-btn">
  <div class="mobnav-icon">
    Menu
  </div>
</div>
<!-- end MOBILE BTN -->

<!-- start REGULAR CMS NAV -->
<div class="xnav">
  <div class="xnav-wrapper">
    <ul class="sf-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Cupcakes</a>
        <ul>
          <li><a href="#">1.1 Cupcakes</a></li>
          <li><a href="#">1.2 Cupcakes</a></li>
          <li><a href="#">1.3 Cupcakes</a>
            <ul>
              <li><a href="#">2.1 Cupcakes</a></li>
              <li><a href="#">2.2 Cupcakes</a></li>
              <li><a href="#">2.3 Cupcakes</a></li>
            </ul>

          </li>
        </ul>
      </li>
      <li><a href="#">Doughnuts</a></li>
      <li><a href="#">Icecream</a></li>
      <li><a href="#">Banana Split</a> </li>
      <li><a href="#">Brownies</a></li>
      <li><a href="#">Lollipop</a></li>
      <li><a href="#">Pixie Stix</a></li>
      <li><a href="#">Bubble Gum</a></li>
      <li><a href="#">Chocolate Chips</a></li>
      <li><a href="#">Cherries</a></li>
    </ul>
  </div>
</div>
<!-- end REGULAR CMS NAV -->

<h1>Mobile Nav </h1>
<b><a href="mailto:[email protected]">[email protected]</a></b>
<br/>
<br/>The concept is very simple: Off-Canvas navigation based on the active state ( html.mobile-menu-open ). Mobile nav items options scroll if out of viewport.
<br/>
<br/>The CSS portion will be a little different because I had to create some styles that are natively in the framework. Also, the CSS portion will drop into your phone.css and tablet.css files. Cupcake ipsum dolor sit amet. Wafer tootsie roll I love oat cake.
Unerdwear.com icing bear claw liquorice marshmallow gummies cupcake tiramisu. Applicake cupcake powder jelly beans chupa chups muffin. Lollipop bear claw sweet roll macaroon. Jelly-o gummi bears apple pie. I love cheesecake carrot cake pudding toffee
marzipan chupa chups jelly beans dragée. Pie chocolate cake bear claw toffee gingerbread. Chupa...

CSS

html {
  left: 0%;
  position: relative;
  overflow-x: hidden;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

body {
  font-family: arial;
  font-size: 14px;
  line-height: 20px;
  padding: 30px;
}


/* start MOBILE NAV */

#mobnav-btn {
  position: fixed;
  top: 50px;
  right: 50px;
  opacity: 1;
  color: #000;
  display: block;
  cursor: pointer;
  padding: 10px 9px;
  padding-bottom: 6px;
  font-size: 16px;
  border: 2px solid #DEDEDE;
  z-index: 999999999999;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  background-color: white;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.mobile-menu #mobnav-btn .mobnav-btn-label {
  display: block;
}

.mobile-menu-open #mobnav-btn {
  background-color: #232128;
  border-color: #232128;
}

.mobile-menu-open {
  left: 50%;
  overflow: hidden;
}

.mobile-menu-open #mobnav-btn .mobnav-icon {
  color: white;
}

.xnav {
  position: fixed;
  background: #232128;
  width: 50%;
  left: -50%;
  bottom: 0%;
  top: 0%;
  z-index: 99999999999999999;
  zoom: 1;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.mobile-menu-open .xnav {
  z-index: 9999999999999;
  zoom: 1;
  left: 0%;
}

.xnav-wrapper {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}

.xnav ul {
  float: none;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.xnav ul ul {
  padding-left: 30px;
  font-size: 98%;
}

.sf-menu li {
  float: none;
  margin: 0px!important;
  background: none!important;
}

.sf-menu a,
.sf-menu .first a {
  background-image: none!important;
  color: white!important;
  padding: 15px;
  margin-left: 0px;
  margin-right: 0px;
  display: block;
  border-bottom: 1px...

JavaScript

//start MOBILE NAV
$('#mobnav-btn').click(

  function() {
    $("html").toggleClass("mobile-menu-open");
    $(".xnav-wrapper").delay(500).queue(function(reset_scroll) {
      $(this).scrollTop(0);
      reset_scroll();
    });
  });
//end MOBILE NAV