带有二级菜单的滑动门效果

又是 CSSplay ,这个众多网页设计师心目中的圣地,总能带给我们诸多惊喜,Stu Nicholls 那富有创意并且高超的技巧,总能让一个个在我们看来不能实现的愿望变为现实。本文介绍的是他用 CSS 技术实现的带有二级菜单的滑动门效果,相信许多人期待已久了。

带有二级菜单的滑动门效果 – 示例

 
<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.
 
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/doors_drop_line_three.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
 
/* for this demo only */
#nav {margin:20px 0 80px 0;}
 
/* the styling */
#nav {
	float:left; 
	width:650px; 
	height:auto; 
	background:#fff url("bottom_line.gif") repeat-x bottom; 
	position:relative;
}
 
#nav .select, #nav .current {
	margin:0; 
	padding:0; 
	list-style:none; 
	display:block;
}
 
#nav li {
	display:inline; 
	margin:0; 
	padding:0;
	height:auto;
}
 
#nav .select a,
#nav .current a {
	display:block; 
	height:21px; 
	float:left; 
	background: url("left_blue.gif") no-repeat left top; 
	padding:0 0 0 3px; 
	border-bottom:1px solid #000; 
	text-decoration:none; 
	font-size:10px; 
	line-height:20px; 
	white-space:nowrap; 
	margin-left:2px;
}
* html #nav .select a, * html #nav .current a {width:1px;}
 
#nav .select a b, 
#nav .current a b {
	height:100%; 
	display:block; 
	background:url("right_blue.gif") no-repeat right top; 
	padding:0 6px 0 3px; 
	color:#000;
}
 
#nav .select a:hover, 
#nav .select li:hover a {
	background-position:0 -75px; 
	border-color:#046; 
	cursor:pointer;
}
 
#nav .select a:hover b, 
#nav .select li:hover a b {
	background-position:100% -75px; 
	border-color:#046; color:#fff;
}
 
#nav .sub {display:none;}
 
/* for IE5.5 and IE6 only */
#nav table {
	position:absolute; 
	border-collapse:collapse; 
	left:0; 
	top:0; 
	font-size:11px;
}
 
#nav .current a {
	background-position:0 -75px; 
	border-color:#046;
}
#nav .current a b {
	background-position:100% -75px; 
	color:#ff6;
}
 
 
#nav .sub li a:hover, 
#nav .select a:hover .sub li a:hover, 
#nav .select li:hover .sub li a:hover {
	background:#005984 url("sub_sep.gif") top right no-repeat; 
	color:#fff; 
	text-decoration:underline;
}
 
#nav .sub_active .current_sub a, 
#nav .sub_active a:hover {
	background:#005984 url("sub_sep.gif") top right no-repeat; 
	color:#ff6; 
	text-decoration:underline;
}
 
#nav .select li a:hover .sub, 
#nav .select li:hover .sub {
	display:block; 
	position:absolute; 
	width:650px; 
	top:21px; 
	left:0; 
	background:#005984; 
	margin-top:1px; 
	padding:0; 
	z-index:100; 
	border-bottom:20px solid #fff;
}
 
#nav .sub, #nav .sub_active {
	margin:0; 
	padding:0; 
	list-style:none;
}
#nav .sub_active {
	display:block; 
	position:absolute; 
	width:650px; 
	top:21px; 
	left:0; 
	background:#005984; 
	margin-top:1px; 
	padding:0; 
	z-index:10; 
	color:#000; 
	border-bottom:20px solid #fff;
}
* html #nav .sub_active, * html #nav .select a:hover .sub {
	z-index:-1; 
	margin-top:0; 
	margin-top:1px;
}
 
#nav .sub_active a {
	height:25px; 
	float:left; 
	text-decoration:none; 
	line-height:24px; 
	white-space:nowrap; 
	font-weight:normal;
}
#nav .sub_active a, 
#nav .select a:hover .sub li a, 
#nav .select li:hover .sub li a {
	display:inline; 
	background:#005984 url("sub_sep.gif") top right no-repeat; 
	padding:0 10px; 
	margin:0; 
	font-size:10px; 
	width:auto; 
	white-space:nowrap; 
	font-weight:normal; 
	border:0; 
	color:#fff; 
	height:25px; 
	line-height:24px; 
}
</style>
 
<div id="nav">
 
 
<ul class="select"><li><a href="#"><b>January</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Fish</a></li>
<li><a href="#">Chips</a></li>
<li><a href="#">Bacon</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Tomato</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>February</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="#">Sausages</a></li>
<li><a href="#">Fried Bread</a></li>
<li><a href="#">Fillet steak</a></li>
<li><a href="#">Mushrooms</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>March</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Lager</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Red wine</a></li>
<li><a href="#">Crisps</a></li>
<li><a href="#">Brandy</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>April</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
<li><a href="#">Milk</a></li>
<li><a href="#">Squash</a></li>
<li><a href="#">Lemonade</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="current"><li><a href="#"><b>May</b>
</a></li></ul><ul class="sub_active"><li><a href="#">Crab</a></li>
<li><a href="#">Shrimps</a></li>
<li><a href="#">Lobster</a></li>
<li class="current_sub"><a href="#">Prawns</a></li>
<li><a href="#">Salmon</a></li>
</ul>
 
 
<ul class="select"><li><a href="#"><b>June</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Jam</a></li>
<li><a href="#">Lemon Curd</a></li>
<li><a href="#">Marmalade</a></li>
<li><a href="#">Marmite</a></li>
<li><a href="#">Bovril</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>July</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Lamb</a></li>
<li><a href="#">Chicken</a></li>
<li><a href="#">Pork</a></li>
<li><a href="#">Beef</a></li>
<li><a href="#">Cheese</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>August</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Beach</a></li>
<li><a href="#">Country walk</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Window shopping</a></li>
<li><a href="#">Gardening</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>September</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Tulips</a></li>
<li><a href="#">Sunflower</a></li>
<li><a href="#">Cyclamen</a></li>
<li><a href="#">Dahlia</a></li>
<li><a href="#">Gladiolus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>October</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Cup</a></li>
<li><a href="#">Saucer</a></li>
<li><a href="#">Plate</a></li>
<li><a href="#">Fruit bowl</a></li>
<li><a href="#">Egg cup</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
</div>

您可以通过下面的链接访问 cssplay 原页面:
http://www.cssplay.co.uk/menus/doors_drop_line_three.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>