2007-05

初学div+css之菜单篇

Jason at 13:27

导航在网站上占有极重要的地位，Table时代的菜单都是用若干个td并排显示而成。
现在，我们可以用语义化的标签，如li来完成。
菜单一：

<!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> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> *{margin:0px; padding:0px;font-family:verdana;} ul { list-style:none; font-size:10px; } li ul { display:none; } #nav li { text-align:center; margin:3px; width:100px; border:solid 1px #ccc; position:relative; padding:6px; display:block; } #nav li ul{position:absolute;top:-4px;left:112px;} #nav li ul li { padding:5px 6px 5px 5px; } #nav li ul li a { display:block; width:100px; text-decoration:none; border:solid 1px #fff; } #nav li a:hover { background:#efefef; border:solid 1px #ccc; text-indent:30%; } #nav li:hover ul,#nav li.over ul { display:block; border:none; } </style> <script type="text/javascript"> var a = function() { var nav = document.getElementById('nav'); var lis = nav.childNodes; for(var i = 0;i<lis.length;i++) { if(lis[i].nodeName=='LI') { var childLi = lis[i]; childLi.onmouseover = function(){this.className='over';} childLi.onmouseout = function(){this.className='';} } } } window.onload = a; </script> </head> <body> <ul id="nav"> <li>Link <ul> <li><a href="#1">Link</a></li> </ul> </li> <li>Link <ul> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> </ul> </li> <li>Link <ul> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> </ul> </li> <li>Link <ul> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> </ul> </li> <li>Link <ul> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> </ul> </li> </ul> </body> </html>

list-style:none;是去掉列表符号
#nav li下的ul要以li为标准进行绝对定位，这点很重要。
因IE不支持#nav li:hover ul，所以写了一个简单的js来实现，其目的只是给#nav li添加一个mouseover与mouseout事件，
动态改变它的cssName。

菜单二：

<!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> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> *{margin:0px; padding:0px;font-family:verdana;} ul { list-style:none; font-size:10px; } li ul { display:none; } #nav { width:700px; } #nav li { float:left; width:100px; text-align:center; margin:3px; border:solid 1px #003399; cursor:help; padding:6px; } #nav li ul li { border:none; padding:0; margin:0px; } #nav li ul li a { text-decoration:none; display:block; margin:1px; padding:6px 0px; width:97px; } #nav li ul li a:hover { background:#efefef; border:solid 1px #ccc; margin:0px; } #nav li:hover ul,#nav li.over ul { display:block; border:none; } </style> <script type="text/javascript"> var a = function() { var nav = document.getElementById('nav'); var lis = nav.childNodes; for(var i = 0;i<lis.length;i++) { if(lis[i].nodeName=='LI') { var childLi = lis[i]; childLi.onmouseover = function(){this.className='over';} childLi.onmouseout = function(){this.className='';} } } } window.onload = a; </script> </head> <body> <ul id="nav"> <li>Link <ul> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> </ul> </li> <li>Link <ul> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> </ul> </li> <li>Link <ul> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> </ul> </li> <li>Link <ul> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> </ul> </li> <li>Link <ul> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> <li><a href="#1">Link</a></li> </ul> </li> </ul> </body> </html>

这二个简单的菜单主要是对Box模型的理解，最开始我也被box弄糊涂。注意margin、padding、border。

Categories:		web标准
Tags:
Actions:		Comments (14) \|

Comments

May 23 2007 , 13:39

ctrl+c

老不 | Top

May 23 2007 , 13:52

简单易用，拿来主义～

peter | Top

May 23 2007 , 14:42

每天都有新进展

iceapple | Top

May 23 2007 , 15:18

有一些细节不知道怎么处理..
第二个菜单中，顶部的黑色的link与下拉后的第一个蓝色的link的间距有问题

幻想曲 | Top

May 23 2007 , 15:24

[quote=幻想曲]
第二个菜单中，顶部的黑色的link与下拉后的第一个蓝色的link的间距有问题
[/quote]

还真是,搬个凳子坐了等改好后复制...

老不 | Top

May 23 2007 , 17:24

想法是好，但是应用起来不是很顺畅，基本上没有实际意义！

不过，却可以带来一种思路！

思路比代码能力要先进啊！

十三秀 | Top

May 23 2007 , 17:35

我觉得应用比较广泛啊~~
至少我见过的web标准网站的导航基本是这样来实现的

幻想曲 | Top

May 24 2007 , 00:03

不错啊，赞一个~
应用的确是比较广泛滴

yankee | Top

May 24 2007 , 00:10

[quote=yankee]
不错啊，赞一个~
应用的确是比较广泛滴
[/quote]
谢谢~
不过你的链接在FireFox下惨不忍睹喔

幻想曲 | Top

10#

May 24 2007 , 18:09

我喜欢拿来主意。。

Greensun | Top

11#

May 24 2007 , 18:37

谢谢~
不过你的链接在FireFox下惨不忍睹喔

同感，opera下一样，不过好点。。。专为ie设计。

feifei（飞飞） | Top

12#

May 25 2007 , 17:19

菜单一的二级菜单是不是有bug？当鼠标移到超过一级菜单最底部的时候，二级菜单就消失了。。。

schiy | Top

13#

November 12 2007 , 11:25

schiy说的那个...
第一个演示的..二级菜单有问题..
你放最后一个link上...
当鼠标移到二级link上的时候..最下面超过了一级菜单的最下面就消失了.
我自己做的时候.没有加任何修饰..
就是几个光字...居然没问题.
加了border后就跟你这一样的问题...
麻烦你想个办法解决下...

梦龙 | Top

14#

December 28 2007 , 11:05