當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

利用JavaScript实现简单的下拉菜单

發布時間：2025/3/17 javascript 30 豆豆

生活随笔收集整理的這篇文章主要介紹了利用JavaScript实现简单的下拉菜单小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近幾日，突然對Javascript非常興趣，就想用Javascript實現幾個經常都實現的特效，雖然對于javascript一直能夠做一些開發，但還是使用很少。

首先我想實現的就是一個下拉樣式的樹，在實現之前，我就想到結構一定要很簡單，我想將菜單的結構做成一個最簡單的結構樣式，經過約5個小時的奮斗，終于完成初步的實現，先將代碼貼下：

???

代碼 <!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>
????<title>Drop?menu</title>
????<style?type="text/css">
????????body
????????{
????????????font-size:?12px;
????????}
????????
????????.dropMenu
????????{
????????????background-color:?Red;
????????????height:?27px;
????????}
???????
????????.dropMenu?ul
????????{
????????????padding:?0px;
????????????margin:?0px;
????????}

????????.dropMenu?a
????????{????
????????????border:solid?1px?#00ff00;
????????????display:?block;
????????}
????????.dropMenu?ul?li
????????{
????????????list-style-type:?none;
????????????border:?solid?1px?#00ff00;
????????????float:?left;
????????????padding:?5px;
????????????cursor:hand;
????????}
????????.dropMenu?ul?ul
????????{
????????????background-color:red;
????????????width:?140px;
????????????display:?none;
????????????z-index:?10;
????????}

????????.dropMenu?ul?ul?li
????????{
????????????float:?none;
????????}
????</style>

????<script?language="javascript"?type="text/javascript">
????????function?openDropMenu(sender)?{
????????????var?nextNode?=?sender.nextSibling;
????????????var?dropMenu?=?sender.parentNode;

????????????//?隱藏所有的下拉列表；
????????????for?(var?i?=?0;?i?<?dropMenu.childNodes.length;?i++)?{
????????????????if?(dropMenu.childNodes[i].nodeName.toLowerCase()?==?'ul'?&&
????????????????????dropMenu.childNodes[i].style.display?==?'block')?{
????????????????????closeDropMenu(dropMenu.childNodes[i]);
????????????????}
????????????}

????????????if?(nextNode.nodeName.toLowerCase()?==?"ul")?{
????????????????nextNode.style.left?=?sender.offsetLeft;
????????????????nextNode.style.top?=?sender.offsetTop?+?sender.offsetHeight;
????????????????nextNode.style.position?=?"absolute";
????????????????nextNode.style.display?=?'block';
????????????}

????????????document.onclick?=?function()?{
????????????????document.onclick?=?'';
????????????????//alert(sender.innerText);
????????????????closeDropMenu(nextNode);????
????????????};
????????}
????????function?openDropSubMenu(sender)?{
????????????var?nextNode?=?sender.nextSibling;
????????????var?ulNode?=?sender.parentNode;
????????????
????????????for?(var?i?=?0;?i?<?ulNode.childNodes.length;?i++)?{
????????????????if?(ulNode.childNodes[i].nodeName.toLowerCase()?==?'ul')?{
????????????????????closeDropMenu(ulNode.childNodes[i]);
????????????????}
????????????}

????????????if?(nextNode?!=?null?&&?nextNode.nodeName.toLowerCase()?==?"ul")?{
?????????????//?nextNode.style.border?=?"solid?1px?#0000ff";
????????????????nextNode.style.position?=?"absolute";
????????????????nextNode.style.left?=?sender.offsetLeft?+?sender.offsetWidth;
????????????????nextNode.style.top??=?sender.offsetTop;????
????????????????nextNode.style.display?=?"block";
????????????}
????????}

????????//?關閉下接菜單
????????function?closeDropMenu(subMenu)?{
????????????if?(subMenu?==?null?||?subMenu.style.display?==?'none')?return;
????????????//?關閉子菜單
????????????for?(var?i?=?0;?i?<?subMenu.childNodes.length;?i++)?{
????????????????if?(subMenu.childNodes[i].nodeName.toLowerCase()?==?'ul')?{
????????????????????closeDropMenu(subMenu.childNodes[i]);
????????????????}
????????????}
????????????//?關閉當前菜單。
????????????subMenu.style.display?=?'none';
????????}
????</script>
</head>
<body>
????<h1>Drop?Menu?Example</h1>
????<div?class="dropMenu">
????????<ul>
????????????<li>Normal</li>
????????????<li?onmouseover="openDropMenu(this);">關于公司</li>
????????????<ul>
????????????????<li>Normal?Sub?MenuA</li>
????????????????<li?onmouseover="openDropSubMenu(this);"><a?href="http://www.g.cn"?>Google</a></li>
????????????????<ul>
????????????????????<li?onmouseover="openDropSubMenu(this);">二級子菜單AA</li>
????????????????????<li?onmouseover="openDropSubMenu(this);">二級子菜單AB</li>
????????????????????<ul>
????????????????????????<li?onmouseover="openDropSubMenu(this);">三級子菜單BA</li>
????????????????????????<li?onmouseover="openDropSubMenu(this);">三級子菜單BB</li>
????????????????????????<li?onmouseover="openDropSubMenu(this);">三級子菜單BC</li>
????????????????????????<ul>
????????????????????????????<li><a?href='http://www.baidu.com'>白度</a></li>
????????????????????????????<li>四級菜單</li>
????????????????????????????<li>四級菜單</li>
????????????????????????</ul>
????????????????????</ul>
????????????????</ul>
????????????????<li?onmouseover="openDropSubMenu(this);">關于一級子菜單B</li>
????????????????<ul>
????????????????????<li>二級子菜單BA</li>
????????????????????<li>二級子菜單BB</li>
????????????????????<li>二級子菜單BC</li>
????????????????</ul>
????????????????<li?onmouseover="openDropSubMenu(this);">關于一級子菜單C</li>
????????????????<ul>
????????????????????<li>二級子菜單CA</li>
????????????????????<li>二級子菜單CB</li>
????????????????????<li>二級子菜單CC</li>
????????????????????<li>二級子菜單CD</li>
????????????????</ul>
????????????????<li?onmouseover="openDropSubMenu(this);">關于一級子菜單D</li>
????????????????<ul>
????????????????????<li>二級子菜單DA</li>
????????????????????<li>二級子菜單DB</li>
????????????????????<li>二級子菜單DC</li>
????????????????????<li>二級子菜單DD</li>
????????????????????<li>二級子菜單DE</li>
????????????????</ul>
????????????????<li?onmouseover="openDropSubMenu(this);">關于一級子菜單E</li>
????????????????<ul>
????????????????????<li>二級子菜單EA</li>
????????????????????<li>二級子菜單EB</li>
????????????????????<li>二級子菜單EC</li>
????????????????????<li>二級子菜單ED</li>
????????????????</ul>
????????????</ul>
????????????<li?onmouseover="openDropMenu(this);">解決方案</li>
????????????<ul>
????????????????<li>解決方案一級子菜單A</li>
????????????????<ul>
????????????????????<li>二級子菜單AA</li>
????????????????????<li>二級子菜單AB</li>
????????????????</ul>
????????????????<li>解決方案一級子菜單B</li>
????????????????<ul>
????????????????????<li>二級子菜單BA</li>
????????????????????<li>二級子菜單BB</li>
????????????????????<li>二級子菜單BC</li>
????????????????</ul>
????????????????<li>解決方案一級子菜單C</li>
????????????????<ul>
????????????????????<li>二級子菜單CA</li>
????????????????????<li>二級子菜單CB</li>
????????????????????<li>二級子菜單CC</li>
????????????????????<li>二級子菜單CD</li>
????????????????</ul>
????????????????<li>解決方案一級子菜單D</li>
????????????????<ul>
????????????????????<li>二級子菜單DA</li>
????????????????????<li>二級子菜單DB</li>
????????????????????<li>二級子菜單DC</li>
????????????????????<li>二級子菜單DD</li>
????????????????????<li>二級子菜單DE</li>
????????????????</ul>
????????????????<li>解決方案一級子菜單E</li>
????????????????<ul>
????????????????????<li>二級子菜單EA</li>
????????????????????<li>二級子菜單EB</li>
????????????????????<li>二級子菜單EC</li>
????????????????????<li>二級子菜單ED</li>
????????????????</ul>
????????????</ul>
????????</ul>
????</div>
</body>
</html>本

本方法利用簡單的ul與li標簽實現菜單的結構，看起來非常自然，但還有一些問題，主要包括在以下方面：

??? 1.沒有實現在FireFox中顯示出同樣的效果；

??? 2.還沒有增加任何對菜單項目的CSS樣式；

??? 3.還想做成，只要在DIV中提供一個CSS樣式就能夠自動增加子項目的CSS樣式和JAVASCRIPT代碼，不在界面中做更做設置，簡化界面的設置；

詳細功能現在沒有時間來進行說明，先將代碼貼上；

轉載于:https://www.cnblogs.com/jeffwoot/archive/2010/05/30/javascript.html

總結

以上是生活随笔為你收集整理的利用JavaScript实现简单的下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： msmq发送速度的测试
下一篇： WCF服务编程设计规范(9):中文、中英