1、调用CSS样式:
<link href="css/style.css" rel="stylesheet" type="text/css" />
2、调用JS插件代码:
<script type="text/javascript" src="js/jquery.min.js"></script>
3、添加HTML代码:
将<!--效果html开始-->......<!--效果html结束-->之间的html和js代码;放在<body></body>之间。
4、JS代码:
<script type="text/javascript">
$(document).ready(function() {
$("#menu2 li a").wrapInner( '<span class="out"></span>' );
$("#menu2 li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});
$("#menu2 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>