Loading...

Easy Way Create HTML Dropdown Menu with JQuery

In this session I want to share my creations about html dropdown menu with Jquery. This is the one of the easy way to do html dropdown menu. To do this, I use Jquery to help my code to create html dropdown. The first think you should do is open you favorit editor to make a code. In this case I use sublime text editor. First step is create basic html layout.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

After that just add these element inside of the body tag.

<div class="wrap">
<a href="#" class="menu"><i class="fa fa-bars"></i></a>
<nav id="main_nav" class="has_child">
      <ul id="menu">
          <li><a href="#">HOME</a></li>
    			<li class="have-menu"><a href="#">PAGE <i class="fa fa-caret-down"></i></a>
    				<ul class="sub-menu">
    					<li><a href="#">SUB PAGE1</a></li>
    					<li><a href="#">SUB PAGE2</a></li>
    					<li><a href="#">SUB PAGE3</a></li>
    					<li><a href="#">SUB PAGE4</a></li>
    					<li><a href="#">SUB PAGE5</a></li>
    				</ul>
    			</li>
    			<li class="have-menu"><a href="#">PORTFOLIO <i class="fa fa-caret-down"></i></a>
    				<ul class="sub-menu">
    					<li><a href="#">SUB PORTFOLIO1</a></li>
    					<li><a href="#">SUB PORTFOLIO2</a></li>
    					<li><a href="#">SUB PORTFOLIO3</a></li>
    					<li><a href="#">SUB PORTFOLIO4</a></li>
    					<li><a href="#">SUB PORTFOLIO5</a></li>
    				</ul>
    			</li>
    			<li><a href="#">CONTACT</a></li>
      </ul>
</nav>
</div><div class="wrap">
<a href="#" class="menu"><i class="fa fa-bars"></i></a>
<nav id="main_nav" class="has_child">
      <ul id="menu">
          <li><a href="#">HOME</a></li>
    			<li class="have-menu"><a href="#">PAGE <i class="fa fa-caret-down"></i></a>
    				<ul class="sub-menu">
    					<li><a href="#">SUB PAGE1</a></li>
    					<li><a href="#">SUB PAGE2</a></li>
    					<li><a href="#">SUB PAGE3</a></li>
    					<li><a href="#">SUB PAGE4</a></li>
    					<li><a href="#">SUB PAGE5</a></li>
    				</ul>
    			</li>
    			<li class="have-menu"><a href="#">PORTFOLIO <i class="fa fa-caret-down"></i></a>
    				<ul class="sub-menu">
    					<li><a href="#">SUB PORTFOLIO1</a></li>
    					<li><a href="#">SUB PORTFOLIO2</a></li>
    					<li><a href="#">SUB PORTFOLIO3</a></li>
    					<li><a href="#">SUB PORTFOLIO4</a></li>
    					<li><a href="#">SUB PORTFOLIO5</a></li>
    				</ul>
    			</li>
    			<li><a href="#">CONTACT</a></li>
      </ul>
</nav>
</div>

Those tag element is use for displaying menu navigation on the top page. Then now add style inside of head tag. Or you can create outside of the file and then call it into this file. In this case I inserted my style between head tag ( <head></head> ). You can free styling your own after you implemented my css style. Because I was use jquery to add and remove class. So, you will know which one class will add and remove on that navigation tag. Here my css style.

<style>
*{ padding:0; margin:0;}
.wrap{ width: 1200px; display: block; margin: 0 auto; background: #333; font-family: verdana; font-size: 16px;}
.wrap .menu{ display: none;}
.wrap nav{ padding:20px;}
.wrap nav ul li{ display: inline-block; }
.wrap nav ul li ul.sub-menu{ display: none; position: absolute; z-index: 9999;  background-color: rgba(0,0,0,0.6); border-top:2px solid #826A3A; }
.wrap nav ul li ul.sub-menu li{ display: block; width: 200px;}
.wrap nav ul li a{ font-size: 12px; text-align: center; display: block; padding:5px; text-transform: uppercase; color:#fff; text-decoration: none;}
.wrap nav ul li a:hover{ color:#EFCA81;}
.wrap nav ul li.have-menu-open ul.sub-menu{ display: block;}
@media only screen and (max-width: 1199px){
    .wrap{ width: auto; }
    .wrap a.menu{ display: block;}
    .wrap a.menu i{ position: absolute; top:10px;  right: 88px; font-size: 20px; color: #FFFFFF;  }
    .wrap nav ul li ul.sub-menu{ position: relative; background: black;}
    .wrap nav ul li ul.sub-menu li{ display: block; width: 100%;}
    .wrap nav ul li { display: block; border-bottom:1px solid gold;  }
    .wrap nav ul{ display: none; padding:0 20px;}
    .wrap nav ul.open{ display: block; margin-top: 20px;}
}
</style>

Then after, I put font-awesome css to generate icon icon that use in the html. Just put inside of head tag also.

<link href="../css/font-awesome.min.css" rel="stylesheet">

Why I use ../css in front of the  those css script? it’s because I put font-awesome.min.css outside of the index folder. I did to jquery also. I put it outside of the index folder. Just include jquery file before body tag.

<script src="../js/jquery.min.js"></script>

And put jquery script after.

<script>
    
    $(window).resize(function(){
       
            var width = $(window).width();
            
            if ((width > 1199)) {
              $('nav ul li.have-menu').hover(
            
                   function () {
                      $(this).addClass('have-menu-open');
                   }, 
            
                   function () {
                      $(this).removeClass('have-menu-open');
                   }
              );
            } else {
                  $('nav ul li.have-menu').click(
            
                   function () {
                      $('nav ul li.have-menu').removeClass('have-menu-open');
                      $(this).addClass('have-menu-open');
                   }
              );
             
              $('.wrap a.menu').click(function(){
                  $('nav ul li.have-menu').removeClass('have-menu-open');
                  $('nav ul').toggleClass('open');
              });
            }
    });

    $(document).ready(function(){
        var width = $(window).width();

        if ((width > 1199)) {
          $('nav ul li.have-menu').hover(
        
               function () {
                  $(this).addClass('have-menu-open');
               }, 
        
               function () {
                  $(this).removeClass('have-menu-open');
               }
          );
        } else {
          $('nav ul li.have-menu').click(
        
               function () {
                  $('nav ul li.have-menu').removeClass('have-menu-open');
                  $(this).addClass('have-menu-open');
               }
          );
         
          $('.wrap a.menu').click(function(){
              $('nav ul li.have-menu').removeClass('have-menu-open');
              $('nav ul').toggleClass('open');
          });
        }
    });
  </script>

In this jquery script I add some function like resize function mean when browser resized, width value will resized too and execute inside of the script. There is also hover function for menu which has a sub menu. This html menu also support for mobile device. Have a look in css script, there is @media screen … to detect when browser  less than 1199px, the style will change adjust script inside of @media screen …

Full code will be like this.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Navigation Menu</title>
<link href="../css/font-awesome.min.css" rel="stylesheet">
<style>
*{ padding:0; margin:0;}
.wrap{ width: 1200px; display: block; margin: 0 auto; background: #333; font-family: verdana; font-size: 16px;}
.wrap .menu{ display: none;}
.wrap nav{ padding:20px;}
.wrap nav ul li{ display: inline-block; }
.wrap nav ul li ul.sub-menu{ display: none; position: absolute; z-index: 9999;  background-color: rgba(0,0,0,0.6); border-top:2px solid #826A3A; }
.wrap nav ul li ul.sub-menu li{ display: block; width: 200px;}
.wrap nav ul li a{ font-size: 12px; text-align: center; display: block; padding:5px; text-transform: uppercase; color:#fff; text-decoration: none;}
.wrap nav ul li a:hover{ color:#EFCA81;}
.wrap nav ul li.have-menu-open ul.sub-menu{ display: block;}
@media only screen and (max-width: 1199px){
    .wrap{ width: auto; }
    .wrap a.menu{ display: block;}
    .wrap a.menu i{ position: absolute; top:10px;  right: 88px; font-size: 20px; color: #FFFFFF;  }
    .wrap nav ul li ul.sub-menu{ position: relative; background: black;}
    .wrap nav ul li ul.sub-menu li{ display: block; width: 100%;}
    .wrap nav ul li { display: block; border-bottom:1px solid gold;  }
    .wrap nav ul{ display: none; padding:0 20px;}
    .wrap nav ul.open{ display: block; margin-top: 20px;}
}
</style>
</head>
<body>
<div class="wrap">
<a href="#" class="menu"><i class="fa fa-bars"></i></a>
<nav id="main_nav" class="has_child">
      <ul id="menu">
          <li><a href="#">HOME</a></li>
    			<li class="have-menu"><a href="#">PAGE <i class="fa fa-caret-down"></i></a>
    				<ul class="sub-menu">
    					<li><a href="#">SUB PAGE1</a></li>
    					<li><a href="#">SUB PAGE2</a></li>
    					<li><a href="#">SUB PAGE3</a></li>
    					<li><a href="#">SUB PAGE4</a></li>
    					<li><a href="#">SUB PAGE5</a></li>
    				</ul>
    			</li>
    			<li class="have-menu"><a href="#">PORTFOLIO <i class="fa fa-caret-down"></i></a>
    				<ul class="sub-menu">
    					<li><a href="#">SUB PORTFOLIO1</a></li>
    					<li><a href="#">SUB PORTFOLIO2</a></li>
    					<li><a href="#">SUB PORTFOLIO3</a></li>
    					<li><a href="#">SUB PORTFOLIO4</a></li>
    					<li><a href="#">SUB PORTFOLIO5</a></li>
    				</ul>
    			</li>
    			<li><a href="#">CONTACT</a></li>
      </ul>
</nav>
</div>
	<script src="../js/jquery.min.js"></script>
  <script>
    
    $(window).resize(function(){
       
            var width = $(window).width();
            
            if ((width > 1199)) {
              $('nav ul li.have-menu').hover(
            
                   function () {
                      $(this).addClass('have-menu-open');
                   }, 
            
                   function () {
                      $(this).removeClass('have-menu-open');
                   }
              );
            } else {
                  $('nav ul li.have-menu').click(
            
                   function () {
                      $('nav ul li.have-menu').removeClass('have-menu-open');
                      $(this).addClass('have-menu-open');
                   }
              );
             
              $('.wrap a.menu').click(function(){
                  $('nav ul li.have-menu').removeClass('have-menu-open');
                  $('nav ul').toggleClass('open');
              });
            }
    });

    $(document).ready(function(){
        var width = $(window).width();

        if ((width > 1199)) {
          $('nav ul li.have-menu').hover(
        
               function () {
                  $(this).addClass('have-menu-open');
               }, 
        
               function () {
                  $(this).removeClass('have-menu-open');
               }
          );
        } else {
          $('nav ul li.have-menu').click(
        
               function () {
                  $('nav ul li.have-menu').removeClass('have-menu-open');
                  $(this).addClass('have-menu-open');
               }
          );
         
          $('.wrap a.menu').click(function(){
              $('nav ul li.have-menu').removeClass('have-menu-open');
              $('nav ul').toggleClass('open');
          });
        }
    });
  </script>
</body>
</html>

 

 

SHARE NOW
Share

Leave a comment

Get the latest update about web development.