完整点击区域滑动门菜单

原创 2007年09月29日 09:09:00

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

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

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

输出效果:

 

 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&#39;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

22款css Menu CSS滑动门菜单效果下载

  • 2008年06月17日 15:46
  • 65KB
  • 下载

滑动门(舌签)完美版

  • 2013年12月02日 21:13
  • 3KB
  • 下载

HTML中的滑动门实现

http://www.alistapart.com/articles/slidingdoors/中文翻译http://www.cnwebshow.com/9/10/0601/3635.htm...
  • black_ben
  • black_ben
  • 2006年02月09日 11:55
  • 1320

CSS导航菜单--三状态玻璃效果菜单(双层滑动门应用)

原文链接:http://www.cnblogs.com/zfang/archive/2011/10/13/2209635.html 本例进一步讨论背景图片制作菜单的方法,目标是实现一个具有3...
  • u010874036
  • u010874036
  • 2016年04月05日 20:18
  • 711

jQuery 移动式的Tab滑动门菜单

  • 2010年07月31日 11:32
  • 20KB
  • 下载

AndroidRecyclerView仿QQ滑动门菜单右滑菜单

Android开发中HorizontalScrollView即可实现横向水平滑动,若想实现左滑弹出菜单,右滑隐藏菜单需要修改HorizontalScrollView默认滑动事件。假设菜单长度为100像...
  • lishengko
  • lishengko
  • 2017年02月22日 19:29
  • 251

滑动门菜单--css自适应宽度滑动门菜单

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> a {...
  • ysydao
  • ysydao
  • 2013年06月13日 14:16
  • 865

滑动门菜单

 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">我的滑动门body{co...
  • sheshou2
  • sheshou2
  • 2009年02月05日 15:44
  • 913

CSS滑动门横向菜单栏

效果如下:               实现方法:利用一下两张图片:                   前台代码:                             首页           ...
  • fengqiao1999
  • fengqiao1999
  • 2009年12月29日 13:37
  • 924

50个Jquery经典实例(滑动门,下拉菜单,导航样式等)

  • 2012年11月29日 09:14
  • 5.61MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:完整点击区域滑动门菜单
举报原因:
原因补充:

(最多只允许输入30个字)