Ver: 0.7.1
You are at: http://STauren.net/log/6cw4lvru7.html
- Title: 一个漂亮的、浏览器通用的css菜单设计
- 1/541
- stauren
IP hidden - 2007-06-12 17:13
336D ago
在网页上实现pop-up的菜单，一般是两种方式，以前我使用的是使用js监听mouseover事件的触发，然后使用DOM生成或者使用class的改变来显示出下一级的菜单。这种方式增加了listener的数量，而且对于多级菜单，监听的实现将比较复杂（如鼠标mouseover2级菜单时，1级菜单也得显示）。这是本站以前鼠标悬停"Edit" tab时的处理方式。
另外一种方式是使用纯css的实现，也是目前本站"Write"按钮的处理方式。这里主要用到了xhtml中一些css的trick。为了在各个浏览器中普遍适用，还得对html添加一些条件注释。
这里是一个完整的例子的链接：
http://stauren.net/uploads/menustyle/menustyle.html
其中最主要的css trick如下：
全部代码如下：
谢谢观看
另外一种方式是使用纯css的实现，也是目前本站"Write"按钮的处理方式。这里主要用到了xhtml中一些css的trick。为了在各个浏览器中普遍适用，还得对html添加一些条件注释。
这里是一个完整的例子的链接：
http://stauren.net/uploads/menustyle/menustyle.html
其中最主要的css trick如下：
.menu ul ul {visibility:hidden;position:absolute;height:0;top:2em;left:-1px;width:14em;}隐藏所有层级菜单.menu ul li:hover ul, .menu ul a:hover ul {visibility:visible; height:auto; padding-bottom:3em;}鼠标悬停于第1级菜单时，显示所有级数大于1的菜单.menu ul :hover ul ul{visibility:hidden;}鼠标悬停于第1级菜单时，隐藏所有级数大于2的菜单.menu ul :hover ul :hover ul{visibility:visible;}鼠标悬停于第2级菜单时，显示所有级数大于2的菜单，这里的例子只处理到了3级菜单，实际情况可以再增加。全部代码如下：
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.menu{font:11px tahoma;height:2em;border:1px solid #9b9a9a;text-align:left;}
.menu ul {padding:0px;margin:0px;list-style-type:none;background:none;}
.menu ul li {float:left;}
.menu a, .menu a:visited {
display:block;float:left;height:100%;text-decoration:none;background:none;padding:0px;color:#666;padding:0.4em 5px 0.5em;
}
.menu ul ul a, .menu ul ul a:visited {
color:#666666;width:12em;padding:0.4em 0.5em 0.4em 1.4em;
border-style:solid;border-color:#9b9a9a;border-width: 0 1px;
background-color:#ebebeb;
}
.menu ul table ul a, .menu ul table ul a:visited {width:14em;}
/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; left:0; top:1px; font-size:1em; z-index:-1;}
.menu ul ul table {left:-2px;}
.menu ul ul table ul.left {margin-left:2px;}
.menu li:hover {position:relative;}
* html .menu a:hover {position:relative;}
.menu ul ul ul a, .menu ul ul ul a:visited {background-color:#DEDEDE;}
.menu ul :hover a.sub1 {background:#ebebeb url(./rtriangle.gif) no-repeat 100% 50%;}
.menu a:hover {color:#000;background:#EBEBEB;}
.menu :hover > a {color:#000;background:#EBEBEB;}
.menu ul ul a:hover{background-color:#FAFAFA;color:#C00;}
.menu ul ul :hover > a {background-color:#FAFAFA;color:#C00;}
.menu ul :hover a.sub1:hover {background-color:#FAFAFA;}
.menu ul ul ul a:hover {background-color:#F7F7F7;}
.menu ul ul ul :hover > a {background-color:#F7F7F7;}
.menu ul ul {visibility:hidden;position:absolute;height:0;top:2em;left:-1px;width:14em;}
.menu ul ul ul{left:14em;top:0;}
.menu ul li:hover ul, .menu ul a:hover ul {visibility:visible; height:auto; padding-bottom:3em;}
.menu ul :hover ul ul{visibility:hidden;}
.menu ul :hover ul :hover ul{visibility:visible;}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Menu
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
<li><a href="#">Item5 with a long name as 2 lines</a></li>
<li><a href="#">Item6</a></li>
<li><a class="sub1" href="#">SubMenu1
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Item7</a></li>
<li><a href="#">Item8</a></li>
<li><a href="#">Item9</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Item10</a></li>
<li><a class="sub1" href="#">SubMenu2 with a long name and a list of subs
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Item11 with a very long name, quite long</a></li>
<li><a href="#">Item12</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Menu2
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Item13, Menu2</a></li>
<li><a href="#">Item14</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>谢谢观看
Birthday
1984-05-29:(16 days away)
李旭
1983-06-21:(39 days away)
肖琦
1984-06-29:(47 days away)
周旭
1983-07-07:(55 days away)
于洋
李旭
1983-06-21:(39 days away)
肖琦
1984-06-29:(47 days away)
周旭
1983-07-07:(55 days away)
于洋
Please login
Time
Calendar
Friend links
Announcement
stauren@西湖湖畔
JavaScript is the world's most misunderstood programming language. The language has so much expressive power that it is possible to be somewhat productive with it without knowing what you're doing. But that is not an effective way to work. Programming is serious business that should never be undertaken in ignorance.
Listen Yahoo!
Let's start from here!
一般的SB都是酷酷的
Belle
JavaScript is the world's most misunderstood programming language. The language has so much expressive power that it is possible to be somewhat productive with it without knowing what you're doing. But that is not an effective way to work. Programming is serious business that should never be undertaken in ignorance.
Listen Yahoo!
Let's start from here!
一般的SB都是酷酷的
Belle
My Project
stauren.net is proudly powered by STauren! blog, a small ajax blog framework developed by stauren.
All we got here, are memories. With heart & soul. 2006-2008 STauren! © Ver 0.7.1
All we got here, are memories. With heart & soul. 2006-2008 STauren! © Ver 0.7.1