完整点击区域滑动门菜单

最新推荐文章于 2018-03-01 23:30:00 发布

飘零雾雨

最新推荐文章于 2018-03-01 23:30:00 发布

阅读量1.1k

点赞数

分类专栏： CSS 文章标签： xhtml url float html class css

本文链接：https://blog.csdn.net/storm0/article/details/1805858

版权

CSS 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

最近，网上已有越来越多的滑动门菜单样式。可谓五花八门，让人眼花缭乱。今日闲来无事，也写了一个，仅供参考。

这里比较重要是链接区域的宽要能自适应，防止有的链接字多，有的链接字少，造成不可意料的维护麻烦。

［演示地址：http://www.doyoe.com/model/xhtmlcss/menu/menu2/1.htm］

输出效果：

Home News Products About Contact

CSS部分：

html,body {
margin:0;
font-size:12px;
}
.dymenu {
margin-top:20px;
height:32px;
background:url(menubg.gif) left top repeat-x;
overflow:hidden;
}
.dymenu a {
padding-left:4px;
margin-top:5px;
height:27px;
line-height:27px;
color:#565656;
text-decoration:none;
float:left;
}
.dymenu a span {
padding:0 10px 0 6px;
background:url(up.gif) right center no-repeat;
cursor:pointer;
float:left;
}
.dymenu a:hover,.dymenu a.index {
color:#333;
background:url(down_left.gif) left top no-repeat;
}
.dymenu a:hover span,.dymenu a.index span {
background:url(down_right.gif) right top no-repeat;
}
.dymenu a.index span {
font-weight:bold;
}

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">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>Doyoe's Menu</title>
<meta name="author" content="飘零雾雨|edzmaster@gmail.com" />
</head>
<body>
<div class="dymenu">
<a href="#" class="index">Home</a>
<a href="#">News</a>
<a href="#">Products</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</body>
</html>