Mobile-first Pull-down Мenu with jQuery

A quick solution for a mobile-first navigation, powered by jQuery and CSS3, which slides from the top of the page when it is toggled.

Mobile-first menus are quite popular and there are new solutions appearing every day.Today I am presenting a simple solution for this type of navigation with eye-catching effects that might be useful for parallax website or any other web pages.

This menu works with a simple markup and a bit of jQuery. The menu shows up after it is triggered through the hamburger icon and it slides out from the top of the page.

The current solution is presented by using the Bootstrap framework and FontAwesome icon fonts, but it can be implemented with whatever responsive framework you are working with.

Have a look at the code below to see how you can implement it and make sure that you check the demo to see it how it works.Feel free to download the code at the end of this post.

The HTML

Add the required HTML to have the main structure of the navigation.

<nav class="pull" display="none">
 <ul class="top-nav">
 <li><a href="#intro">Accueil <span class="indicator"><i class="fa fa-home"></i></span></a></li>
 <li><a href="#about">A propos <span class="indicator"><i class="fa fa-question-circle"></i></span></a></li>
 <li><a href="#services">Services <span class="indicator"><i class="fa fa-cogs"></i></span></a></li>
 <li><a href="#portfolio">Portfolio <span class="indicator"><i class="fa fa-briefcase"></i></span></a></li>
 <li><a href="#team">Equipe <span class="indicator"><i class="fa fa-users"></i></span></a></li>
 <li><a href="#contacts">Contacts <span class="indicator"><i class="fa fa-map-marker"></i></span></a></li>
 </ul>
</nav>

You also need to include the hamburger icon in order to trigger the menu.

<a id="nav-toggle" class="nav_slide_button" href="#"><span></span></a>

CSS

Add the basic styling for the navigation.

nav ul {list-style: none;
  list-style-image: none;}

nav {  background-color: #fbaa35;
  margin-top: -1px;}

nav ul {  list-style: none;
  padding: 0;}

nav ul li {color: #fafafa;
  display: block;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.6);
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  padding-left: 0;
  position: relative;}

nav ul li:last-child { border: none; }

nav ul li a {color: #fafafa;
  display: block;
  padding: 20px;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  padding-left: 0;
  position: relative;}

nav ul li a:hover,
nav ul li a:focus {text-decoration: none;
  color: #d73930;}

Also, add the styling for the hamburger icon which is used to toggle the menu.

#nav-toggle {position: absolute;
  right: 16px;}

#nav-toggle {cursor: pointer;
  padding: 10px 35px 16px 0px;}

#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {cursor: pointer;
  border-radius: 1px;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  -o-border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #fafafa;
  position: absolute;
  display: block;
  content: '';}

#nav-toggle span:before { top: -10px; }

#nav-toggle span:after { bottom: -10px; }

#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after { transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;}

#nav-toggle.active span { background-color: transparent; }

#nav-toggle.active span:before,
#nav-toggle.active span:after { top: 0; }

#nav-toggle.active span:before {transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  background: #fbaa35;}

#nav-toggle.active span:after {transform: translateY(-10px) rotate(-45deg);
  -webkit-transform: translateY(-10px) rotate(-45deg);
  -ms-transform: translateY(-10px) rotate(-45deg);
  top: 10px;
  background: #fbaa35;}

JS

The last step is to add some jQuery in order make a working mobile-first menu. Add this JS snippet to finish it up.

(function ($) {
  $(document).ready(function (){
    $(window).load(function() {
      $('.nav_slide_button').click(function() {
        $('.pull').slideToggle();
      });
    });
    document.querySelector("#nav-toggle").addEventListener("click", function() {
      this.classList.toggle("active");
    });
  });
}(window.jQuery || window.$));

This is it. After adding all the code needed, you should have a simple navigation that toggles from the top.

Download Simple Mobile Ready Menu DEMO

This plugin is created by Aglébé Marc-Aurèle and was first added to Codepen.