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.

Mobile-first Pull-down Мenu with jQuery

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.


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>

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>


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;} span { background-color: transparent; } span:before, span:after { top: 0; } span:before {transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  background: #fbaa35;} span:after {transform: translateY(-10px) rotate(-45deg);
  -webkit-transform: translateY(-10px) rotate(-45deg);
  -ms-transform: translateY(-10px) rotate(-45deg);
  top: 10px;
  background: #fbaa35;}


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() {
    document.querySelector("#nav-toggle").addEventListener("click", function() {
}(window.jQuery || window.$));

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

Related post:  Why the homepage is the most important page on your website?

Download Simple Mobile Ready Menu DEMO

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

Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.