Jquery Navigation Menu: Jquery Multi Dropdown Responsive Menu

Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery Multi Dropdown Menu</title>
<script src="javascript.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<style>
body {
 margin: 0px;
 padding: 0px;
 background: #585858;
 font-family: 'Lato', sans-serif;
}
nav {
 width: 100%;
 margin:auto;
}
ul {
 margin: 0px;
 padding: 0px;
 list-style: none;
}
ul.dropdown {
 position: relative;
 width: 100%;
}
ul.dropdown li {
 font-weight: bold;
 float: left;
 width: 160px;
 position: relative;
 background: #333333;
}
ul.dropdown a:hover {
 color: #000;
}
ul.dropdown li a {
 display: block;
 padding: 20px 8px;
 color: #fff;
 position: relative;
 z-index: 2000;
 text-align: center;
 text-decoration: none;
 font-weight: 300;
}
ul.dropdown li a:hover, ul.dropdown li a.hover {
 background: #AEAEAE;
 position: relative;
 color: #fff;
}
ul.dropdown ul {
 display: none;
 position: absolute;
 top: 0;
 left: 0;
 width: 180px;
 z-index: 1000;
}
ul.dropdown ul li {
 font-weight: normal;
 background: #f6f6f6;
 color: #000;
 border-bottom: 1px solid #ccc;
}
ul.dropdown ul li a {
 display: block;
 color: #34495e !important;
 background: #eee !important;
}
ul.dropdown ul li a:hover {
 display: block;
 background: #AEAEAE !important;
 color: #fff !important;
}
.drop > a {
 position: relative;
}
.drop > a:after {
 content:"";
 position: absolute;
 right: 10px;
 top: 40%;
 border-left: 5px solid transparent;
 border-top: 5px solid #333;
 border-right: 5px solid transparent;
 z-index: 999;
}
.drop > a:hover:after {
 content:"";
 border-left: 5px solid transparent;
 border-top: 5px solid #fff;
 border-right: 5px solid transparent;
}
</style>
<script type="text/javascript">

var maxHeight = 400;

$(function(){

$(".dropdown > li").hover(function() {
    
         var $container = $(this),
             $list = $container.find("ul"),
             $anchor = $container.find("a"),
             height = $list.height() * 1.1,       // make sure there is enough room at the bottom
             multiplier = height / maxHeight;     // needs to move faster if list is taller
        
        // need to save height here so it can revert on mouseout            
        $container.data("origHeight", $container.height());
        
        // so it can retain it's rollover color all the while the dropdown is open
        $anchor.addClass("hover");
        
        // make sure dropdown appears directly below parent list item    
        $list
            .show()
            .css({
                paddingTop: $container.data("origHeight")
            });
        
        // don't do any animation if list shorter than max
        if (multiplier > 1) {
            $container
                .css({
                    height: maxHeight,
                    overflow: "hidden"
                })
                .mousemove(function(e) {
                    var offset = $container.offset();
                    var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                    if (relativeY > $container.data("origHeight")) {
                        $list.css("top", -relativeY + $container.data("origHeight"));
                    };
                });
        }
        
    }, function() {
    
        var $el = $(this);
        
        // put things back to normal
        $el
            .height($(this).data("origHeight"))
            .find("ul")
            .css({ top: 0 })
            .hide()
            .end()
            .find("a")
            .removeClass("hover");
    
    });  
    
});
</script>
</head>
<body>
<nav>
  <ul class="dropdown">
    <li class="drop"><a href="#">Products</a>
      <ul class="sub_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 6</a></li>
        <li><a href="#">Menu 7</a></li>
        <li><a href="#">Menu 8</a></li>
        <li><a href="#">Menu 9</a></li>
        <li><a href="#">Menu 10</a></li>
        <li><a href="#">Menu 11</a></li>
        <li><a href="#">Menu 12</a></li>
        <li><a href="#">Menu 13</a></li>
        <li><a href="#">Menu 14</a></li>
        <li><a href="#">Menu 15</a></li>
        <li><a href="#">Menu 16 </a></li>
        <li><a href="#">Menu 17</a></li>
        <li><a href="#">Menu 18 </a></li>
        <li><a href="#">Menu 19</a></li>
        <li><a href="#">Menu 20</a></li>
      </ul>
    </li>
    <li><a href="#">New Website</a></li>
    <li><a href="#">Old Website</a></li>
    <li class="drop"><a href="#">Latest</a>
      <ul class="sub_menu">
        <li><a href="#">Our Offices</a></li>
        <li><a href="#">Londan</a></li>
        <li><a href="#">Paris</a></li>
        <li><a href="#">Newyork</a></li>
        <li><a href="#">Swedan </a></li>
        <li><a href="#">USA</a></li>
        <li><a href="#">UAE</a></li>
        <li><a href="#">S.A</a></li>
        <li><a href="#">Austrila</a></li>
      </ul>
    </li>
    <li><a href="#">Call Now</a></li>
    <li class="drop"><a href="#">Clients</a>
      <ul class="sub_menu">
        <li><a href="#">Ewqo</a></li>
        <li><a href="#">Yuroko</a></li>
        <li><a href="#">Semreco</a></li>
        <li><a href="#">Rigero</a></li>
        <li><a href="#">Kreyr </a></li>
      </ul>
    </li>
    <li><a href="#">Contacts</a></li>
    <li><a href="#">Links</a></li>
  </ul>
</nav>
</body>
</html>

Create javascript.js

Wednesday, 15 July 2015

Jquery Multi Dropdown Responsive Menu

Create index.html

Create javascript.js

No comments:

Post a Comment