万户资源科技
万汇资源微信公众号

微信扫码有惊喜!

jQuery左侧动画导航

lwting 2015-12-22 技术

      jQuery里mouseover标签做出左侧动画导航

<title>jQuery左侧动画导航</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
    var Height = 40;                           //li的高度
    var pTop = 50;                             // .menu 的paddding-top的值
    $('.menu li').mouseover(function(){
        $(this).addClass('on').siblings().removeClass('on');
        var index = $(this).index();
        var distance = index*(Height+1)+pTop+'px';        //如果li有个border-bottom为1px高度的话,这里需要加1
        $('.menu .hover').stop().animate({top:distance},150);   //默认动画时间为150毫秒,可根据需要修改
    });
});
</script>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ font-size:12px; text-align:left; background:#F8F8F8;}
.menu{ width:220px; height:auto; margin:50px auto; background:#fff; position:relative; padding:50px 0; border-radius:5px;}
.menu li{ z-index:2; position:relative;}
.menu li a{ color:#666;height:40px; line-height:40px; border-bottom:1px solid #F8F8F8; display:block; margin:0px 15px; text-align:center; text-decoration:none;}
.menu li:hover a{ color:#FF5F3E; text-decoration:none;}
.menu li.on a{color:#FF5F3E;}
.menu .hover{ width:220px; height:40px; position:absolute; left:-5px; top:50px; background:#F8F8F8; border-left:5px solid #FF5F3E; z-index:1;}
</style>
</head>
<body>
<div class="menu">
    <ul>
        <li class="on"><a href='#'>首页</a></li>
        <li><a href='#'>菜单导航</a></li>
        <li><a href='#'>时间日期</a></li>
        <li><a href='#'>焦点图</a></li>
        <li><a href='#'>tab标签</a></li>
        <li><a href='#'>jquery特效</a></li>
        <li><a href='#'>在线客服</a></li>
        <li><a href='#'>广告代码</a></li>
        <li><a href='#'>相册代码</a></li>
        <li><a href='#'>图片特效</a></li>
    </ul>
    <div class="hover"></div>
</div>

</body>

2015-12-22_184754.jpg

文章关键词
jQuery
左侧导航
动画导航
qq qq tel
服务热线:

134-1954-9128