用脚本如何实现子菜单的显示?
显示效果要求: 进入CSDN网站的"我的空间"页面后,把鼠标放在菜单上面,下面能显示相应的一些子菜单.
最好能给具体的一些 JavaScript脚本代码!
[解决办法]
说的是滑动门吗？？
[解决办法]
你随便搜索CSS滑动门或者JS滑动门，很多啊
[解决办法]
去下个jk_10000工具箱里面就有了,帮你帖出其中一个
到这里下载
http://download.csdn.net/user/jk_10000
<HTML><HEAD><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>JK:支持民族工业,尽量少买X货</title><STYLE type="text/css">.menuUl { width:150px;border:#888888 1px solid;position:absolute;left:0px;top:17px;display:none;}.menuLi { width:150px;border:#888888 1px solid;position:relative;background-color:white;height:18px;display:inline;}.menuUl .menuUl { left:149px;top:2px;}.menuUl .menuLi { display:block;}.menuLi A{ color:#0044ff;text-decoration:none;font:14px verdana;}.menuLi A:hover { background-color:#f0d0d0; }</STYLE><SCRIPT language=javascript src="Menu_MouseFun.js"></SCRIPT></head><BODY><div style="font-size:10pt;">注1：部分代码来自gu1dai(异域苍穹......追夢人)：http://community.csdn.net/Expert/topic/4123/4123998.xml?temp=.4086878<br/>注2：TopMenu与LeftMenu可以通过改变css来互换<br/><br/>注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。<br/> 注-----：作者JK：<a href="mailTo:jk_10000@yahoo.com.cn?subject=About%20TopMenu/LeftMenu">JK_10000@yahoo.com.cn</a><br/> <hr/></div><div onmouseover="Menu_mouseover(event,this);" onmouseout="Menu_mouseout(event,this);" > <div class="menuLi" > <A href="#">Services</A> <div class="menuUl" > <div class="menuLi" > <A href="#">Web Design</A> <div class="menuUl" > <div class="menuLi" ><A href="#">Web Design->sub</A></div> <div class="menuLi" ><A href="#">Web Design->sub2</A></div> <div class="menuLi" > <A href="#">Web Design->sub3</A> <div class="menuUl" > <div class="menuLi" ><A href="#">Web Design->3</A></div> <div class="menuLi" ><A href="#">Web Design->3</A></div> <div class="menuLi" ><A href="#">Web Design->3</A></div> </div> </div> </div> </div> <div class="menuLi" ><A href="#">Internet Marketing</A></div> <div class="menuLi" ><A href="#">Hosting</A></div> <div class="menuLi" ><A href="#">Domain Names</A></div> <div class="menuLi" ><A href="#">Broadband</A></div> </div> </div> <div class="menuLi" > <A href="#">Services</A> <div class="menuUl" > <div class="menuLi" > <A href="#">Web Design</A> <div class="menuUl" > <div class="menuLi" ><A href="#">Web Design->sub</A></div> <div class="menuLi" ><A href="#">Web Design->sub2</A></div> <div class="menuLi" > <A href="#">Web Design->sub3</A> <div class="menuUl" > <div class="menuLi" ><A href="#">Web Design->3</A></div> <div class="menuLi" ><A href="#">Web Design->3</A></div> <div class="menuLi" ><A href="#">Web Design->3</A></div> </div> </div> </div> </div> <div class="menuLi" ><A href="#">Internet Marketing</A></div> <div class="menuLi" ><A href="#">Hosting</A></div> <div class="menuLi" ><A href="#">Domain Names</A></div> <div class="menuLi" ><A href="#">Broadband</A></div> </div> </div></div><select><option>fdsafdsafdsa fdsa fdsa fdsa fdsafdsafdsa fds fdsa fdsafdsafdsafds</option></select></BODY></HTML>
[解决办法]
自己写了一个简单，不知道是不你需要的！
<html>
<head>
<title>
javascript
</title>
<style type="text/css">
#menu{
border:1 solid red;
height:50;
width:380;
}
li{
float:left;
border-right:1 solid gray;
border-left:1 solid gray;
padding-left:5;
padding-right:5;
}
#subcatalog{
clear:left;
border:1 solid red;
width:333;
}
</style>
</head>
<body>
<div id=menu>
<ul>
<li id="user">用户管理 </li> <li id="board">板块管理 </li> <li id="affiche">公告管理 </li> <li id="msg">短信息 </li>
<li id="subcatalog"> </li>
</ul>
</div>
<!---------------------------javascript---------------------------->
<script type="text/javascript">
var user=document.getElementById("user");
var board=document.getElementById("board");
var affiche=document.getElementById("affiche");
var msg=document.getElementById("msg");
var subuser=new Array("添加用户","修改用户","删除用户");
var subboard=new Array("添加板块","修改板块","删除板块");
var subaffiche=new Array("添加公告","修改公告","删除公告");
var submsg=new Array("添加信息","修改信息","删除信息");
var subcontent=document.getElementById("subcatalog");
user.onmouseover=function(){
subcontent.innerText=arrayToString(subuser);
}
user.onmouseout=function(){
subcontent.innerText="";
}
board.onmouseover=function(){
subcontent.innerText=arrayToString(subboard);
}
board.onmouseout=function(){
subcontent.innerText="";
}
affiche.onmouseover=function(){
subcontent.innerText=arrayToString(subaffiche);
}
affiche.onmouseout=function(){
subcontent.innerText="";
}
msg.onmouseover=function(){
subcontent.innerText=arrayToString(submsg);
}
msg.onmouseout=function(){
subcontent.innerText="";
}
function arrayToString(array){
var text="";
for(var i=0;i <array.length;i++){
temp=text;
text=temp+"|"+array[i];
}
return text;
}
</script>
<!---------------------------javascript---------------------------->
</body>
</html>