jQuery滑動導航選單

weixin_34391854發表於2014-09-23
jQuery
<!DOCTYPE HTML>   
<html>   
<head>   
<meta charset="UTF-8" />   
<meta name="author" content="abangsir" />   
<title>jQuery彈性滑動導航選單</title>   
<style type="text/css">   
body{ font-family:"Microsoft YaHei";}   
.lavalamp{ width:700px; float:right; position: relative;}  
.lavalamp ul{ height: 35px; width: 100%; margin:17px 20px 0 0; position: absolute; z-index: 9999; overflow: hidden;}  
.lavalamp ul li{ cursor: pointer; height: 35px; line-height:35px; font-size:20px; background: none; font-weight:bold; float:left; text-align: center;}  
.lavalamp ul li a{ text-decoration: none; padding: 0 13px; text-align: center; display: block; background: none;}  
.floatr {  
    position: absolute;  
    top: 15px;  
    width: 107px;  
    height: 40px;  
    border-radius : 8px;  
    -moz-border-radius : 8px;  
    -webkit-border-radius : 8px;  
    background : rgba(0,0,0,.20);  
    -webkit-transition: all .4s ease-in-out;  
    -moz-transition: all .4s ease-in-out;  
  
}  
</style> 

<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
<script type="text/javascript">
$(document).ready(function () {  
  
    var active_width = $(".active").innerWidth();  
    var active_left = $(".active").position().left;  
    $(".floatr").css(  
        {  
            width:active_width,  
            left:active_left  
        }  
    );  
  
    $(".lavalamp ul>li").hover(  
        function(){  
            var width = $(this).innerWidth();  
            var left = $(this).position().left;  
  
            $(".floatr").stop().animate(  
                {  
                    width: width,  
                    left: left  
                },  
                300  
            );  
  
        },  
        function(){  
  
            $(".floatr").stop().animate(  
                {  
                    width: active_width,  
                    left: active_left  
                }  
            );  
  
        }  
    );  
  
});  

</script> 

</head> 

<body>
<div class="lavalamp">  
     <ul>  
          <li class="active"><a href="#">新品上市</a></li>  
          <li><a href="#">暢銷精品</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="floatr"></div>  
</div>  

</body>
</html>

相關文章