完整点击区域滑动门菜单
来源:互联网 发布:tower for mac 破解版 编辑:程序博客网 时间:2024/05/17 18:25
最近,网上已有越来越多的滑动门菜单样式。可谓五花八门,让人眼花缭乱。今日闲来无事,也写了一个,仅供参考。
这里比较重要是链接区域的宽要能自适应,防止有的链接字多,有的链接字少,造成不可意料的维护麻烦。
[演示地址:http://www.doyoe.com/model/xhtmlcss/menu/menu2/1.htm]
输出效果:
.dymenu_m1 {padding-left:10px;margin-top:20px;height:32px;background:url(http://www.doyoe.com/model/xhtmlcss/menu/menu2/skin/menubg.gif) left top repeat-x;overflow:hidden;}.dymenu_m1 a {padding-left:4px;margin-top:5px;height:27px;line-height:27px;color:#565656;text-decoration:none!important;float:left;}.dymenu_m1 a span {padding:0 10px 0 6px;background:url(http://www.doyoe.com/model/xhtmlcss/menu/menu2/skin/up.gif) right center no-repeat;cursor:pointer;float:left;}.dymenu_m1 a:hover,.dymenu_m1 a.index {color:#333!important;background:url(http://www.doyoe.com/model/xhtmlcss/menu/menu2/skin/down_left.gif) left top no-repeat;}.dymenu_m1 a:hover span,.dymenu_m1 a.index span {background:url(http://www.doyoe.com/model/xhtmlcss/menu/menu2/skin/down_right.gif) right top no-repeat;}.dymenu_m1 a.index span {font-weight:bold;}
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"><span>Home</span></a>
<a href="#"><span>News</span></a>
<a href="#"><span>Products</span></a>
<a href="#"><span>About</span></a>
<a href="#"><span>Contact</span></a>
</div>
</body>
</html>
原文地址:http://blog.doyoe.com/blogedit.asp?id=7
- 完整点击区域滑动门菜单
- 菜单UI点击隐藏与显示(滑动)
- MFC 托盘右键菜单点击非菜单区域后消失
- 点击锚点滑动到对应的区域
- 滑动门菜单技术
- 滑动门菜单
- 滑动门菜单
- VC MFC系统托盘右键菜单,鼠标点击非菜单区域使菜单消失的问题
- 阿里巴巴css滑动菜单 ,滑动门
- jquery插件:点击拉出的右侧滑动菜单
- 后台左侧菜单点击上下滑动显示jquery
- jQuery 树形菜单(竖向点击和横向滑动)
- android 左右侧滑菜单(点击+左右滑动)一
- iOS抽屉效果、二级菜单(点击,拖拽滑动)
- android 左右侧滑菜单(点击+左右滑动)
- 滑动门菜单--css自适应宽度滑动门菜单
- 菜单弹出后点击其他区域则关闭菜单的方法
- 滑动菜单
- setTimeout()在js类中的使用方法
- Spring2.0JINDI集成(3)
- 艰难征程
- 如何让DIV在内容不固定的情况下宽度刚好显示完内容
- 利用 DOM 进行 Web 响应
- 完整点击区域滑动门菜单
- 五年后你最希望自己做什么
- 驱动程序内存分配
- GCC 中文手册
- JS应用(资料很全) 更新
- 导入空间数据到Postgis数据库的问题
- 在自制Linux盘上安装GRUB
- 使用LABEL增强你的页面体验
- 漫谈Ajax在.Net中的使用