jquery implements the infinite hierarchical horizontal navigation menu method

This article illustrates an example of how jquery implements an infinite hierarchical horizontal navigation menu. Share with you for your reference. The specific implementation method is as follows:

1. The version code of jquery plug-in is 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("<img class='downarrowclass' src='"+configs.rightdown+"'>");

            var currentobj;

            return $('li.hasmenu').hover(function(){                 

                if ($.browser.msie) {// remove ie The generated overflow:hidden

                    $(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

* {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

<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:

$(document).ready(function(){

    var configs_over = 200,configs_out = 100;

    $("#mydroplinemenu").find(">ul").addClass("dropmenu").find("li:has(ul)").addClass('hasmenu').find(">a").append("<img class='downarrowclass' src='css/down.gif'>");

    $('.dropmenu li.hasmenu').hover(function(){              

        if ($.browser.msie) {// remove ie The generated overflow:hidden

            $(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 is helpful for you to design jQuery program.