epic "mob" menu

epic-"mob"-menu.markdown

epic "mob" menu

A Pen by erikpantzar on CodePen.

License.

index.html

<ul class="nav-main nav">
  <li><a href="#">Menu item</a>
    <ul class="nav-sub">
       <li><a href="#">Menu item</a></li>
      <li><a href="#">Menu item</a></li>
      <li><a href="#">Menu item</a></li>
    </ul>
  </li>
  <li><a href="#">Menu item</a></li>
  <li><a href="#">Menu item</a></li>
  <li><a href="#">Menu item</a></li>
</ul>

script.js

// indicate that there are sub-menus
$('.nav-sub').parent().addClass('js-has-children');

// menu toggler markup
// add "js-" class to indicate to others that this is linked with JS
var menuToggler = "<button class='js-nav-toggler'>Toggle menu</button>";

// add the button to all the items that have children
$( menuToggler ).appendTo( '.js-has-children' );

$('.js-nav-toggler').on('click', function() {
  // toggle sub-menu
  $(this).siblings('.nav-sub').toggleClass('active');
  
});

style.scss

@import "compass/css3";
body {
  padding: 40px;
  background: #eee;
}


// general
.nav {
  background: white;
  width: 400px;
  min-height: 40px;
  display: block;
  float: left;
  border-right: 4px solid green;
  
  // applies to all children
  li {
    border-right: 2px solid black;
    display: block;
    list-style: none;
  }
  
  // applies to all links
  // need to be ovverriden if needed to be 
  // diffrent in submenu
  a {
    float: left;
    padding-left: 10%;
    width: 90%;
    background: red;
    min-height: 40px;
    border-bottom: 2px solid green;
    line-height: 40px;
  }
}

// child of nav
.nav-sub {
  padding-left: 5%;
  width: 95%;
  display: none;
  clear: both;
  
  // toggle menu with class
  &.active {
    display: block;
  }
  
  // overrides from ".nav a"
  a {
    background: blue;
    color: white;
    border-bottom: 3px solid yellow;
  }
}

// button added by JS
.js-has-children {
  position: relative;
}

.js-nav-toggler {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: inline-block;
  float: right;
  width: 40px; height: 40px;
  background: yellow;
  color: blue;
  // some button element resets
  border: none;
  box-shadow: none;
  cursor: pointer; // button defauly?
}