船长 发表于 2009-02-04 11:39 | 分类：jQuery | 阅读数：290 次
代码如下:
<!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=utf-8" /> <title>无标题文档</title> <script src="http://www.songlecn.com/wp-content/files/jquery-1.2.6.pack.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(".menubt").click(function(){ $(this).blur(); if($(this).siblings("div").css("display") == "none") { $(".menucount:visible").slideUp(200,function(){ $(this).parent().css("zIndex","100");}); $(this).siblings("div").slideDown(200,function(){ $(this).parent().css("zIndex","10");}); $(this).siblings("div").attr("id","#boxOpen"); } else { $(this).siblings("div").slideUp(200,function(){ $(this).parent().css("zIndex","100");}); } }) }) </script> <style type="text/css"> body{ margin:0; padding:0; } .menubox{ position:absolute; width:100%; z-index:100; } .menucount { display:none; height:80px; overflow:hidden; background:#999999; } #boxOpen { height:80px; display:block; } .menubt { display:block; float:right; position:absolute; display:block; background:url(http://www.songlecn.com/wp-content/supload/2009/02/04/200807311902340.gif); color:#FFFFFF; text-decoration:none; width:78px; height:21px; text-align:center; font-size:12px; } .menubtOpen { display:block; float:right; position:absolute; display:block; background:#0066FF; color:#FFFFFF; text-decoration:none; width:50px; } </style> </head> <body> <div class="menubox"> <div class="menucount"></div> <a class="menubt" style="right:240px;" href="#">菜单一</a> </div> <div class="menubox"> <div class="menucount"></div> <a class="menubt" style="right:160px;" href="#">菜单二</a> </div> <div class="menubox"> <div class="menucount"></div> <a class="menubt" style="right:80px;" href="#">菜单三</a> </div> <div class="menubox"> <div class="menucount"></div> <a class="menubt" style="right:0;" href="#">菜单四</a> </div> 请刷新本页面，再点击菜单或下载到本地查看。 </body> </html>
提示：你可以先修改部分代码再运行。
您的网名： * 必填
电子邮件： * 绝不会泄露
验证条码： *
个人主页：
评论内容：
(Ctrl+Enter快捷回复)
web集结号致力于
