[散分]完整点击区域滑动门菜单,该怎么处理
日期：2014-05-17 浏览次数：20740 次
[散分]完整点击区域滑动门菜单
今天闲来无事，把以前的一些乱七八糟的东西整理了一下，有些可能有点用处，贴出来大家看看，借此机会散点分，好久没散分了（只接分，貌似不厚道^_^）
最近，网上已有越来越多的滑动门菜单样式。可谓五花八门，让人眼花缭乱。今日闲来无事，也写了一个，仅供参考。
［演示地址：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>
今天闲来无事，把以前的一些乱七八糟的东西整理了一下，有些可能有点用处，贴出来大家看看，借此机会散点分，好久没散分了（只接分，貌似不厚道^_^）
最近，网上已有越来越多的滑动门菜单样式。可谓五花八门，让人眼花缭乱。今日闲来无事，也写了一个，仅供参考。
［演示地址：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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
