两个导航菜单练习
刚进公司不久,新人的任务也不是很多.今天用空闲的时间写了两个不同样式的导航菜单,一个竖的,一个横的,话不多说直接给出代码,如果css或jquery有用的不到位之处,请看贴的园友们指出,共同进步.
竖向导航菜单:
CSS如下navigation.css
#navigation {
width:200px;
}
#navigation ul {
list-style:none;
margin:0;
padding:0;
}
#navigation li {
border-bottom:1px solid #ed9f9f;
}
#navigation li a:link, #navigation li a:visited {
font-size:90%;
display:block;
padding:0.4em 0 0.4em 0.5em;
border-left:12px solid #711515;
border-right:1px solid #711515;
background-color:#b51032;
color:#ffffff;
text-decoration:none;
}
#navigation li a:hover {
background-color:#711515;
color:#ffffff;
}
#navigation ul ul {
margin-left:12px;
}
#navigation ul ul li {
border-bottom:1px solid #711515;
margin:0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color:#ed9f9f;
color:#711515;
}
#navigation ul ul a:hover {
background-color:#711515;
color:#fff;
}
HTML如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/navigation.css" />
<script type="text/javascript" src="js/jquery-1.4.1.min.js" ></script>
<script type="text/javascript">
$(function() {
var $submenus = $('.submenu');
$submenus.hide();
$submenus.prev().click(function() {
$submenus.slideUp('fast');
$mymenu = $(this).next();
if($mymenu.is(':hidden')) {
$mymenu.slideDown('fast');
} else {
$mymenu.slideUp('fast');
}
});
});
</script>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a>
<ul class="submenu">
<li><a href="#">Starters</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul class="submenu">
<li><a href="#">Andrew</a></li>
<li><a href="#">Bruce</a></li>
<li><a href="#">Simpzon</a></li>
</ul>
</li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>
效果还算可以,这个例子的样式来自sitepoint,css精粹(第三版)中的一个例子,我再此基础上加了些jquery用于子菜单的下拉收起效果
//-------------------------------------------------------------------
横向导航菜单
CSS如下horizontalNav.css
body {
padding:1em;
font-family:"Times New Roman", Times, serif;
}
#navigation {
font-size:90%;
}
#navigation ul {
list-style:none;
margin:0;
padding:0;
padding-top:1em;
}
#navigation li {
float:left;
}
#navigation .submenu {
border-top:1px solid #ffffff;
padding-top:0;
}
#navigation .submenu li {
float:none;
border-bottom:1px solid #fff;
border-right:0px;
}
#navigation a {
display:block;
padding:0.4em 1em 0.4em 1em;
font-weight:bold;
text-decoration:none;
color:#ffffff;
width:7em;
border-right:2px solid #dafce0;
}
#navigation .submenu a {
border-left:10px solid #d3de4e;;
width:6em;
}
#navigation a:link, #navigation a:visited {
background-color:#388d29;;
}
#navigation a:hover {
color:#388d29;
background-color:#c0e296;
text-decoration:underline;
}
HTML如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/horizontalNav.css" />
<script type="text/javascript" src="js/jquery-1.4.1.min.js" ></script>
<script type="text/javascript">
$(function() {
$('.submenu').hide();
$('.submenu').prev().mouseenter(function() {
var $submenu = $(this).next();
$submenu.slideDown('normal').mouseleave(function(){
$(this).slideUp('normal');
});
});
});
</script>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a>
<ul class='submenu'>
<li><a href="#">China Style</a></li>
<li><a href="#">US Style</a></li>
<li><a href="#">Japan Style</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a>
<ul class='submenu'>
<li><a href="#">Amazon</a></li>
<li><a href="#">SitePoint</a></li>
<li><a href="#">Apress</a></li>
<li><a href="#">O'relly</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
这里有个问题,关于导航菜单子菜单的展开和收缩,鼠标移到顶级菜单,展开其子菜单,如果鼠标再进入子菜单然后离开的话,子菜单能正常的收缩.但是如果只是划过顶级菜单,其子菜单展开后就不缩回了,我想了半天,没想出个好点的解决方案,所以如果有朋友知道怎么做,不妨回复教我一下,也让大家学习学习.
