随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

最新评论

1. Re:留言列表模板HTML代码
1
--让星星跟你道晚安
2. Re:程序员用HTML5制作的爱心树表白动画
@一梦逍遥3 换一个Html...
--剑起苍穹
3. Re:程序员用HTML5制作的爱心树表白动画
@剑起苍穹我也是这样，不知道怎么解决...
--一梦逍遥3
4. Re:Web前端资源汇总
推荐：2021年百度大牛亲授最详细、最全面的前端视频教程：
--码农农农
5. Re:Web前端资源汇总
《JavaScript设计模式》作者张容铭讲解2021年史上最全前端教程免费分享，需要的私聊
--CLH_zza

这个jQuery导航菜单怎么样

效果体验：
http://keleyi.com/keleyi/phtml/jqtexiao/39.htm

HTML文件代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery鼠标悬停上下滑动导航条 - 柯乐义</title><base target="_blank" />
<link href="http://keleyi.com/keleyi/phtml/jqtexiao/39/hovertreedaohang.css" rel="stylesheet" type="text/css" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
$("#hovertreecaidan li a").wrapInner( '<span class="out"></span>' );
$("#hovertreecaidan li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});
$("#hovertreecaidan li a").hover(function() {
$(".out",    this).stop().animate({'top':    '48px'},    300); // move down - hide
$(".over",    this).stop().animate({'top':    '0px'},     300); // move down - show
}, function() {
$(".out",    this).stop().animate({'top':    '0px'},     300); // move up - show
$(".over",    this).stop().animate({'top':    '-48px'},    300); // move up - hide
});
});
</script>
</head>
<body>
<div id="hovertreecaidan" class="hovertreedaohang">
<ul>
<li><a href="http://keleyi.com">首 页</a></li>
<li><a href="http://keleyi.com/menu/jquery/">jQuery</a></li>
<li><a href="http://keleyi.com/menu/webqd/">Web前端</a></li>
<li><a href="http://keleyi.com/menu/javascript/">Javascript</a></li>
<li><a href="http://keleyi.com/menu/html5/">HTML5</a></li>
<li><a href="http://hovertree.com/">HoverTree</a></li>
<li><a href="http://hovertree.com/texiao/">网页特效</a></li>
<li><a href="http://tool.keleyi.com/">工具</a></li>
<li><a href="http://hovertree.com/guestbook/">留言</a></li>
</ul>
<div class="hvtclear"></div>
</div> 
</body>
</html>