A CodePen by Jupiter St John. Lightweight Responsive Menu with raw JS and CSS - This is an experiment of a responsive navigation menu, made with Javascript and CSS. It uses CSS media queries and raw lightweight Javascript. No full blown jQuery. Works with lists tooo!! (ul ol) Simple to implement in your projects. Please just credit me (christian…

index.html

<nav role="navigation" class="nav cf">
  <span id="mobmenu"></span>
  <ul>
    <li class="has-sub"><a href="#" class="item">haz the sub<i class="icon-arrow-down"></i></a>
      <ul class="sub">
        <li><a href="" class="sub-item">sub menu 1</a></li>
        <li class="has-sub2"><a href="" class="sub-item">has sub 2<i class="icon-arrow-down"></i></a>
          <ul class="sub2">
            <li><a href="" class="sub-item2">sub sub 1</a></li>
            <li><a href="" class="sub-item2">sub sub 2</a></li>
            <li class="has-sub3"><a href="" class="sub-item2">haz sub3<i class="icon-arrow-down"></i></a>
              <ul class="sub3">
                <li><a href="" class="sub-item3">subsubsub1</a></li>
                <li><a href="" class="sub-item3">su bsubsub2</a></li>
                <li><a href="" class="sub-item3">subsubsub3</a></li>
                <li><a href="" class="sub-item3">subsubsub4</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="" class="sub-item">submenu3</a></li>
      </ul>
    </li>
    <li><a href="#" class="item">menu2</a>
    </li>
    <li><a href="#" class="item">menu3</a>
    </li>
    <li><a href="#" class="item">menu4</a>
    </li>
  </ul>
</nav>

<div class="hint">
Check out <a target="_blank" href="http://j.mp/XuPZb9">this article</a> for more info!
</div>

script.js

/*==================
JAVASCRIPT FOR THE
NAVIGATION MENU
==================*/
/* (function() {
	var showing = false,
      mobmenu = document.getElementById('mobmenu'),
      items = document.getElementsByClassName('item');
  console.log('showing ' + showing);
  mobmenu.onclick = function() {
    var i=0,item;
    if(!showing)
      while(item=items[i++]) {
		  	item.style.display = 'inline-block';
		  	item.style.width = "100%";
		  }
		 else
	  	while(item=items[i++])
	  		item.style.display = 'none';
    console.log('showing b ' +showing);
	  showing = !showing;
    console.log('showing a ' +showing);    
  }
})(); */     

/* my js skills are kinda weak so here is the 
/* logic in jquery. I know it can be Improved a shit ton */

$(document).ready( function() {
  var $mobmenu = $("#mobmenu");
  var $navChildren = $(".nav").find("a");
  var $item = $(".item");
  var $show = (".show-menu").length;
  var $subItem = $(".sub-item");
  var $subItemTwo = $(".sub-item2");
  var $subItemThree = $(".sub-item3");
  var $subTrig = $(".has-sub");
  var $subTrigTwo = $(".has-sub2");
  var $subTrigThree = $(".has-sub3");
  $mobmenu.on("click", function(e) {
     e.preventDefault();
    if ($navChildren.hasClass("show-menu")) {
      $navChildren.removeClass("show-menu");
    } 
    else {
      $item.addClass("show-menu");
    }
  });
  $subTrig.on("click", function(e) {
     e.preventDefault();
    $subItem.toggleClass("show-menu");
  });
  $subTrigTwo.on("click", function(e) {
     e.preventDefault();
    $subItemTwo.toggleClass("show-menu");
  });
  $subTrigThree.on("click", function(e) {
     e.preventDefault();
    $subItemThree.toggleClass("show-menu");
  });
});

style.scss

@import "compass";
$orange: orangered;
$hover: #ccc;
$blue : #26a2cb;
$breakpoint: 600px;
$max-width-menu: 850px;

/* font-face for the sub-menu icon */

@font-face {
	font-family: 'menu-icon';
	src:url('fonts/menu-icon.eot');
}
@font-face {
	font-family: 'menu-icon';
	src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRk9UVE8AAAQMAAsAAAAABigAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAAAO8AAAFLOUoIc0ZGVE0AAAH4AAAAGgAAABxnG2JAR0RFRgAAAhQAAAAcAAAAIAAyAARPUy8yAAACMAAAAEsAAABgL9zcP2NtYXAAAAJ8AAAAPQAAAVLgF/LMaGVhZAAAArwAAAAuAAAANvv9AC1oaGVhAAAC7AAAAB4AAAAkBBD/5mhtdHgAAAMMAAAAEwAAABQH/gAAbWF4cAAAAyAAAAAGAAAABgAFUABuYW1lAAADKAAAANYAAAGVbAmIpnBvc3QAAAQAAAAADAAAACAAAwAAeJxtULtKA0EUPTeZMbIOG427ksAYg4WNBFdJLVhos6X+gVgEcbVIGn/Ax5QO2Po/+yPCfsBcWHGcJRCb5RTnnMt9E4QAEUUPd8VyOr99LEAdEM75oMOTLg+FUV2jxDjC6HrgjVkL1TP3bHkhNT77GtjW+NrRUJoOB9hoemyijz3s4wgny2J+mWXZik5XdBboKgTXk/9XAOiFXumN3iGJxPji6ZltzLbiJHWzeuYCquPaNnBWxpWYRP7X19/uJm1XsUtac0zuCWKYewRfmtL74EoZG16IH8u2F/NHYlKjonDabvOpUWtJLrf+AK7WeaUAeJxjYGBgZACCM7aLzoPos3n3d8BoAFJHCCAAAHicY2BkYGDgA2IJBhBgYmAEQhYwBvEYAAR2ADd4nGNgZvzPOIGBlYGD0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAMBBJMhIM01hcHhAcMHBsYH/x8w6DE+YFBoYGBghCtQAEJGAGyHDR0AeJxjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETCCJB0wfGP7/B7MYICwFRgEWqC4wYGRjQOaOSAAAzcgIsgAAAHicY2BkYGAAYv7fHDrx/DZfGbiZGEDgbN79HQj6/wMmBsYHQC4HA1gaACvpC10AAHicY2BkYGB88P8Bgx4TAwPDPwYgCRRBAawAbekD+AAAeJxjYmBgYAJixv8QDAIAEl4CBQAAAFAAAAUAAHichY49bsJAEIU/g0EgqCJEidwgpVlrvXQcwAUH4ALIQi6wJQNFLpI2h6DOMXIADkHPsz2iiZSsNNpv3rz5AeZ8EtG+iCkL4wEx78ZD1nwYx/LcjEfM+DEeS3/IGcVTKW9dV8sDJqyMh+xwxrE8X8Yjlnwbj6XfOVFQcZW75EAt5lRUV1ceauFL69O8Sy7d33BUa0IgxevfKn4P6/Ugh2OjaCkTkdfVJa+bY5GE1Cfb5LVUHLzbuOAz2f4+b69qw1m1flfW3cK+aM6lJmWp/2fCEyXgPHoAAHicY2BmwAsAAH0ABA==) format('woff'),
		 url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'menu-icon';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-arrow-down, .icon-layers-alt, .icon-layers {
	font-family: 'menu-icon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-arrow-down:after {
	content: "\e000";
}
.icon-layers-alt:before {
	content: "\e001";
}
.icon-layers:before {
	content: "\e002";
}

* {
  box-sizing: border-box;
}

/************************************
This class holds the menu items
************************************/
.nav {
  margin: 1em auto;
  padding: 0;
  max-width: $max-width-menu;
  /* YOU CAN USE IT ONE LISTS TOOOOOO */
  list-style-type:none;
  background: $orange;
  transition: all .7s ease;
  
  /************************************
  overflow:hidden is vital for this menu
  because the items *float* to the left
  and they would disappear, without 
  this style applied.
  This way .nav expands to contain the
  floats and display them!
  http://css-tricks.com/all-about-floats/
  ************************************/
  box-shadow: 10px 10px 10px #333;
  max-width: $max-width-menu;
  .item {
    /* display them horizontally*/
    display: inline-block;
    /* grab some space around them */
    padding: 1.5em 0;
    width: 25%;
    float: left;
    /* float them to the left, to avoid 
    margins on the side (different
    in each browser) */
    color: white;
    text-align: center;
    text-decoration: none;
    transition: all .4s ease;
    &:hover, &.current {
      background: $hover;
      color: black;
    }
  }
  li {
    white-space: no-wrap;
    ul li {
      white-space: no-wrap;
    }
  }
}

.icon-arrow-down {
  position: absolute;
  padding-left: .7em;
} 

.sub-item, .sub-item2, .sub-item3 {
  padding: 1.5em 4.52em;
  color: $orange;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  background: $hover;
  white-space: nowrap;
  width: 100%;
  transition: all .4s ease;
  &:hover {
    background: $orange;
    color: snow;
  }
}

#mobmenu {
  /* hide it at first! */
  display:none;  
  text-align: center;
  height: 64px;
  cursor:pointer;
}

@media only screen and (max-width:$breakpoint) {
  #mobmenu{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAAACVBMVEX///8AAAD///9+749PAAAAAnRSTlMAAHaTzTgAAAAnSURBVHhe7c+hEQAACMNAlmTJTompq+OOw+RlXCpB9h3aFoGXgxAwLsSUwfWOht8AAAAASUVORK5CYII=) no-repeat;
    background-position: 50%;
    /* NOW IT'S TIME TO SHOW THE MENU TOGGLE */
    display:block;
  }
  
  /*Either be more specific or use important:
  .menu {
    display: none !important;
  }
  */
  .nav {
    overflow: hidden;
  }
  .nav .item {
    display: none;
  }
  ul {
    padding: 0;
    margin: 0;
  }
  .sub-item, .sub-item2,.sub-item3 {
    display: none;
    padding: 1.5em 0 !important;
  }
  .show-menu {
    display: inline-block !important;
    width: 100% !important;
  }
}

@media only screen and (min-width: $breakpoint) {
  .nav .item{
    /*
    WE HAVE TO SET IT TO IMPORTANT,
    BECAUSE WE HAVE TO OVERRIDE THE
    JAVASCRIPT INLINE CODE WE WROTE
    */
    width: 25% !important;
    display: inline-block !important;
  }
  ul {
    padding: 0;
    margin: 0;
  }
  .nav ul > li {
    position: relative;
    &:hover > .sub {
      transform: translate3d(0, 0, 0);
    }
  }
  .sub {
    position: absolute;
    top: 4.1em;
    transform: translate3d(0, -700px, 0);
    transition: all .3s ease-out;
    li {
      padding: 0;
    }
    .has-sub2 {
      &:hover .sub2 {
        transform: translate3d(0, 0, 0);
      }
    }
    .has-sub3 {
      &:hover .sub3 {
        transform: translate3d(0, 0, 0);
      }
    }
    .sub2 {
      position: absolute;
      top: 0;
      left: 100%;
      transform: translate3d(0, -900px, 0);
      transition: all .5s ease;
    }
    .sub3 {
      position: absolute;
      top: 0;
      left: 100%;
      transform: translate3d(0, -900px, 0);
      transition: all .5s ease;
    }
  }
}









.hint {
  background: lightgrey;
  padding: 1em;
  font-size: 1.5em;
  text-align:center;
  margin: 2em auto 2em;
  clear:both;
}

/* clearfix */

.cf:before,
.cf:after, {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}