CodePen Embed - Hidden Mobile Menu

<!--

Follow me on
Dribbble: https://dribbble.com/supahfunk
Twitter: https://twitter.com/supahfunk
Codepen: https://codepen.io/supah/

-->
<header>
  <nav id="menu">
    <ul>
      <li><a href="#">Design</a></li>
      <li><a href="#">Experience</a></li>
      <li><a href="#">Software</a></li>
      <li><a href="#">Entertainment</a></li>
      <li><a href="#">Community</a></li>
      <li><a href="#">Installation</a></li>
      <li><a href="#">Download</a></li>
      <li><a href="#">Specification</a></li>
      <li><a href="#">Shop</a></li>
    </ul>
  </nav>

</header>

<div class="content">
  <h1>Resize window, please!</h1>
  <p>
    Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
  </p>
  <p>
    Scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue.
  </p>
  <p>
    Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
  </p>
  <p>
    Velit mollis odio sollicitudin lacinia aliquam posuere, sapien elementum lobortis tincidunt, turpis dui ornare nisl, sollicitudin interdum turpis nunc eget sem nulla eu ultricies orci praesent id augue nec lorem pretium congue sit amet ac nunc fusce iaculis
    lorem eu diam hendrerit at mattis purus dignissim vivamus mauris tellus, fringilla vel dapibus a, blandit quis erat vivamus elementum aliquam luctus etiam fringilla pretium sem vitae sodales mauris id nulla est praesent laoreet, metus vel auctor aliquam,
    eros purus vulputate leo, eget consequat neque quam id tellus duis ultricies tempor tortor, vitae dignissim ligula mattis nec in hac habitasse platea dictumst.
  </p>
</div>

/*--------------------------------------------------
Body & altro
--------------------------------------------------*/
*,
*:before,
*::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}


/*--------------------------------------------------
Nav
--------------------------------------------------*/

header {
  background: #1e2b33;
  padding: 15px 5px;
  position: relative;
  z-index: 1;
}

#menu {
  position: relative;
  z-index: 1;
  width: 100%;
}

#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  display: inline-block;
}

#menu ul li {
  display: inline-block;
  position: relative;
}

#menu ul li a {
  color: #fff;
  text-decoration: none;
  padding: 0.7em;
}


/*--------------------------------------------------
On Hidden Menu
--------------------------------------------------*/

#menu ul li.on-hidden {
  display: none;
}

#on-hidden-menu {
  display: block;
  position: absolute;
  z-index: 10;
  right: 0;
  margin-top: 15px;
  min-width: 280px;
}

#on-hidden-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  overflow: hidden;
  height: 0;
}

#on-hidden-menu li {
  background: #30424d;
  border-bottom: 1px solid #273640;
  opacity: 0;
  -moz-transition: all .4s ease-in-out .2s;
  -o-transition: all .4s ease-in-out .2s;
  -webkit-transition: all .4s ease-in-out .2s;
  transition: all .4s ease-in-out .2s;
  position: relative;
}

#on-hidden-menu li a {
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
  padding: 10px 15px;
  display: block;
}

#on-hidden-menu li a:hover {
  background: #354C5A;
}


/* on hidden menu open */

#on-hidden-menu.open ul {
  display: block;
  height: 100%;
}

#on-hidden-menu.open ul li {
  opacity: 1;
}

#on-hidden-menu.open ul li:last-child {
  border-bottom-left-radius: 5px;
}

/* toggle */
#on-hidden-menu .toggle {
  width: 32px;
  position: absolute;
  top: -42px;
  right: 10px;
  height: 32px;
  background-color: #f73a14;
  z-index: 1;
  cursor: pointer;
  border-radius: 2px;
}

#on-hidden-menu .toggle:before,
#on-hidden-menu .toggle:after,
#on-hidden-menu .toggle span:before {
  content: '';
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 5px;
  position: absolute;
  top: 17px;
  left: 5px;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

#on-hidden-menu .toggle:after {
  left: 13px;
  -moz-transition-delay: .1s;
  -o-transition-delay: .1s;
  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}

#on-hidden-menu .toggle span:before {
  left: 21px;
  -moz-transition-delay: .2s;
  -o-transition-delay: .2s;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}


/* close */
#on-hidden-menu.open .toggle:before,
#on-hidden-menu.open .toggle:after {
  width: 20px;
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
  top: 14px;
  height: 3px;
}

#on-hidden-menu.open .toggle:after {
  -moz-transform: rotate(-225deg);
  -ms-transform: rotate(-225deg);
  -o-transform: rotate(-225deg);
  -webkit-transform: rotate(-225deg);
  transform: rotate(-225deg);
  left: 5px;
  -moz-transition-delay: .0s;
  -o-transition-delay: .0s;
  -webkit-transition-delay: .0s;
  transition-delay: .0s;
}

#on-hidden-menu.open .toggle span:before {
  top: 14px;
  left: 13px;
  width: 2px;
  height: 2px;
  -moz-transition-delay: .0s;
  -o-transition-delay: .0s;
  -webkit-transition-delay: .0s;
  transition-delay: .0s;
}


/*--------------------------------------------------
Content
--------------------------------------------------*/
.content {
  max-width: 650px;
  margin: 0 auto;
  padding: 30px 15px;
}

/*--------------------------------------------------
        Hidden Nav
        --------------------------------------------------*/
hiddenNavBar = {
  $menu: $('#menu'),
  init: function() {
    this.resize();
    $('<div id="on-hidden-menu"><div class="toggle "><span></span></div><ul></ul></div>').hide().insertAfter(this.$menu);
    // toggle
    $('#on-hidden-menu .toggle').click(function() {
      $('#on-hidden-menu').toggleClass('open');
    });

    // win load & resize
    $(window).on('load resize', function() {
      hiddenNavBar.resize();
    });
  },
  resize: function() {
    setTimeout(function() {
      var menuWidth = $('ul', this.$menu).width() + 60;
      var winW = $(window).width();

      console.log(menuWidth, winW);

      if (menuWidth > winW) {
        console.log('init');

        $('#on-hidden-menu').show();
        $clone = $('li:not(".on-hidden"):last', this.$menu).addClass('on-hidden').clone();

        if ($clone.parent().size() == 0) {
          $clone.prependTo($('#on-hidden-menu ul'));
        }

        hiddenNavBar.resize();

      } else if (menuWidth + $('li.on-hidden:first').width() < winW) {
        $('li.on-hidden:first').removeClass('on-hidden');
        $('#on-hidden-menu ul li:first').remove();
      }

      if ($('.on-hidden').size() == 0) {
        $('#on-hidden-menu').removeClass('open').hide();
      }
    }, 10);
  }
};

/*--------------------------------------------------
DOC READY
--------------------------------------------------*/
$(function() {
  hiddenNavBar.init();
})

This Pen is owned by Bryan C Guner on CodePen. It is a fork of this Pen.

See more by @bgoonz on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js