求横向菜单代码，用javascript做！特急趴求！该如何解决
日期：2014-05-19 浏览次数：20577 次
求横向菜单代码，用javascript做！！！！特急，趴求！！！！！！
我其实是想作如下操作。
点击一级菜单，然后把菜单项的id传到数据库，通过从数据库中提取二级菜单项，放入datalist控件中显示出来，然后单击相应的二级菜单项，连接到相应的网页。
如果大家有好的例子，帮忙推荐下。如果好使，可加分。谢谢。
效果如下：
|人事管理|项目管理|文档管理|
当点击“人事管理”后
下边出现：|人员录入|人员查询|（这是用DATALIST控件显示出来的）！！！
当点击，“人员录入”时，将显示相应窗口
十分着急，各位大侠帮忙，江湖告急！！！！！！
------解决方案--------------------
从数据库中取出还要用javascript做???
------解决方案--------------------
www.smallrain.net
------解决方案--------------------
<script type=text/javascript>
/**
*菜单的构造,需要绑定到onload
*/
startList = function() {
if (document.all&&document.getElementById) {
dropmenuRoot = document.getElementById( "dropmenu ");
for (i=0; i <dropmenuRoot.childNodes.length; i++) {
node = dropmenuRoot.childNodes[i];
if (node.nodeName== "LI ") {
node.onmouseover=function() {
this.className+= " over ";
//开始灌水
for(j=0;j <this.childNodes.length;j++){
if (this.childNodes[j].nodeName== "UL "){
if (this.childNodes[j].childNodes[0].nodeName== "LI "){
if (this.offsetLeft+this.childNodes[j].childNodes.length*this.childNodes[j].childNodes[0].offsetWidth-dropmenuRoot.offsetLeft> dropmenuRoot.offsetWidth){
var len=this.childNodes[j].childNodes.length*this.childNodes[j].childNodes[0].offsetWidth; //菜单的长度
(len> dropmenuRoot.offsetWidth) ? this.childNodes[j].style.width=776+ "px " : this.childNodes[j].style.width=len+ "px "; //给ul设置宽度如果子菜单比较多，大于容器的宽度，那么ul的宽度就是容器的宽度
len =this.offsetLeft+len-dropmenuRoot.offsetLeft-dropmenuRoot.offsetWidth;
(len> this.offsetLeft-dropmenuRoot.offsetLeft) ? this.childNodes[j].style.marginLeft=-(this.offsetLeft-dropmenuRoot.offsetLeft) : this.childNodes[j].style.marginLeft=-len+ "px ";
}
}
}
}
}
//灌水完毕
node.onmouseout=function() {
this.className=this.className.replace( " over ", " ");
}
}
}
}
}
window.onload=startList;
</script>
<body>
<div id= "nav ">
<ul id= "dropmenu ">
<li> <a href= "# "> Home </a> </li>
<li> <a href= "# "> About </a>
<ul>
<li> <a href= "# "> History </a> </li>
<li> <a href= "# "> Team </a> </li>
<li> <a href= "# "> Drop Down Menu </a> </li>
<li> <a href= "# "> Offices </a> </li>
</ul>
</li>
<li> <a href= "# "> Services </a>
<ul>
<li> <a href= "# "> History </a> </li>
<li> <a href= "# "> Team </a> </li>
<li> <a href= "# "> Drop Down Menu </a> </li>
<li> <a href= "# "> Offices </a> </li>
</ul>
</li>
<li> <a href= "# "> Home </a> </li>
<li> <a href= "# "> About </a>
<ul>
<li> <a href= "# "> History </a> </li>
&
我其实是想作如下操作。
点击一级菜单，然后把菜单项的id传到数据库，通过从数据库中提取二级菜单项，放入datalist控件中显示出来，然后单击相应的二级菜单项，连接到相应的网页。
如果大家有好的例子，帮忙推荐下。如果好使，可加分。谢谢。
效果如下：
|人事管理|项目管理|文档管理|
当点击“人事管理”后
下边出现：|人员录入|人员查询|（这是用DATALIST控件显示出来的）！！！
当点击，“人员录入”时，将显示相应窗口
十分着急，各位大侠帮忙，江湖告急！！！！！！
------解决方案--------------------
从数据库中取出还要用javascript做???
------解决方案--------------------
www.smallrain.net
------解决方案--------------------
<script type=text/javascript>
/**
*菜单的构造,需要绑定到onload
*/
startList = function() {
if (document.all&&document.getElementById) {
dropmenuRoot = document.getElementById( "dropmenu ");
for (i=0; i <dropmenuRoot.childNodes.length; i++) {
node = dropmenuRoot.childNodes[i];
if (node.nodeName== "LI ") {
node.onmouseover=function() {
this.className+= " over ";
//开始灌水
for(j=0;j <this.childNodes.length;j++){
if (this.childNodes[j].nodeName== "UL "){
if (this.childNodes[j].childNodes[0].nodeName== "LI "){
if (this.offsetLeft+this.childNodes[j].childNodes.length*this.childNodes[j].childNodes[0].offsetWidth-dropmenuRoot.offsetLeft> dropmenuRoot.offsetWidth){
var len=this.childNodes[j].childNodes.length*this.childNodes[j].childNodes[0].offsetWidth; //菜单的长度
(len> dropmenuRoot.offsetWidth) ? this.childNodes[j].style.width=776+ "px " : this.childNodes[j].style.width=len+ "px "; //给ul设置宽度如果子菜单比较多，大于容器的宽度，那么ul的宽度就是容器的宽度
len =this.offsetLeft+len-dropmenuRoot.offsetLeft-dropmenuRoot.offsetWidth;
(len> this.offsetLeft-dropmenuRoot.offsetLeft) ? this.childNodes[j].style.marginLeft=-(this.offsetLeft-dropmenuRoot.offsetLeft) : this.childNodes[j].style.marginLeft=-len+ "px ";
}
}
}
}
}
//灌水完毕
node.onmouseout=function() {
this.className=this.className.replace( " over ", " ");
}
}
}
}
}
window.onload=startList;
</script>
<body>
<div id= "nav ">
<ul id= "dropmenu ">
<li> <a href= "# "> Home </a> </li>
<li> <a href= "# "> About </a>
<ul>
<li> <a href= "# "> History </a> </li>
<li> <a href= "# "> Team </a> </li>
<li> <a href= "# "> Drop Down Menu </a> </li>
<li> <a href= "# "> Offices </a> </li>
</ul>
</li>
<li> <a href= "# "> Services </a>
<ul>
<li> <a href= "# "> History </a> </li>
<li> <a href= "# "> Team </a> </li>
<li> <a href= "# "> Drop Down Menu </a> </li>
<li> <a href= "# "> Offices </a> </li>
</ul>
</li>
<li> <a href= "# "> Home </a> </li>
<li> <a href= "# "> About </a>
<ul>
<li> <a href= "# "> History </a> </li>
&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
