JS 实现折叠式菜单

最新推荐文章于 2022-12-05 20:31:59 发布
最新推荐文章于 2022-12-05 20:31:59 发布
阅读量475 收藏
点赞数
分类专栏： Web前端 文章标签： 百度 电子商务 浏览器 搜索引擎
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JAVAZHICHIZHE/article/details/83678163
版权
最近在做一个网站系统， 参考网站上面有一个折叠式的菜单， 觉得好玩查看了一下它的源代码学习了一个。

以下是我的源代码：

<html>

<head>

<title>折叠式菜单</title>
<style type="text/css">
<!--
/*设置菜单样式*/
.menuHead{font-weight: bold; font-size : larger ; background-color : #9999ff ;}
.menuChoices{background-color:#cc99ff; width : 180px ;}
.menu a{color:#000000; text-decoration : none ;}
.munu a:hover{text-decoration:underline;}
/*菜单定位*/
#menu1 {position:absolute; top : 80px ; left : 10px ; width : 200px ;}
#menu2 {position:absolute; top : 80px ; left : 230px ; width : 200px ;}
#menu3 {position:absolute; top : 80px ; left : 450px ; width : 180px ;}
-->
</style>
<script type="text/javascript">
<!--
(document.getElementById ? DOMCapable=true :DOMCapable=false);
function hide(menuName){
if(DOMCapable){ //仅对DOM浏览器隐藏菜单
var theMenu = document.getElementById(menuName+"choices");
theMenu.style.visibility='hidden';
}
}
function show(menuName){
if(DOMCapable){
var theMenu = document.getElementById(menuName+"choices");
theMenu.style.visibility='visible';
}
}
//-->
</script>
</head>

<body>
<center><h1>折叠式下拉菜单</h1></center>
<!-- 使用onmouseover和mouseout来控制菜单显示和隐藏-->
<div id="menu1" class="menu" οnmοuseοver="show('menu1');" οnmοuseοut="hide('menu1');">
<!--显示菜单-->
<div class="menuHead" >搜索引擎站点</div>
<div id="menu1choices" class="menuChoices">
<a href="http://www.sina.com">新浪<br>
<a href="http://www.sina.com">新浪<br>
<a href="http://www.sina.com">新浪<br>
<a href="http://www.sina.com">新浪<br>
<a href="http://www.sina.com">新浪<br>
</div>
</div>
<!--使用onmouseover和mouseout来控制菜单显示和隐藏-->
<div id="menu2" class="menu" οnmοuseοver="show('menu2');" οnmοuseοut="hide('menu2');">
<div class="menuHead" >电子商务站点</div>
<div id="menu2choices" class="menuChoices">
<a href="http://www.baidu.com">百度<br>
<a href="http://www.sina.com">百度<br>
<a href="http://www.sina.com">百度<br>
<a href="http://www.sina.com">百度<br>
<a href="http://www.sina.com">百度<br>
</div>
</div>

<!--使用onmouseover和mouseout来控制菜单显示和隐藏-->
<div id="menu3" class="menu" οnmοuseοver="show('menu3');" οnmοuseοut="hide('menu3');">
<div class="menuHead" >教务站点</div>
<div id="menu3choices" class="menuChoices">
<a href="http://www.baidu.com">雅虎<br>
<a href="http://www.sina.com">雅虎<br>
<a href="http://www.sina.com">雅虎<br>
<a href="http://www.sina.com">雅虎<br>
<a href="http://www.sina.com">雅虎<br>
</div>
</div>

<script type="text/javascript">
<!--
if(DOMCapable){ //不对JS以及旧版本浏览器隐藏菜单
hide("menu1");
hide("menu2");
hide("menu3");
}
//-->
</script>
</body>

</html>
JAVAZHICHIZHE
关注
专栏目录
JS 折叠菜单
sinat_16664531的专栏
04-12 362
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-a...
js实现折叠菜单方法一（js）
qq_45020437的博客
05-29 2088
js实现折叠菜单方法一（js） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; ...
JS折叠菜单
weixin_34117522的博客
11-03 182
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
js折叠菜单
の楓葉ぱ飄淚
12-06 435
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">       New Document    //菜单隐藏与显示  function SwitchMenu(obj){   if(document.getElementById){   var el
js实现精致折叠菜单
07-30
<head> <SCRIPT src="images/tree_naviIndex.js" type=text/javascript></SCRIPT> <style> #mainLeft { FONT-SIZE: 12px; FLOAT: left; WIDTH: 218px; HEIGHT: auto; BACKGROUND-COLOR: #f2f6fb;padding:10px 0px 10px 5px;margin:0px; } #mainLeft li A { width:150px; COLOR: #263d4f; TEXT-DECORATION: none; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; } #mainLeft li A:hover { COLOR: #ff6500; TEXT-DECORATION: underline } #mainLeft UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none } #mainLeft UL LI { MARGIN: 0px; LIST-STYLE-TYPE: none } #mainLeft ul li:not(p) { clear: both; } #mainLeft ul li:not(p) a { max-width:130px; float: left; } #mainLeft ul li:not(p):after { content: "..."; float: left; width: 10px; padding-left:2px; color: #000; } </style> </head> <body> <DIV id=mainLeft> <DIV id=room0><IMG src="images/root.gif" align=absMiddle> <A href="http://bbs.big-bit.com/">技术论坛首页</A> </DIV> <DIV id=room5><IMG id=minus_5 onclick=showRoom(5); src="images/_minus1.gif" align=absMiddle><IMG id=folderOpen_5 src="images/folderopen.gif" align=absMiddle> <A onclick=showRoom(5); href="#">磁性元器件研发及应用技术区</A></DIV> <DIV id=file5 style="DISPLAY: block"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=118">电源供应器技术</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=104">电子变压器技术</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=115">电感与线圈技术</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=116">磁性材料、配件、辅助材料技术</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=141">生产、品质、制程与企业管理</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=120">紧急求助区</A> </LI> </UL> </DIV> <DIV id=room10><IMG id=minus_10 onclick=showRoom(10); src="images/_minus1.gif" align=absMiddle><IMG id=folderOpen_10 src="images/folderopen.gif" align=absMiddle> <A onclick=showRoom(10); href="#">资料上传下载区</A></DIV> <DIV id=file10 style="DISPLAY: block"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=106">电源供应器资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=117">电子变压器资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=119">电感与线圈资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=134">磁性材料与配件、辅助材料资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=135">安规、标准资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=142">生产、品质、制程与企业管理资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=144">磁性元器件应用领域资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=143">电子工程师必备知识</A> </LI> </UL> </DIV> <DIV id=room6><IMG src="images/_minus1.gif" name="minus_6" align=absMiddle id=minus_6 onclick=showRoom(6);><IMG src="images/folderopen.gif" name="folderOpen_6" align=absMiddle id=folderOpen_6> <A onclick=showRoom(6); href="#">原创精华帖展示区</A></DIV> <DIV id=file6 style="DISPLAY: block"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=137">电源供应器精华<SPAN style="COLOR: #ff6500">[新]</SPAN></A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=138">电子变压器精华<SPAN style="COLOR: #ff6500">[新]</SPAN></A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=139">电感与线圈精华<SPAN style="COLOR: #ff6500">[新]</SPAN></A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=140" target=_blank>磁性材料精华<SPAN style="COLOR: #ff6500">[新]</SPAN></A> </LI> </UL> </DIV> <DIV id=room3><IMG id=plus_3 onclick=showRoom(3); src="images/_plus1.gif" align=absMiddle><IMG id=folder_3 src="images/folder.gif" align=absMiddle> <A onclick=showRoom(3); href="#">休闲灌水</A></DIV> <DIV id=file3 style="DISPLAY:none"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=131">企业评说</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=128">市场讨论</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=110">职场心情</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=109">自由天空</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=133">供求合作</A> </LI> </UL> </DIV> <DIV id=room7><IMG src="images/_minus1.gif" name="minus_7" align=absMiddle id=minus_7 onclick=showRoom(7);><IMG src="images/folderopen.gif" name="folderOpen_7" width="16" height="16" align=absMiddle id=folderOpen_7> <A onclick=showRoom(7); href="#">站务管理</A></DIV> <DIV id=file7 style="DISPLAY: block"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=43359">重要通知</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=38376">积分奖品兑换帖（修改）</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=32595">收集建议</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=38989">大比特论坛诚征版主！</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=44187">论坛版面调整和相关功能完善公告</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=49020">有关上传附件容量公告</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=37757">大比特论坛版主的权利与职责</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=43627">关于恶意刷分取消兑奖的公示</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=37758">版主奖罚制度</A> </LI> </UL> </DIV> <DIV id=file8> <UL> <LI><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=32595">建议信箱区</A> </LI> </UL> </DIV> </DIV> </body> 实现二级树状菜单，兼容性好。
JavaScript实现折叠式菜单
07-13
实现JavaScript折叠式菜单的基本步骤如下： 1. **HTML结构**：首先，我们需要创建一个HTML结构，包含各级菜单项。使用`<ul>`和`<li>`元素来表示菜单列表，同时添加额外的类或属性，如`data-toggle`，以便JavaScript...
纯html5折叠式导航菜单
06-05
折叠式菜单的核心在于JavaScript或CSS的交互效果，但在HTML5中，我们可以通过数据属性（data-*）来添加自定义信息，这些信息可以被JavaScript轻松读取和操作。例如，我们可以为每个折叠菜单项添加"data-expanded...
支持响应式手机端的JS手风琴折叠导航菜单特效
01-02
"支持响应式手机端的JS手风琴折叠导航菜单特效"是一个专为手机网站设计的导航菜单，利用JavaScript（可能结合jQuery库）和CSS技术，实现了一种优雅的交互效果。 首先，手风琴特效是一种常见的UI设计元素，它允许...
JS实现折叠式导航菜单.pdf
09-27
JS实现折叠式导航菜单.pdf
JS折叠菜单树形菜单
04-01
本例是JS+CSS的折叠式菜单，几年前刚学JS的时候写的了，我还是菜鸟的时候写的，希望对其他的菜鸟有所帮助，能用就用吧。
js折叠菜单效果
07-16
折叠菜单效果 js 折叠菜单 js折叠菜单 没有多余代码，纯粹的菜单折叠效果！
js实现可折叠展开的手风琴菜单效果
11-23
本文实例讲述了js实现可折叠展开的手风琴菜单效果。分享给大家供大家参考。具体如下： 这是一款可折叠展开的菜单，手风琴菜单，运用CSS与JavaScript技术实现的合拢与伸展的网页菜单，代码简洁，来自老外的代码作品，希望大家喜欢。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-hidden-show-sfq-style-menu-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht
JS实现移动端可折叠导航菜单（现代都市风）
10-15
在本文中，我们将深入探讨如何使用JavaScript来实现一个移动端可折叠导航菜单，具有现代都市风格。这个菜单设计简洁，响应迅速，适用于手机和平板设备，为用户提供流畅的导航体验。 首先，HTML结构是构建可折叠导航...
JavaScript-实例-折叠菜单
最新发布
深度安全实验室
12-05 757
JavaScript-实例-折叠菜单
js实现的折叠式菜单
wangyining070205的博客
06-11 4557
用js实现的折叠式菜单
JS实现折叠菜单
12-17 2057
var bV=parseInt(navigator.appVersion);var NS4=(document.layers) ? true : false;var IE4=((document.all)&&(bV>=4))?true:false;var ver4 = (NS4 || IE4) ? true : false;function expandIt(){return}function
JavaScript折叠菜单实现
煮酒客的博客
11-22 1316
- html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href
JavaScript可折叠弹出式菜单
清竹贮香
04-04 878
可折叠弹出式菜单 body {background-color: #FFF;color: #000;} div {margin-bottom: 10px; float:left} ul.menu {display: none;list-style-type: none;margin-top: 5px;} a.menuLink {font-size: 16px;font-we
使用jQuery实现的折叠菜单
"该资源是一个使用jQuery实现的折叠式菜单示例代码。" 在这个示例中，我们看到一个使用jQuery库来创建交互式折叠菜单的HTML和JavaScript代码。这个菜单结构是一个`<dl>`元素，其中包含多个`<dt>`（定义术语）和`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值