Create A Responsive Navigation Menu With jQuery CSS

{tocify} $title={Table of Contents}

Navigation menus are compulsory on the website / blog to be able to make the reader to get articles their want. Whether it is loaded with a link that is only heading in one article or towards a specific category. Navigation menus can be placed at the top or bottom of the article, and there is also in the sidebar.

Along with the development of technology and the emergence of the smartphone / tablet with a screen size different . Inevitably many of the bloggers start thinking of ways to make the blog be responsive ( able to adjust the screen . One part that needs to be made responsive else that is not on the navigation menu of the website.

Actually a lot of scripts out there to facilitate the making menu navigation responsiveness . Able to turn it into a tag select method , change the menu into writing more and more. While the menu in this tutorial is using jQuery and CSS. At least the jQuery library must be installed on your hosting website, so that this menu navigation can function.

This time I will explain how to create a navigation menu with jguery and css with slidedown effect.

HTML Structure

<nav>
<a id="button" href="#">Menu</a>
  <ul class="menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu With DropDown</a>
      <ul class="hidden">
        <li><a href="#">Menu Dropdown 1</a></li>
        <li><a href="#">Menu Dropdown 1</a></li>
        <li><a href="#">Menu Dropdown 1</a></li>
        <li><a href="#">Menu Dropdown 1</a></li>  
      </ul>
    </li> 
  </ul>
</nav>

Html structure above is the basic structure in making menu navigation with slideshow effect.
Tag a (row 2) with id button will serve as a menu button that will display when the screen is smaller.
Each tag ul given different class, the ul tag that I gave the first class menu (line 3) as a marker that is the main class for the ul tag.
While the ul tag with hidden class (line 10) as a backup if the JS does not work.

CSS Style

nav {
  font:normal normal 11px/30px Verdana,Geneva,sans-serif;
  background-color:#313131;
}

nav,
nav * {
  display:block;
}

nav #button {
  display:none;
}

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

nav ul {
  height:30px;
}

nav li {
  float:left;
  position:relative;
}

nav li a {
  display:block;
  padding:0 10px;
  color:white;
  text-decoration:none;
}

nav li:hover > a {
  background-color:#1D8FC5;
}

nav li ul {
  position:absolute;
  background-color:black;
  height:auto;
  width:160px;
  display:none;
}

nav li:hover ul.hidden {
  display:block;
}

nav li li {
  float:none;
}

@media only screen and (max-width:600px) {
  nav #button {
    display:block;
    padding:0 15px;
    background-color:black;
    text-decoration:none;
  }
  nav #button.active {
    background-color:#1D8FC5;
    color:white;
  }
  nav ul {
    height:auto;
    display:none;
  }
  nav li {
    float:none;
  }
  nav li ul {
    width:100%;
  }
}

From this CSS code, under normal conditions, a tag with the button class is not shown, as well as ul class menu tag is set only 30px height while the hidden class made ​​auto. And li tag is made of float left
By the time the screen is less than 600px then tagged with a class A button is displayed. And also tag ul class menu created auto height, as well as remove the css float in the li tag.

jQuery Script

(function () {
    $('nav ul').removeClass('hidden');
    $('nav li').hover(function () {
        $(this).parent('ul.menu').css('overflow', 'visible');
        $(this).children('ul').filter(':not(:animated)').slideDown();
    }, function () {       
        $(this).children('ul').slideUp();
    });

    $('#button').toggle(function () {
        $(this).addClass('active');
        $('nav > ul').slideDown();
        return false;
    }, function () {
        $(this).removeClass('active');
        $('nav > ul').slideUp();
        return false;
    });
    function checkWidth() {
        if ($(window).width() > 600) {
            $('nav > ul').css('display', 'block');
        } else if ($(window).width() <= 600 && $('#button').attr('class') === 'active') {
            $('nav > ul').css('display', 'block');
        } else if ($(window).width() <= 600 && $('#button').attr('class') !== 'active') {
            $('nav > ul').css('display', 'none');
        }
    }
    $(window).resize(checkWidth);
})();

In the fourth line when the tag is highlighted then the menu ul li class menu with css overflow is made visible, this is because if the menu button with a smaller screen (600px) then the overflow will be hidden so if not given a function like that then when the li tag the sub menu of the menu is highlighted below are not visible.
In line 10-18 is a toggle function for the menu button.
In line 19-27 function to see to know the size of the screen size along with a comparison to make a tag with the class menu appears or not.
On line 28 jQuery resize() function which will perform the function checkWidth on line 19-27 if screen size changed. (jQuery resize() will run in the event of changes in the size of the screen).

Well that's a little explanation of how to create a menu responsive as I'm concerned.
May be useful for those of you who read.
Always for your Success