下面跟大家分享一下具體的實現過程。
HTML標籤結構:
/*寬高是背景圖片的*/
width: 111px;
/*設定文字垂直水平居中*/
line-height: 50px;
font-weight: bold;
font-size: 18px;
list-style-type:none;
}
初始看到的a的樣式:
程式碼如下:
display: block;
/*我們不用純黑色*/
color: #292724;
text-decoration:none;
}
hover後看到的span的樣式:
display: block;
height : 50px;
width: 111px;
text-align: center;
position: absolute;
color:#FFE2BB ;
}
用sprite技術定位,a和span各種狀態的樣式:
複製程式碼
background-position: 0 0;}}
/*hover黃色高亮背景*/
.animation_menu li.current a span {
css的工作到此就結束了,下面我們來看看javascript。
最後是JavaScript
選單的漸變效果主要是透過控制opacity實現的,請看下面程式碼。
function () {
// 當滑鼠移走的時候,可讓滑鼠移走的時候,動態改變了,這樣s原來的a的樣式了。 🎜>);
//綁定click事件,點選目前連接,為li新增current class,同時移除其他li的current class
$(".animation_menu li a").click(function () {
$(".animation_menu li a").each(function (index, item) {
$(item).parent().removeClass("current");
).parent().addClass("current");
});
到此全部結束,希望這個jQuery導航選單能給你一些靈感。