CSS jquery圓角帶陰影的導航菜單代碼分享

發布時間：2020-08-11 08:52:30 來源：ITPUB博客閱讀：149 作者：shanshuiboy 欄目：移動開發

CSS jquery制作實現的導航菜單效果，用戶交互做的不錯，當鼠標放在菜單上時，菜單背景懸停豪華，仔細看，本款菜單的文字還有陰影效果，菜單項的修飾同樣有陰影效果，這種陰影讓本款菜單的立體感有著很不錯的視覺效果。本款菜單適合做網站的一級導航，并沒有設計二級子菜單，企業站、公司站比較適合使用。

點擊(此處)折疊或打開

<html>
<head>
<title>導航條效果- www.codesc.net </title>
<style>
.navigation{
position:relative;
margin:0 auto;
width:915px;
}
ul.menu{
list-style:none;
font-family:"微軟雅黑";
border-top:1px solid #bebebe;
margin:0px;
padding:0px;
float:left;
}
ul.menu li{
float:left;
}
ul.menu li a{
text-decoration:none;
background:#2d83db url(http://www.codesc.net/jscode/demoimg/201602/bgMenu.png) repeat-x top left;
padding:15px 0px;
width:128px;
color:#333333;
float:left;
text-shadow: 0 1px 1px #fff;
text-align:center;
border-right:1px solid #a1a1a1;
border-left:1px solid #e8e8e8;
font-weight:bold;
font-size:15px;
-moz-box-shadow: 0 1px 3px #555;
-webkit-box-shadow: 0 1px 3px #555;
}
ul.menu li a.hover{
background-image:none;
color:#fff;
text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
-moz-border-radius:0px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
border-left:none;
}
ul.menu li a.last{
-moz-border-radius:0px 0px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
width:64px;
height:64px;
background-repeat:no-repeat;
background-color:transparent;
position:absolute;
z-index:-1;
top:80px;
cursor:pointer;
}
</style>
</head>
<style>
body { margin:0px; padding:0px; background-color:#f0f0f0;}
</style>
<body>
<div class="navigation">
<ul class="menu" id="menu">
<li><span class="ipod"></span><a href="" class="first">網站源碼</a></li>
<li><span class="video_camera"></span><a href="">CSS特效</a></li>
<li><span class="television"></span><a href="">菜單模板</a></li>
<li><span class="monitor"></span><a href="">圓角菜單</a></li>
<li><span class="toolbox"></span><a href="">菜單代碼</a></li>
<li><span class="telephone"></span><a href="">手機菜單</a></li>
<li><span class="print"></span><a href="" class="last">菜單動畫</a></li>
</ul>
</div>
<script type="text/javascript" src="http://www.codesc.net/ajaxjs/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
var d=1000;
$('#menu span').each(function(){
$(this).stop().animate({
'top':'-17px'
},d+=250);
});
$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).addClass('hover');
$('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
},
function () {
var $this = $(this);
$('a',$this).removeClass('hover');
$('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
}
);
});
</script>
</body>
</html>

引用自原文：http://www.codesc.net/jscss/3332.shtml

向AI問一下細節

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

CSS jquery圓角帶陰影的導航菜單代碼分享

猜你喜歡

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

CSS jquery圓角帶陰影的導航菜單代碼分享

猜你喜歡

最新資訊

相關推薦

相關標簽