上一篇
下一篇
完整点击区域滑动门菜单
作者:飘零雾雨 日期:2007-03-06
转载请注明出处，css探索之旅-飘零雾雨的庄园，本文已作修改，如在修改前转载的麻烦更新。
最近，网上已有越来越多的滑动门菜单效果。可谓五花八门，让人眼花缭乱。滑动门的广泛使用，确实让时下的web增色不少，但千万不要滥用。
看了这么多的滑动门，难免手痒，今日闲来无事，也写了一个玩玩，仅供参考。
本例主要有几个特点：一是菜单的宽度能够自适应的滑动门菜单(就这一点，本例还是可以改进的，留给有兴趣的人去做吧)，避免当菜单文字比较长时出现效果缺失，造成不可意料的维护麻烦；二是百分百完整点击区域的滑动门菜单，这针对当前很多的滑动门菜单都有盲点，并非整个菜单区域都可以点击。
［完整点击区域滑动门菜单演示：http://www.doyoe.com/model/xhtmlcss/menu/menu2/1.htm］
CSS部分：
.dymenu,.dymenu a,.dymenu a.on span,.dymenu a:hover span{
background:url(tab.png) no-repeat;
}
.dymenu{
overflow:hidden;
height:32px;
padding-left:10px;
background-position:0 -81px;
background-repeat:repeat-x;
text-align:left;
}
.dymenu a,.dymenu a span{
float:left;
height:27px;
cursor:pointer;
}
.dymenu a{
height:27px;
margin-top:5px;
background-position:right -54px;
}
.dymenu a span span{
margin:0 5px;
}
.dymenu a:hover,.dymenu a.on{
background-position:right 0;
}
.dymenu a:hover span span,.dymenu a.on span span{
background-position:center -27px;
color:#000;
}
XHTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>完整点击区域滑动门菜单 - Powered by 飘零雾雨</title>
<meta name="description" content="这是一个完整点击区域滑动门菜单例子" />
<meta name="keywords" content="滑动门, 菜单" />
<meta name="author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
</head>
<body>
<div class="dymenu">
<a href="?" class="on"><span><span>Home</span></span></a>
<a href="?"><span><span>News</span></span></a>
<a href="?"><span><span>Products</span></span></a>
<a href="?"><span><span>About</span></span></a>
<a href="?"><span><span>Contact</span></span></a>
</div>
</body>
</html>
文章来自: 
引用通告: 
Tags: