動手練習——展開式nav

時間 2019-11-18

標籤動手練習展開式 nav 简体版

原文原文鏈接

效果：javascript

兼容：IE6+、chrome、firefox、safari等。css

源代碼：（直接複製便可運行）html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>導航</title>
<style type="text/css">
/* reset */

body {
	margin: 0;
	padding: 0 0 12px 0;
	font-size: 12px;
	line-height: 22px;
}
form, ul, li, p, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}
input, select {
	font-size: 12px;
	line-height: 16px;
}
img {
	border: 0;
}
ul, li {
	list-style-type: none;
}
a {
	color: #00007F;
	text-decoration: none;
}
a:hover {
	color: #bd0a01;
	text-decoration: underline;
}
.box {
	width: 150px;
	margin:10px;
}
.menu {
	overflow: hidden;
	border-color: #C4D5DF;
	border-style: solid;
	border-width: 0 1px 1px;
}
/* lv1 */
.menu li.level1 a {
	display: block;
	height: 28px;
	line-height: 28px;
	background: #EBF3F8;
	font-weight: 700;
	color: #5893B7;
	text-indent: 14px;
	border-top: 1px solid #C4D5DF;
}
.menu li.level1 a:hover {
	text-decoration: none;
}
.menu li.level1 a.current {
	background: #B1D7EF;
}
/* lv2 */
.menu li ul {
	overflow: hidden;
}
.menu li ul.level2 {
	display: none;
}
.menu li ul.level2 li a {
	display: block;
	height: 28px;
	line-height: 28px;
	background: #ffffff;
	font-weight: 400;
	color: #42556B;
	text-indent: 18px;
	border-top: 0px solid #ffffff;
	overflow: hidden;
}
.menu li ul.level2 li a:hover {
	color: #f60;
}
</style>
</head>
<body>
<div class="box">
  <ul class="menu">
    <li class="level1"> <a href="#none">襯衫</a>
      <ul class="level2">
        <li><a href="#none">短袖襯衫</a></li>
        <li><a href="#none">長袖襯衫</a></li>
        <li><a href="#none">短袖T恤</a></li>
        <li><a href="#none">長袖T恤</a></li>
      </ul>
    </li>
    <li class="level1"> <a href="#none">衛衣</a>
      <ul class="level2">
        <li><a href="#none">開襟衛衣</a></li>
        <li><a href="#none">套頭衛衣</a></li>
        <li><a href="#none">運動衛衣</a></li>
        <li><a href="#none">童裝衛衣</a></li>
      </ul>
    </li>
    <li class="level1"> <a href="#none">褲子</a>
      <ul class="level2">
        <li><a href="#none">短褲</a></li>
        <li><a href="#none">休閒褲</a></li>
        <li><a href="#none">牛仔褲</a></li>
        <li><a href="#none">免燙卡其褲</a></li>
      </ul>
    </li>
  </ul>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
	$(".level1 > a").click(function(){
		$(this).addClass("current")   //給當前元素添加"current"樣式
		.next().toggle(function(){
			var t=$(this);
			if(!t.is(":visible")){
				t.prev().removeClass("current");    //當前元素不可見時去掉其父級元素的current樣式
			}
		})                //下一個元素顯示
		.parent().siblings().children("a").removeClass("current")        //父元素的兄弟元素的子元素<a>移除"current"樣式
		.next().hide();                //它們的下一個元素隱藏
		return false;
	});
});
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。