查看文章 |
js 下拉菜单
2008-07-24 13:47
<!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>Untitled Document</title> <style type="text/css"> *{ margin:0; padding:0} li{ list-style:none} .menulist div{ float:left} .menulist img{ cursor:pointer;} /*第一链接*/ .menulist a.link1:link,a.link1:visited{ background:#0099FF; width:100px; height:100px; display:block; text-indent:-1000em; overflow:hidden;} .menulist a.link1:hover{ background:#f00; width:100px; height:100px; display:block;text-indent:-1000em; overflow:hidden;} .menulist a.link12:link,a.link12:visited,a.link12:hover{ background:#f00; width:100px; height:100px; display:block;text-indent:-1000em; overflow:hidden;} /*第二链接*/ .menulist a.link2:link,a.link2:visited{ background:#00FF00; width:100px; height:100px; display:block;text-indent:-1000em; overflow:hidden;} .menulist a.link2:hover{ background:#f00; width:100px; height:100px; display:block;text-indent:-1000em; overflow:hidden;} .menulist a.link22:link,a.link22:visited,a.link22:hover{ background:#f00; width:100px; height:100px; display:block;text-indent:-1000em; overflow:hidden;} /*第三链接*/ .menulist a.link3:link,a.link3:visited{ background:#0000FF; width:100px; height:100px; display:block;text-indent:-1000em; overflow:hidden;} .menulist a.link3:hover{ background:#f00; width:100px; height:100px; display:block;text-indent:-1000em; overflow:hidden;} .menulist a.link32:link,a.link32:visited,a.link32:hover{ background:#f00; width:100px; height:100px; display:block;text-indent:-1000em; overflow:hidden;} </style> <script type="text/javascript"> var global={ $:function(id){return document.getElementById(id)}//获取对象 } function display(obj,link,linkName){ global.$(obj).style.display = ''; global.$(link).className = linkName; } function hiden(obj,link,linkName){ global.$(obj).style.display = 'none'; global.$(link).className = linkName; } </script> </head> <body> <div class="menulist"> <div onmouseover="display('a2','a','link12')" onmouseout="hiden('a2','a','link1')"> <!-- a2为隐藏区域的id，a为触发区域id，link12和link1为链接css样式 --> <a href="#" class="link1" id="a">js下拉菜单</a> <!--第一链接--> <ul style=" display:none" id="a2"> <li><img src="http://www.baidu.com/img/baidu.gif" onmouseover="this.src='http://www.google.com/intl/zh-CN/images/translate_beta_res.gif'" onmouseout="this.src='http://www.baidu.com/img/baidu.gif'"</li> <li>222222</li> <li>3333</li> </ul> </div> <div onmouseover="display('b2','b','link22')" onmouseout="hiden('b2','b','link2')"> <a href="#" class="link2" id="b">js下拉菜单</a> <!--第二链接--> <ul style=" display:none" id="b2"> <li>1111</li> <li>2222</li> <li>3333</li> </ul> </div> <div onmouseover="display('c2','c','link32')" onmouseout="hiden('c2','c','link3')"> <a href="#" class="link3" id="c">js下拉菜单</a> <!--第三链接--> <ul style=" display:none" id="c2"> <li>1111</li> <li>2222</li> <li>3333</li> </ul> </div> </div> </body> </html> |
最近读者：
