[散分]完整点击区域滑动门菜单
今天闲来无事,把以前的一些乱七八糟的东西整理了一下,有些可能有点用处,贴出来大家看看,借此机会散点分,好久没散分了(只接分,貌似不厚道^_^)
最近,网上已有越来越多的滑动门菜单样式。可谓五花八门,让人眼花缭乱。今日闲来无事,也写了一个,仅供参考。
[演示地址:http://pysj.v-ec.com/model/xhtmlcss/menu/Menu2/menu.htm]
CSS部分:
#dymenu {
width: 100%;
background: url(http://pysj.v-ec.com/model/xhtmlcss/menu/Menu2/skin/menubg.gif) left top repeat-x;
font-size: 12px;
float: left;
}
#dymenu ul {
margin: 0;
padding: 5px 5px 0 5px;
list-style: none;
float: left;
}
#dymenu ul li {
text-align :center;
float: left;
}
#dymenu ul li a {
padding-left: 4px;
line-height: 27px;
color: #565656;
text-decoration:none;
float: left;
}
#dymenu ul li a span {
padding: 0 10px 0 6px;
background: url(http://pysj.v-ec.com/model/xhtmlcss/menu/Menu2/skin/up.gif) right center no-repeat;
float: left;
}
#dymenu ul li a:hover {
background: url(http://pysj.v-ec.com/model/xhtmlcss/menu/Menu2/skin/down_left.gif) left top no-repeat;
float: left;
}
#dymenu ul li a:hover span {
cursor: pointer;
background: url(http://pysj.v-ec.com/model/xhtmlcss/menu/Menu2/skin/down_right.gif) right top no-repeat;
float: left;
}
#dymenu ul li a.index {
background: url(http://pysj.v-ec.com/model/xhtmlcss/menu/Menu2/skin/down_left.gif) left top no-repeat;
float: left;
}
#dymenu ul li a.index span {
font-weight: bold;
background: url(http://pysj.v-ec.com/model/xhtmlcss/menu/Menu2/skin/down_right.gif) right top no-repeat;
float: left;
}
HTML部分:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN "
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<head>
<meta http-equiv= "content-type " content= "text/html; charset=gb2312 " />
<meta http-equiv= "keyword " content= "飘雨设计|DESIGN|飘雨设计社区 " />
<meta http-equiv= "author " content= "dy615|edzmaster@gmail.com " />
<title> ..:Menu Style:.. </title>
</head>
<body>
<div id= "dymenu ">
<ul>
<li> <a href= "# " class= "index "> <span> Home </span> </a> </li>
<li> <a href= "# "> <span> News </span> </a> </li>
<li> <a href= "# "> <span> Products </span> </a> </li>
<li> <a href= "# "> <span> About </span> </a> </li>
<li> <a href= "# "> <span> Contact </span> </a> </li>
</ul>
</div>
</body>
</html>
[解决办法]
继续支持!
[解决办法]
接-------------------------------------分
[解决办法]
接分有理
[解决办法]
:)
[解决办法]
今天上论坛没干别的,净捡分了。
[解决办法]
接分,支持,顺便学习一下
[解决办法]
感谢楼主的分享
[解决办法]
up
[解决办法]
up
[解决办法]
up up up
[解决办法]
顶一下
[解决办法]
收了
[解决办法]
收藏~~~~~~~~~
[解决办法]
IT群``JAVA```。NET,ASP```14401742 招人``欢迎高手加入
[解决办法]
强烈支持
[解决办法]
不错不错,呵呵,加上数据切换就好了
[解决办法]
up
[解决办法]
顶一下
[解决办法]
感谢楼主的分享!真是由衷的感谢,你要知道,这样的代码我找了好长时间,今天一上网就看到你的帖子,我感动的老泪纵横!
老泪纵横啊!好人啊!!
[解决办法]
jf!
[解决办法]
楼主是好人.又布道,又散分!
说明了一个大道理:知识就是金钱.
[解决办法]
接分,帮顶
[解决办法]
jf
[解决办法]
太有才了 多谢啊
正需要这样的英雄呢 十分感谢
[解决办法]
之前网上找的版本,点击区域无法做到100%。这个版本我试试,多谢了!
[解决办法]
收藏
[解决办法]
收藏
JF
[解决办法]
接·············分
[解决办法]
泪流满面的接分~~~~
[解决办法]
接分