JavaScript CSS 菜单功能代码

更新时间：2008年12月20日 17:18:48 作者：

CSS 菜单功能,多浏览器兼容性好

<html> <head> <META NAME="Author" CONTENT="Ma Jia Nan"> <META NAME="Date" CONTENT="2008-12-7"> <META NAME="Description" CONTENT=""> <title>Menu</title> <style type='text/css'> #menubar { font-family:verdana; font-size:12px; margin:1px; } #menubar li { float:left; position:relative; text-align:left; } /* each menu item style */ #menubar li a { border-style:none; color:black; display:block; width:150px; height:20px; line-height:20px; padding-left:10px; text-decoration:none; } /* the first level menu which displays default */ #menubar .menuMain{ border-color:#C0C0C0; border-width:1px; border-style:solid; } /* the first leve style when mouse on it */ #menubar li a:hover{ background-color:#efefef; text-decoration:underline; } /* the second level menu block style */ #menubar li ul{ background-color:#efefef; border-style:none; display:none; position:absolute; top:20px; left:-40px; margin-top:2px; width:150px; } /* the sub menu item style when mouse on it */ #menubar li ul li a:hover { text-decoration:underline; padding-left:20px; } /* the third or more level menu block style */ #menubar li ul li ul { display:none; position:absolute; top:0px; left:150px; margin-top:0; margin-left:0; width:150px; } </style> <script language='javascript'> function displaySubMenu(li){ var subMenu = li.getElementsByTagName('ul')[0]; subMenu.style.display = 'block'; } function hideSubMenu(li){ var subMenu = li.getElementsByTagName('ul')[0]; subMenu.style.display = 'none'; } </script> </head> <body> <div> <ul id='menubar'> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#" class='menuMain'>File</a> <ul> <li><a href="#" >New</a></li> <li><a href="#" >Open</a></li> <li><a href="#" >Save</a></li> <li><a href="#" >Save As</a></li> <li><a href="#" >Close</a></li> </ul> </li> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#" class='menuMain'>Edit</a> <ul> <li><a href="#" >Cut</a></li> <li><a href="#" >Copy</a></li> <li><a href="#" >Paset</a></li> <li><a href="#" >Delete</a></li> <li><a href="#" >Select All</a></li> </ul> </li> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#" class='menuMain'>View</a> <ul> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">View List</a> <ul> <li><a href="#" >Tool Bar</a></li> <li><a href="#" >State Bar</a></li> <li><a href="#" >Function List</a></li> <li><a href="#" >Label List</a></li> </ul> </li> <li><a href="#" >Show Line Number</a></li> <li><a href="#" >Set Color</a></li> </ul> </li> </ul> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

爆炸式的JS圆形浮动菜单特效代码
爆炸式的JS圆形浮动菜单特效代码，点击主菜单后，子菜单会爆炸式展开，挺有意思的。
2010-03-03
CSS TreeMenu 二级树形菜单示例
二级树形菜单示例：CSS TreeMenu ，非常漂亮的树形菜单，用在网站右侧比较合适。
2010-11-11
CSS 伪类实现的鼠标滑动图片链接
CSS伪类实现的鼠标滑动链接，是一个图片导航，在早期的DW中有专一制作本效果的插件，不过随着大家CSS水平的提高，现在做出这种效果好像得心应手了，因为这种果大家应该都挺喜欢的。
2009-10-10
yahoo首页伸缩效果代码
js伸缩效果代码
2008-05-05
javascript 静态树菜单实现代码
coding这么多年，我居然不知道有"dl"这种html标记，惭愧啊，今天偶然发现，觉得好玩，如是我为它添加了折叠功能，变成了一颗静态树.
2010-12-12
带缓冲的收缩与展开内容效果
带缓冲的收缩与展开内容效果...
2007-09-09
js仿土豆视频滚动菜单
比较漂亮的仿土豆视频导航菜单，漂亮大方
2008-05-05
腾讯QQ网页在线客服，随网页滚动条上下移动的效果一
腾讯QQ网页在线客服，随网页滚动条上下移动的效果一...
2007-03-03
CSS导航菜单，三级菜单实现代码
CSS导航菜单，三级菜单，资源完整，超实用，希望大家喜欢。
2010-11-11
jquery 实现斜导航效果
jquery 实现斜导航效果代码，就一个图片文件，利用css控制位置，非常不错。
2009-05-05

JavaScript CSS 菜单功能代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具