首 页
创意产业
设计资讯
UI设计
平面设计
设计教程
网站建设
站长学院
素材下载
软件下载
当前位置:
首页
>>
网站建设
>> 正文
坚型伸缩菜单:FF、Opera、IE7均正常
文章来自:设计学院 | 发表时间:2007-10-23 11:56:03
Source Code to Run
<!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" /> <title>竖型鼠标触发伸缩菜单</title> </head> <style type="text/css"> body { background: #fff; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 12px; } #dlmenu {height:10em;} #menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:15em; background:#fff; z-index:100;} #menu li {display:block; padding:0; margin:0; position:relative; z-index:100;} #menu li a, #menu li a:visited {display:block; text-decoration:none;} #menu li dd {display:none;} #menu li:hover, #menu li a:hover {border:0;} #menu li:hover dt a , #menu li a:hover dt a {background-color: #000; color:#ff0; } #menu li:hover dd, #menu li a:hover dd {display:block;} #menu li:hover dl, #menu li a:hover dl {height:20em; background-color: #eee;} #menu dl {width: 15em; margin: 0; background: #666; cursor:pointer;} #menu dt {margin:0; padding: 0; font-size: 1.1em; border-top:1px solid #cce;} #menu dd {margin:0; padding:0; font-size: 1em; text-align:left; } .gallery dt a, .gallery dt a:visited {display:block; color:#fff; padding:5px 5px 5px 10px; background-color: #333;} .gallery dd a, .gallery dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background-color: #eee;} * html .gallery dd a, * html .gallery dd a:visited {height:1em;} .gallery dd a:hover {background: #666; color:#ff0;} </style> <body> <div id="dlmenu"> <ul id="menu"> <li> <dl class="gallery"> <dt><a href="../menu/index.html">DEMOS</a></dt> <dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd> <dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd> </dl> </li> <li> <dl class="gallery"> <dt><a href="index.html">MENUS</a></dt> <dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd> <dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd> <dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd> </dl> </li> <li> <dl class="gallery"> <dt><a href="../layouts/index.html">LAYOUTS</a></dt> <dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd> <dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd> </dl> </li> </ul> </div> </body> </html>
[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]
FF2.x、Opera9.x、IE7均正常,但IE6无法显示子菜单
要想IE6也显示,有什么变通的办法吗?非常感谢。
这个是纯CSS的菜单。看来还是得用javascript了。-_-
一个类似的
Source Code to Run
<!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" /> <title>手风琴导航</title> <style type="text/css"> *{margin: 0px;padding: 0px;list-style: none;border: 0px;} body {font-size: 12px;line-height: 20px;color: #666666;} #menuc {padding: 5px;margin:10px;border: 1px solid #CCCCCC;display:block;width: 200px;} .close,.open{width: 200px;} .close dt,.open dt {margin:2px 0;border: 1px solid #CCCCCC;background-color: #F2F2F2;height: 20px;text-align: center; } .close dd {display: none;} .open dd {border: 1px solid #E0E0E0;margin: 2px 0;margin-left: 40px;} .open dd a {display: block;padding-left:10px;height:20px;color: #666666;text-decoration: none;} .open dd a:hover{background-color: #F3F3F3;color: #333333;text-decoration: none;} </style> <script type="text/javascript" > window.onload = function(){ tit = document.getElementById('menuc').getElementsByTagName('dl') for (i = 0; i < tit.length; i++){ tit[i].onmouseover = function(){ this.className = 'open' } tit[i].onmouseout = function(){ this.className = 'close' } } } </script> </head> <body> <div id="menuc"> <dl class="close"> <dt>标题1</dt> <dd><a href="#">子项1</a></dd> <dd><a href="#">子项2</a></dd> <dd><a href="#">子项3</a></dd> <dd><a href="#">子项4</a></dd> </dl> <dl class="close"> <dt>标题2</dt> <dd><a href="#">子项1</a></dd> <dd><a href="#">子项2</a></dd> <dd><a href="#">子项3</a></dd> <dd><a href="#">子项4</a></dd> </dl> <dl class="close"> <dt>标题3</dt> <dd><a href="#">子项1</a></dd> <dd><a href="#">子项2</a></dd> <dd><a href="#">子项3</a></dd> <dd><a href="#">子项4</a></dd> </dl> <dl class="close"> <dt>标题4</dt> <dd><a href="#">子项1</a></dd> <dd><a href="#">子项2</a></dd> <dd><a href="#">子项3</a></dd> <dd><a href="#">子项4</a></dd> </dl> </div> </body> </html>
[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]
相关文章
Javascript将字符串转为XML并读取对象值
国内外 JavaScript 经典封装
网页javascript精华代码集
图片横向连续滚动的代码
将人民币数字转换成大写形式
如何制作随滚动条上下移动的广告层?
JS 介绍
JS 字符串
onkeydown事件处理回车后提交表单
js删除表格行的误区
实例:尽可能写友好的Javascript代码
javascript:selectedindex属性
个人网页中必不可少的十五大Web API
getAttribute() 方法
Javascript: push 方法
用JS得到字符串中出现次数最多的字母