前几天,要实现一个导航栏插件,其实就是几行代码的事。作为程序员,都有一个特色,就是懒,有时候也觉得别人实现的效果可能好一些。知道网上有很多jquery插件,所以baidu了一番,找了个效果还不错的jquery.megamenu,相信有很多朋友用过了。贴个图看看哈:
使用起来也很简单的,引入了脚本和样式后,加上这个就ok了:
<script type="text/javascript">
jQuery(function() {
jQuery(".megamenu").megamenu();
});
</script>
用着觉得效果不是很好,但是还是凑合。本来就没多大兴趣,打算就这样了,最多也就是改改样式吧。简单地改了下,就交给了用户。可是,这回又遇到了万恶的IE6,用户都是用的IE6内核的浏览器,样式不兼容。本来那插件的样式就写得很乱,改来改去真是麻烦。看来都是懒惰惹的祸。
一番悲剧之后,决定自己写一个,但处于不想多写代码的缘故,把以前文件里面的代码和样式全部删了,重新开始写,其实一下就写好了,以后还是自己多动脑,懂手吧,下面是效果和代码:
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>