向上的二级菜单
一时间，我自己忘记怎么弄了，问了下PR和左右,告知只要改变一个定位参数就行了：bottom:0 ！
汗-_-!,丢人了又！
项目上用了人家的写的菜单。今天闲着无事，就自己重新写了一个，发现居然比那个还好，虽然没有经过多方验证，而且是二级菜单，但是，在FF和IE6下都通过了。嘿嘿(其实是一个蛮简单的功能而已！)
结构采用自己blog的结构，反正自己的BLog也准备换了，自己重新写一遍布局吧，把那些很少用到标签争取都用上，顺便研究下SEO。
代码：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="robots" content="all" />
<meta name="keywords" content="飞飞,chyf1982,imfeichenefei,xhtml,html,js,css,php,技术,asp,bsd,集邮,养花,花卉,园艺" />
<meta name="author" content="飞飞" />
<meta name="Description" content="飞飞的个人小站" />
<meta name="copyright" content="Copyright (c) 2005-2007 飞飞"/>
<title>无标题文档</title>
<style type="text/css">
body{ padding:0; margin:0; font-size:12px;}
#main { margin:0 15px; padding:0; height:900px; width:auto}
#top { height:60px; text-align:right}
#top_ads { width:100%; text-align:right; height:85px; line-height:85px;}
#contain { height:740px;}
#left { float:left; width:35%; height:100%;}
#right { float:right; width:63%;}
.content_ads { float:right; margin:10px; width:380px; height:288px;}
.both { clear:both}
#buttom { height:100px;text-align:center; position:relative;}
#nav { margin:0; padding:0; list-style:none; width:500px;}
#nav a { display:block; line-height:25px; width:75px; background:#ccc; text-decoration:none}
#nav a:link,#nav a:visited{ display:block; line-height:25px; width:75px; color:#f00}
#nav li { float:left; width:75px; position:relative}
#nav li ul {width:75px; margin:0; padding:0;position:absolute; left:-999em; width:75px;}
#nav li ul li { float:left;width:75px; padding:5px 0; line-height:25px;}
#nav li:hover ul { width:75px; position:absolute; left:0; bottom:24px;}
#nav li.hovers ul{ width:75px; position:absolute; left:0; bottom:24px}
</style>
</head>
<body>
<div id="main">
<div id="top"></div>
<div id="top_ads"></div>
<div id="contain">
<div id="left"></div>
<div id="right">
<div class="content_ads"></div>
</div>
</div>
<div class="both"></div>
<div id="buttom">
<ul id="nav">
<li><a href="#">网站首页</a></li>
<li><a href="#">网站导航</a>
<ul>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的文档</a></li>
<li><a href="#">我的项目</a></li>
<li><a href="#">我常去的</a></li>
</ul>
</li>
<li><a href="#">关于站长</a></li>
<li><a href="#">管理中心</a></li>
<li><a href="#">给我留言</a></li>
<li><a href="#">友情链接</a></li>
</ul>
</div>
</div>
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "hovers";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "hovers";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "hovers";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)hovers\\b"),
"");
}
}
}
menuFix();
//--><!]]></script>
</body>
</html>
先睡觉了。明天来研究！
--------# 2007-11-18 更新 #-------
如果要实现竖向的,二级菜单会要求有个缩进,直接给他一个padding-left就行了.
而且还有一个小BUG.在鼠标经过有子菜单的项目时,会出现页面跳动,和点击锚点类似的跳动.
解决方法就看下一篇日志吧:向上的二级菜单[2]
1.klone 说 发表评论于2008-7-10 14:36:24发送邮件 个人网站
left:-999em;是什么作用啊？
2.飞飞 说 发表评论于2008-7-10 18:37:25发送邮件 个人网站
设置左边距为负数,就是位置在显示器的可视范围之外,用于隐藏标签
我来说几句: