天天看点

Jquery导航栏插件

前几天,要实现一个导航栏插件,其实就是几行代码的事。作为程序员,都有一个特色,就是懒,有时候也觉得别人实现的效果可能好一些。知道网上有很多jquery插件,所以baidu了一番,找了个效果还不错的jquery.megamenu,相信有很多朋友用过了。贴个图看看哈:

Jquery导航栏插件

         使用起来也很简单的,引入了脚本和样式后,加上这个就ok了:

<script type="text/javascript">

   jQuery(function() {

      jQuery(".megamenu").megamenu();

   });

</script>

         用着觉得效果不是很好,但是还是凑合。本来就没多大兴趣,打算就这样了,最多也就是改改样式吧。简单地改了下,就交给了用户。可是,这回又遇到了万恶的IE6,用户都是用的IE6内核的浏览器,样式不兼容。本来那插件的样式就写得很乱,改来改去真是麻烦。看来都是懒惰惹的祸。

         一番悲剧之后,决定自己写一个,但处于不想多写代码的缘故,把以前文件里面的代码和样式全部删了,重新开始写,其实一下就写好了,以后还是自己多动脑,懂手吧,下面是效果和代码:

Jquery导航栏插件

Js代码(jquery.megamenu.js):

$(function() {

    $(".megamenu li").hover(

    function() {

        $(".mega-content").fadeOut();

        var offset = $(".title-link").eq($(".megamenu li").index(this)).offset();

        var mega = $(".mega-content").eq($(".megamenu li").index(this));

        mega.css("top", offset.top + 25).css("left", offset.left - 15).width($(this).width());

        if(mega.html()!="")

        mega.fadeIn();

    },

    function() { $(".mega-content").fadeOut(); }

    );

    $(".mega-title").hover(

    function() {

        $(".mega-title").css("background-color", "#e8e7e7");

        $(this).css("background-color", "#d4d4d4");

    },

    function() { $(".mega-title").css("background-color", "#e8e7e7"); }

    );

})

样式代码(jquery.megamenu.css):

.megamenu

{

}

.megamenu li

{

list-style:none;

float:left;

   min-width:60px;

   overflow:auto;

   height:35px;

   font-size:14px;

   font-family:Verdana,"宋体",Helvetica,sans-serif;

   line-height:35px;

   text-align:center;

   padding-left:10px;

   padding-right:10px;

}

.megamenu li a

{

}

.mega-content

{

   position:absolute;

   z-index:10;

   display:none;

   background-color:#e8e7e7;

   min-width:150px;

}

.mega-title

{

   font-size:12px;

   min-width:150px;

   _width:150px;

   line-height:25px;

   text-indent:20;

   text-align:left;

   border-bottom:solid 1px #fff;

   word-spacing:0;

   cursor:pointer;

}

.mega-title a

{

   margin-left:15px;

}

页面代码示例

<div class="head-menu">

 <ul class="megamenu">

<li>

<a class="title-link" href="javascript:void(0)">About Us</a>

<div class="mega-content">

<div  class="mega-title">

<a href="ReadChapter.aspx?Location=en_US&id=NgA=">About Tuhan</a>

</div>

<div  class="mega-title">

<a href="ReadChapter.aspx?Location=en_US&id=NwA=">Contact US</a>

</div>

<div  class="mega-title">

<a href="ReadChapter.aspx?Location=en_US&id=OAA=">The Quality of TUHAN</a>

</div>

</div>

</li>

</ul>

</div>

继续阅读