本文目录
求一个导航菜单，js效果和Q友乐园一样的
下面这一做就是Q友乐园的源代码，我整合了一下，你看看吧。
还有，别忘记引入外部的jquery文件，否则不好用。
《html》
《style》html,body,div,p,ul,ol,li,dl,dt,dd,h1,h3,h3,h4,h5,h6,form,input,select,button,textarea,iframe,table,th,td{margin:0;padding:0;}
ul,ol{list-style:none outside;}
img{border:0 none;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}
body{font:12px/1.5 Tahoma, Helvetica, Arial, “\5b8b\4f53“, sans-serif;}
.nav{height:40px; background-color:#000000;}
.nav li{float:left;display:inline;padding:8px 0 4px 5px;ba《/title》
《script type=“text/javascript“ src=“jquery-1.4.2.min.js“》《/script》
《!-------------------------记得引入jquery.js文件，否则不好用哦------------------ --》
《/head》
《body》
《ul class=“nav“》
《li》《a href=“Gexing/Qian/“ target=“_blank“》QQ个性签名《/a》
《ul》
《li》《a href=“Gexing/Qian/01/“ target=“_blank“》伤感爱情《/a》《/li》
《li》《a href=“Gexing/Qian/03/“ target=“_blank“》搞笑可爱《/a》《/li》
《li》《a href=“Gexing/Qian/02/“ target=“_blank“》幸福情侣《/a》《/li》
《li》《a href=“hot/gxqm/list_1.html“ target=“_blank“》好评排行《/a》《/li》
《/ul》
《/li》
《li》《a href=“qqfenzu/“ target=“_blank“》QQ分组《/a》
《ul》
《li》《a href=“qqfenzu/shanggan/“ target=“_blank“》伤感分组《/a》《/li》
《li》《a href=“qqfenzu/qinglv/“ target=“_blank“》情侣分组《/a》《/li》
《li》《a href=“qqfenzu/weimei/“ target=“_blank“》唯美分组《/a》《/li》
《li》《a href=“qqfenzu/gaoxiao/“ target=“_blank“》可爱分组《/a》《/li》
《/ul》
《/li》
《/ul》
《script type=“text/javascript“ src=“jquery-1.4.2.min.js“》《/script》
《script type=“text/javascript“》
$.fn.droppy = function(options) {
options = $.extend({speed: 100}, options || {});
this.each(function() {
var root = this, zIndex = 1000;
function getSubnav(ele) {
if (ele.nodeName.toLowerCase() == ’li’) {
var subnav = $(’》 ul’, ele);
return subnav.length ? subnav : null;
} else {
return ele;
}
}
function getActuator(ele) {
if (ele.nodeName.toLowerCase() == ’ul’) {
return $(ele).parents(’li’);
} else {
return ele;
}
}
function hide() {
var subnav = getSubnav(this);
if (!subnav) return;
$.data(subnav, ’cancelHide’, false);
setTimeout(function() {
if (!$.data(subnav, ’cancelHide’)) {
$(subnav).slideUp(options.speed);
}
}, 10);
}
function show() {
var subnav = getSubnav(this);
if (!subnav) return;
$.data(subnav, ’cancelHide’, true);
$(subnav).css({zIndex: zIndex++}).slideDown(options.speed);
if (this.nodeName.toLowerCase() == ’ul’) {
var li = getActuator(this);
$(li).addClass(’on’);
$(’》 a’, li).addClass(’on’);
}
}
$(’ul, li’, this).hover(show, hide);
$(’li’, this).hover(
function() { $(this).addClass(’on’); $(’》 a’, this).addClass(’on’); },
function() { $(this).removeClass(’on’); $(’》 a’, this).removeClass(’on’); }
);
});
};
$(function() {
$(’.nav’).droppy();
});
《/script》
《/body》
《/html》
想找到这张图图的网址链接，做空间用，除了Q友乐园的网址
如果你是做来看主页素材的话 我建议你先把这张图片存入空间相册-点击右键属性-复制地址那一栏-在装扮空间 如果您的相册这张图片不删除 人家进你空间主页就可以看见这张图片
