jquery实现无限分级横向导航菜单的方法

本文实例讲述了jquery实现无限分级横向导航菜单的方法。分享给大家供大家参考。具体实现方法如下：

1. jquery插件版本代码如下：

(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) {//清除ie下生成的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. 样式代码

* {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. HTML代码如下

<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. 无插件版本代码:

$(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) {//清除ie下生成的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程序设计有所帮助。