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

发表于 2007 年 02 月 24 日 由 Artlover

又是 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-t\op: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

  • 本站文章皆为原创，版权归文章作者所有，转载请注明作者信息并以链接方式标明出处。如果您发现本站发布的文章侵犯了您的权利，请及时和我们联系，如果查明属实，我们会立即删除。

关于 Artlover

有多年 web 开发经验，擅长领域 PHP / MySQL / CSS / Javascript / Zend Framework ，期望：在分享中共同成长。
此条目发表在 CSS 分类目录，贴了 , , , , , 标签。将固定链接加入收藏夹。

发表评论

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

*

验证图片

*

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