CSS jquery圓角帶陰影的導航選單程式碼分享
- 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=""></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>
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/357485/viewspace-2155674/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- CSS 可伸縮圓角導航選單CSS
- css3實現的可伸縮圓角導航選單CSSS3
- CSS導航條選單:帶小三角形CSS
- jQuery css3環形導航選單jQueryCSSS3
- css簡單水平導航選單程式碼例項CSS
- css樹形導航選單程式碼例項CSS
- CSS實現帶陰影的三角形CSS
- 導航選單(動畫)--- jQuery動畫jQuery
- CSS3 扇形導航選單程式碼例項CSSS3
- (轉)分享20個漂亮強大的jQuery導航選單jQuery
- CSS垂直導航選單CSS
- jQuery滑動導航選單jQuery
- CSS實現的側欄三級導航選單程式碼CSS
- 用CSS畫一個帶陰影的三角形CSS
- CSS3立體導航選單程式碼例項CSSS3
- CSS製作橫向導航選單例項程式碼CSS單例
- 35個優秀的jQuery和CSS3導航選單jQueryCSSS3
- 直播系統程式碼,給標題欄新增陰影效果和圓角效果
- 10款最新CSS3 /jQuery選單導航外掛CSSS3jQuery
- CSS 動態導航選單CSS
- 使用 jQuery 和 CSS3 製作滑動導航選單jQueryCSSS3
- iOS 檢視控制元件設定圓角、陰影iOS控制元件
- 純CSS實現的二級導航選單效果程式碼例項CSS
- CSS導航欄及下拉選單CSS
- CSS多級導航選單效果CSS
- CSS垂直三級導航選單CSS
- 帶箭頭陰影的提示框,CSS程式碼,IE不相容CSS
- css邊框陰影程式碼例項CSS
- jQuery三級導航選單詳解jQuery
- jQuery底部跟隨水平導航選單jQuery
- css3實現的立體導航選單效果程式碼例項CSSS3
- css帶有圓角尾巴箭頭CSS
- jQuery背景滑動跟隨的導航選單jQuery
- 蜂巢式導航選單程式碼例項
- 純CSS打造淘寶導航選單欄CSS
- 純css製作導航下拉選單CSS
- CSS 平行四邊形導航選單CSS
- jQuery手風琴導航選單詳解jQuery