標題:
用 jQuery 做選單 – 水平雙層子選單
[打印本頁]
作者:
郭小士
時間:
2015-12-23 20:23
標題:
用 jQuery 做選單 – 水平雙層子選單
html
<body>
<ul id="menu">
<li><a href="#">jQuery</a>
<ul>
<li><a href="#">應用範例</a></li>
<li><a href="#">使用技巧</a></li>
<li><a href="#">相關資源</a></li>
</ul>
</li>
<li>
<a href="#">CSS</a>
<ul>
<li><a href="#">CSS Hack</a></li>
<li><a href="#">免費圖示</a></li>
</ul>
</li>
<li><a href="#">其它網站</a>
<ul>
<li><a href="#">壹慎設計</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Yahoo!奇摩</a></li>
<li><a href="#">樂天商城</a></li>
</ul>
</li>
<li><a href="#">新年快樂</a></li>
</ul>
</body>
js
$(function(){
// 幫 #menu li 加上 hover 事件
$('#menu li').hover(function(){
// 先找到 li 中的子選單
var _this = $(this),
_subnav = _this.children('ul');
// 變更目前母選項的背景顏色
// 同時淡入子選單(如果有的話)
_this.css('backgroundColor', '#06c');
_subnav.stop(true, true).fadeIn(400);
} , function(){
// 變更目前母選項的背景顏色
// 同時淡出子選單(如果有的話)
// 也可以把整句拆成上面的寫法
$(this).css('backgroundColor', '').children('ul').stop(true, true).fadeOut(400);
});
// 取消超連結的虛線框
$('a').focus(function(){
this.blur();
});
});
css
#menu {
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 500px;
float: left;
background: #000;
}
#menu li {
margin: 0;
padding: 0;
float: left;
border-right: 1px solid #999;
}
#menu li a {
padding: 10px 15px;
display: block;
color: #fff;
text-decoration: none;
}
#menu li ul {
margin: 0;
padding: 15px 0;
list-style: none;
float: left;
position: absolute;
left: 0;
width: 500px;
color: #fff;
background: #06c url('bottom.gif') no-repeat bottom;
display: none;
}
#menu li ul li { border-right: 1px solid #fff; }
#menu li ul li a { display: inline; }
#menu li ul li a:hover { text-decoration: underline; }
此範例來自南丁格爾轉貼
壹慎設計工作室
歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/)