首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

[散分]完整点击区域滑动门菜单,该怎么处理

2012-02-02 
[散分]完整点击区域滑动门菜单今天闲来无事,把以前的一些乱七八糟的东西整理了一下,有些可能有点用处,贴出

[散分]完整点击区域滑动门菜单
今天闲来无事,把以前的一些乱七八糟的东西整理了一下,有些可能有点用处,贴出来大家看看,借此机会散点分,好久没散分了(只接分,貌似不厚道^_^)


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

[演示地址: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
[解决办法]
接·············分
[解决办法]
泪流满面的接分~~~~
[解决办法]


接分

热点排行