自定义多级菜单

最新推荐文章于 2021-06-21 14:58:46 发布

原创最新推荐文章于 2021-06-21 14:58:46 发布 · 801 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#menu #function #c #border #firefox #fun

Javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何通过JavaScript和CSS实现一个自定义的多级联动菜单。利用ul、li元素，通过设置不同的CSS样式和JavaScript事件监听，实现在不同浏览器上的兼容效果，如处理IE与Firefox中display属性的差异。菜单结构和代码逻辑清晰，适合初学者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每次进入cloudgamer的博客，看着他神奇般的实现各种绚丽的功能，就流口水，也想通过自己的代码来实现！~

这两天终于抽出时间看了cloudgamer的博客，

计划从简单的功能看起——自定义多级联动菜单(http://www.cnblogs.com/cloudgamer/archive/2008/06/28/1231557.html)

看了很久的代码，终于看出些名堂了，我也模仿他的方法，写了个类似的功能，不过他的面向对象实现得比我好得多

ok，不多说了，进入正题：

我是利用ul、li来实现的，菜单的结构为：

<ul>

<li>menu1

<ul>

</ul>

</li>

</ul>

实现原理为：当鼠标移动li上时，就触发一个事件，如果该li下有ul（也就是子菜单）就显示出来

ul和li的样式定义都很重要

ul的样式定义：

ul{list-style-type:none;padding:0px;margin-left:0px;position:absolute}

li的样式定义：

li{display:block; width:120px; height:40px; line-height:40px; border:1px solid #fff; border-width:1px 1px 0 0; padding:0px; text-align:center; margin-left:0px; position:relative; }

这里面，将li的position定义为：relative，ul的position定义为：absolute，这样ul对其上级li就是相对的，可以很好的控制菜单的位置。

另外值得提下的是：在定义在li中的链接（也就是li a）的样式时，在ie和firefox中显示的效果不对，虽然以前在博客中已经写了css之!important，这个时候却没有想起来可以用，浪费了好多时间去调整：

li a:link,li a:visited{ display:block !important; display:inline; width:120px; height:40px; color:#000; text-decoration:none; background:#c5dbf2; }

具体表现为：当display设置为block时，在ie中，如果鼠标移到一个含有子菜单的li上，则该li与其同级的li中间会出现间距

而设置为inline的话，则在firefox效果会很差；找了好久没找到可以处理ie中间距的方法，就!important兼容了。

样式处理好后，就可以定义菜单了，代码中，菜单的结构为：

var menus = [ {'txt':'menu1↓','position':'down','menu':[ {'txt':'menu1_1→','position':'right','menu':[ {'txt':'menu1_1_1'}, {'txt':'menu1_1_2'}, {'txt':'menu1_1_3'}, {'txt':'menu1_1_4'} ]}, {'txt':'menu1_2'} ]}, {'txt':'menu2↓','position':'down','menu':[ {'txt':'menu2_1→','position':'right','menu':[ {'txt':'menu2_1_1'}, {'txt':'menu2_1_2'} ]}, {'txt':'menu2_2→','position':'right','menu':[ {'txt':'menu2_2↓','position':'down','menu':[ {'txt':'menu2_2↓','position':'down','menu':[ {'txt':'menu2_2←','position':'left','menu':[ {'txt':'menu2_2↑','position':'top','menu':[ {'txt':'menu2_2☆'} ]} ]} ]} ]} ]} ]} ];

其中’txt‘表示菜单的显示文字，’position‘是用来表示子菜单的走向，’menu‘表示子菜单

在我的代码中，主菜单和其他菜单是分两个函数定义的（应该可以合并在一起，这里就没去弄了）

先定义主菜单：

setMenu:function(){ var oThis = this var ul_tag = document.createElement('ul') for(var m_idx = 0;m_idx<this.menus.length;m_idx++){ var _menu = this.menus[m_idx] var li_tag = document.createElement('li') li_tag.className = 'main_menu' li_tag.innerHTML = "<a href="#" mce_href="#">"+_menu.txt+"</a>" this.setChild(li_tag,_menu) bindEvent(li_tag,'mouseover',this.showMenu(li_tag)) bindEvent(li_tag,'mouseout',this.hideMenu(li_tag)) ul_tag.appendChild(li_tag) } document.body.appendChild(ul_tag) }

其他菜单的定义：

setChild:function(li_tag,menu){ //设置子菜单 var menu = menu var child_menu = menu.menu if(typeof child_menu=="undefined") return; var c_ul_tag = document.createElement('ul') c_ul_tag.style.display = 'none' switch(menu.position){ case 'down': c_ul_tag.style.left = '0px'; c_ul_tag.style.top = '40px' break; case 'right': c_ul_tag.style.left = '121px' c_ul_tag.style.top = '0px' break; case 'left': c_ul_tag.style.left = '-121px' c_ul_tag.style.top = '0px' break; case 'top': c_ul_tag.style.left = '0px' c_ul_tag.style.top = '-41px' break; } for(var i = 0;i<child_menu.length;i++){ var _menu = child_menu[i] var c_li_tag = document.createElement('li') c_li_tag.innerHTML = "<a href="#" mce_href="#">"+_menu.txt+"</a>" bindEvent(c_li_tag,'mouseover',this.showMenu(c_li_tag)) bindEvent(c_li_tag,'mouseout',this.hideMenu(c_li_tag)) c_ul_tag.appendChild(c_li_tag) if((typeof _menu.menu!="undefined")&&_menu.menu.length>0){ //如果有子菜单，设置子菜单 this.setChild(c_li_tag,_menu) } } li_tag.appendChild(c_ul_tag) }

菜单定义好，最后就是控制菜单的显隐了：

showMenu:function(li_tag){ return function(){ var ul = li_tag.getElementsByTagName('ul')[0] if(typeof ul=='undefined') return; ul.style.display = 'block' } }, hideMenu:function(li_tag){ return function(){ var ul = li_tag.getElementsByTagName('ul')[0] if(typeof ul=='undefined') return; ul.style.display = 'none' } }

if(typeof ul=='undefined') return; 如果没有子菜单的话，就返回

完整代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> menu page </TITLE> <mce:style></mce:style><style mce_bogus="1">ul{list-style-type:none;padding:0px;margin-left:0px;position:absolute} li{display:block; width:120px; height:40px; line-height:40px; border:1px solid #fff; border-width:1px 1px 0 0; padding:0px; text-align:center; margin-left:0px; position:relative; } li a:link,li a:visited{ display:block !important; display:inline; width:120px; height:40px; color:#000; text-decoration:none; background:#c5dbf2; } li a:hover{ color:#fff; text-decoration:none; background:#6b839c } li.main_menu{float:left;}</style> <mce:script type="text/javascript"></mce:script> </HEAD> <BODY> <mce:script type="text/javascript"></mce:script> </BODY> </HTML>