The method of realizing infinite hierarchical navigation menu with jquery _jquery

This article illustrates the method of implementing the infinite hierarchical horizontal navigation menu in jquery. Share to everyone for your reference. The implementation methods are as follows:

1. The jquery plugin version code is as follows:

Copy Code code as follows:

(function ($) {
$.fn.extend ({
Droplinemenu:function (configs) {
var configs = $.extend ({
OVER:200,
OUT:100,
Rightdown: ' Css/down.gif '
},configs| | {});
This.find (">ul"). AddClass ("Dropmenu");
This.find ("UL Li:has (UL)"). AddClass (' HasMenu '). Find (">a"). Append ("var currentobj;
return $ (' Li.hasmenu '). Hover (function () {
if ($.browser.msie) {//clear Overflow:hidden generated under IE
$ (this). Parent ("UL"). css ({' Overflow ': ' Visible '});
}
$ (this). Find (">ul"). Stop (True, true). CSS (' Top ', $ (this). Height ()). Slidedown (Configs.over);
},function () {
$ (this). Find (">ul"). Stop (True, true). Slideup (Configs.out);
});
}
});
}) (JQuery);

2. Style Code

Copy Code code as follows:

* {margin:0;padding:0}
. droplinebar{
Position:absolute;
z-index:20;
width:700px;
}
. Droplinebar Ul.dropmenu {
position:relative;
}
. Droplinebar ul{
width:100%;
Float:left;
Font:bold 13px Arial;
Background: #242c54 URL (bluedefault.gif) center Center repeat-x; /*default Background of menu bar*/
}
. Droplinebar ul li{
Float:left;
}
. Droplinebar ul ul {
width:700px;
Display:none;
z-index:100;
Position:absolute;
left:0;
Background: #303c76;
Zoom:1;
}
. Droplinebar ul Li a{
Float:left;
Color:white;
PADDING:9PX 11px;
Text-decoration:none;
Display:block;
}
. Droplinebar UL Li.hasmenu a img {border:none;margin-left:5px;}
Droplinebar ul Li A:hover,. Droplinebar ul Li. current{/*background of main Menu bar links onmouseover*/
Color:white;
Background:transparent URL (blueactive.gif) center Center repeat-x;
}
/* Sub level menu Links style */
. Droplinebar ul Li ul Li a{
Font:normal 13px Verdana;
padding:6px;
padding-right:8px;
margin:0;
BORDER-BOTTOM:1PX Solid Navy;
}
. Droplinebar ul Li ul li a:hover{/*sub menu links ' background color OnMouseover *
Background: #242c54;
}

3. The HTML code is as follows

Copy Code code as follows:

<link rel= "stylesheet" type= "Text/css" href= "Css/droplinebar.css"/>
<script type= "Text/javascript" src= "Js/jquery.min.js" ></script>
<script src= "Js/droplinemenu.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#mydroplinemenu"). Droplinemenu ();
});
</script>
<div id= "Mydroplinemenu" class= "Droplinebar" >
<ul>
<li><a href= "http://www.dynamicdrive.com/" >Home</a></li>
<li><a href= "http://www.dynamicdrive.com/style/" >css examples</a>
<ul>
<li><a href= "#" >activities 1</a></li>
<li><a href= "#" >activities 2</a></li>
<li><a href= "#" >activities 3</a>
<ul>
<li><a href= "#" >water Sports 1</a></li>
<li><a href= "#" >water Sports 1</a></li>
<li><a href= "#" >water Sports 1</a></li>
<li><a href= "#" >water Sports 1</a></li>
</ul>
</li>
<li><a href= "#" >activities 4</a></li>
</ul>
</li>
<li><a href= "http://tools.dynamicdrive.com" >Tools</a></li>
<li><a href= "http://www.javascriptkit.com/" >JavaScript</a>
<ul>
<li><a href= "#" >traveling 1</a></li>
<li><a href= "#" >traveling 2</a></li>
<li><a href= "#" >traveling 3</a></li>
<li><a href= "#" >traveling 4</a>
<ul>
<li><a href= "#" >africa 1</a></li>
<li><a href= "#" >africa 2</a></li>
<li><a href= "#" >africa 3</a></li>
<li><a href= "#" >africa 4</a>
<ul>
<li><a href= "#" >kenya 1</a></li>
<li><a href= "#" >kenya 2</a></li>
<li><a href= "#" >kenya 3</a></li>
<li><a href= "#" >kenya 4</a></li>
<li><a href= "#" >kenya 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href= "#" >traveling 5</a></li>
</ul>
</li>
<li><a href= "http://www.cssdrive.com" >Gallery</a></li>
</ul>
</div>

4. No plug-in version code:

Copy Code code as follows:

$ (document). Ready (function () {
var configs_over = 200,configs_out = 100;
$ ("#mydroplinemenu"). Find (">ul"). AddClass ("Dropmenu"). Find ("Li:has (UL)"). AddClass (' HasMenu '). Find (">a"). Append ("$ ('. Dropmenu li.hasmenu '). Hover (function () {
if ($.browser.msie) {//clear Overflow:hidden generated under IE
$ (this). Parent ("UL"). css ({' Overflow ': ' Visible '});
}
$ (this). Find (">ul"). Stop (True, true). CSS (' Top ', $ (this). Height ()). Slidedown (Configs_over);
},function () {
$ (this). Find (">ul"). Stop (True, true). Slideup (Configs_out);
});
});

I hope this article will help you with your jquery programming.