自动收缩的JS+CSS三级折叠导航菜单

最新推荐文章于 2022-07-06 13:56:36 发布
最新推荐文章于 2022-07-06 13:56:36 发布
阅读量4.4k 收藏 4
点赞数
分类专栏： UI设计 javascript
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>青年励志网三级菜单</title>
<style>
*,body,ul,h1,h2{ margin:0; padding:0; list-style:none;}
body{font:12px "宋体"; padding-top:20px;}
a{ color:#FFF;border:none;}
#menu { width:200px; margin:auto;}
 #menu h1 { font-size:12px; border:#0074BD 1px solid; margin-top:1px;  background-


color:#0080D0;}
 #menu h2 { font-size:12px; border:#003352 1px solid; border-top-color:#FFF; background-


color:#025D94;}
 #menu ul { padding-left:0px; height:100px;border:#E7E7E7 1px solid; border-


top:none;overflow:auto;}
 #menu a { display:block; padding:5px 0 3px 10px; text-decoration:none; overflow:hidden;}
 #menu a:hover{ color:#FFF; background:#064267;}
 #menu .no {display:none;}
 #menu .h1 a{color:#FFF;background-color:#004876;}
 #menu .h2 a{color:#004876; background:#FFF;}
 #menu .h2 a:hover{ color:#004876; background:#FFF;}
 #menu  h1 a{color:#FFF;}
</style>
<script language="JavaScript">
<!--//
function ShowMenu(obj,n){
 var Nav = obj.parentNode;
 if(!Nav.id){
  var BName = Nav.getElementsByTagName("ul");
  var HName = Nav.getElementsByTagName("h2");
  var t = 2;
 }else{
  var BName = document.getElementById(Nav.id).getElementsByTagName("span");
  var HName = document.getElementById(Nav.id).getElementsByTagName("h1");
  var t = 1;
 }
 for(var i=0; i<HName.length;i++){
  HName[i].innerHTML = HName[i].innerHTML.replace("-","+");
  HName[i].className = "";
 }
 obj.className = "h" + t;
 for(var i=0; i<BName.length; i++){if(i!=n){BName[i].className = "no";}}
 if(BName[n].className == "no"){
  BName[n].className = "";
  obj.innerHTML = obj.innerHTML.replace("+","-");
 }else{
  BName[n].className = "no";
  obj.className = "";
  obj.innerHTML = obj.innerHTML.replace("-","+");
 }
}
//-->
</script>


<style type="text/css">
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
</style>
</head>
<body>
<div id="menu">
 <h1><a href="#">首页</a></h1>
 <h1 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">青年财经<b 


class="caret"></b></a></h1>
 <span class="no">
  <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">财富人物


</a></a></h2>
  <ul class="no">
   <a href="javascript:void(0)">人物志</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">轻松理财</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">一级菜单A_0</a>
   <a href="javascript:void(0)">一级菜单A_1</a>
   <a href="javascript:void(0)">一级菜单A_2</a>
   <a href="javascript:void(0)">一级菜单A_3</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">每日财经</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">一级菜单A_0</a>
   <a href="javascript:void(0)">一级菜单A_1</a>
   <a href="javascript:void(0)">一级菜单A_2</a>
  </ul>
 </span>
        
 <h1 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">经典语录<b 


class="caret"></b></a></h1>
 <span class="no">
  <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">人物自传</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">二级菜单B_0</a>
   <a href="javascript:void(0)">二级菜单B_1</a>
   <a href="javascript:void(0)">二级菜单B_2</a>
   <a href="javascript:void(0)">二级菜单B_3</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">励志语录</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">二级菜单B_0</a>
   <a href="javascript:void(0)">二级菜单B_1</a>
   <a href="javascript:void(0)">二级菜单B_2</a>
   <a href="javascript:void(0)">二级菜单B_3</a>
   <a href="javascript:void(0)">二级菜单B_9</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">哲理感悟</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">二级菜单B_0</a>
   <a href="javascript:void(0)">二级菜单B_1</a>
   <a href="javascript:void(0)">二级菜单B_2</a>
   <a href="javascript:void(0)">二级菜单B_3</a>
   <a href="javascript:void(0)">二级菜单B_9</a>
  </ul>
 </span>
    
 <h1 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">创业指南<b 


class="caret"></b></a></h1>
 <span class="no">
  <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">领导力</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">三级菜单C_0</a>
   <a href="javascript:void(0)">三级菜单C_1</a>
   <a href="javascript:void(0)">三级菜单C_2</a>
   <a href="javascript:void(0)">三级菜单C_9</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">职场指南</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">三级菜单C_0</a>
   <a href="javascript:void(0)">三级菜单C_1</a>
   <a href="javascript:void(0)">三级菜单C_2</a>
   <a href="javascript:void(0)">三级菜单C_3</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">互联网创业</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">三级菜单C_0</a>
   <a href="javascript:void(0)">三级菜单C_1</a>
   <a href="javascript:void(0)">三级菜单C_2</a>
   <a href="javascript:void(0)">三级菜单C_3</a>
  </ul>
 </span>
    
 <h1 onClick="javascript:ShowMenu(this,3)"><a href="javascript:void(0)">励志名言<b 


class="caret"></b></a></h1>
 <span class="no">
  <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">励志视频</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">四级菜单D_0</a>
   <a href="javascript:void(0)">四级菜单D_1</a>
   <a href="javascript:void(0)">四级菜单D_2</a>
   <a href="javascript:void(0)">四级菜单D_3</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">励志歌曲</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">四级菜单D_0</a>
   <a href="javascript:void(0)">四级菜单D_1</a>
   <a href="javascript:void(0)">四级菜单D_2</a>
   <a href="javascript:void(0)">四级菜单D_3</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">励志博文</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">四级菜单D_0</a>
   <a href="javascript:void(0)">四级菜单D_1</a>
   <a href="javascript:void(0)">四级菜单D_2</a>
   <a href="javascript:void(0)">四级菜单D_3</a>
  </ul>
 </span>
</div>
</body>
</html>
wzjemb
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现移动端可折叠导航菜单（现代都市风）
10-15
主要介绍了JS如何实现移动端可折叠导航菜单，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
jquery实现点击<ul>，相应的<li>折叠
wangyan_z的博客
08-09 3537
{% extends "./report.html"%} {%load staticfiles%} {%block jstable%} &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javasc...
创建基于JavaScript的水平导航下拉菜单
热门推荐
Sarkuya的编程园地
10-31 1万+
在Web应用上创建一个下拉菜单，可以有多种方法。有些基于CSS来实现，有些基于JavaScript来实现。这两种方法各有优劣。基于CSS的实现只使用CSS技术，比较好掌握，但不容易应付比较复杂，如多级菜单的情况，而且往往还需要采用各种hacks来应付不同浏览器的怪癖。而基于JavaScript的实现，原则上还需要CSS来负责页面的表现，但使用JavaScript来与用户交互。应该说，CSS属于表现
html左侧三级折叠菜单代码,js 三级折叠菜单代码效果
weixin_29109553的博客
05-31 295
提示：您可以先修改部分代码再运行 *,body,ul,li,h1,h2{ margin:0; padding:0; list-style:none;} body{font:12px "宋体"; padding-top:20px;} #menu { width:200px; margin:auto;} #menu h1 { cursor:pointer; color:#FFF; font...
实现简单的三级导航
weixin_63477921的博客
07-06 6433
实现简单的三级导航
三级菜单的展开与收起功能
java_zhaoyanli的专栏
09-08 4394
HTML： 磁带生成单位 科委 农委 纪委
javaScript实现导航的折叠和弹出功能小结
qq_40494873的博客
03-27 1526
一、功能介绍 JS实现垂直导航栏的折叠和弹出，实现功能如下： 同一个导航可以反复折叠与弹出 同一个导航不可以反复折叠与弹出 二、实现方式 1.两种思路 本次鼠标点击某一级导航，展开该一级导航下的二级导航，然后关闭上一次的二级导航 鼠标点击某一级导航，先通过遍历关闭所有的二级导航，然后打开当前一级导航下的二级导航 2.两种实现方式 通过CSS样式属性，display=none（折叠）/dispaly=block（展开）实现二级导航的折叠与弹出； 通过块状元素的高度：height:0px/200px;
原生js实现导航栏切换和点击更改折叠高度
m0_55173487的博客
06-27 568
原生js实现导航栏切换和点击更改折叠高度： 导航栏：点击可以切换内容；折叠按钮：根据点击次数来实现折叠的范围
利用Bootstrap 响应式导航栏
TXW6666的博客
05-10 1896
导航栏是网页功能，在 Bootstrap 中。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。 先上两张图看看PC 移动端 创建响应式导航栏 向 < nav> 标签添加 class .navbar、.navbar-default。 向上面的元素添加 role=“navigation”，有助于增加可访问性。 向 < div> 元素添加一个标题 class .navbar-
Jquery UI accordion手风琴菜单
sqxyq的专栏
01-17 2951
jQuery的一些学习心得 http://jquery.bassistance.de/accordion/demo/?p=1.1.1   示例   最近学习jQuery,总结了一些心得。 1.引用 需要放在第一引用； 2.脚本的引用需要写,不能够写; 3.当调用jQuery的 Plugin 的时候，需要在 jQuery90.ready.function( '需要调用的
CSS+js无限级折叠导航菜单
05-12
内容索引:脚本资源,CSS特效,无限级菜单,多级菜单　　一个无限级分类的折叠导航菜单，大部分是用CSS实现，结合JavaScript技术，使这款菜单更加实用。压缩包内含有两上示例，一个横向菜单、一个竖向菜单，方便大家根据实际情况分开使用。
js实现简单折叠、展开菜单的方法
11-23
本文实例讲述了js实现简单折叠、展开菜单的方法。分享给大家供大家参考。具体如下： 这里介绍的是意乱会折叠、展开的菜单导航栏，很老时候写的，CSS没有做美化，如果想用的朋友就自己美化吧。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-simple-hidden-show-menu-codes/ 具体代码如下： <html> [removed] function show(c_Str) {if(document.all(c_Str).style.display=='none') {document.all(c_Str).style.dis
JavaScript实现的3级横向导航菜单源码
05-18
JavaScript实现的3级横向导航菜单源码
【JavaScript源代码】js+css实现三级导航菜单.docx
12-30
　本文实例为大家分享了js+css实现三级导航菜单的具体代码，供大家参考，具体内容如下　导航菜单hover事件用css实现相对容易，只需要将透明度更改即可，如果想要菜单有一个渐变的效果，然而可惜的是transition并不...
js+div+css下拉导航菜单完整代码分享
11-28
下拉菜单 js+div+css下拉导航菜单完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...css+div+js下拉菜单导航--柯...
js+css3下划线文字导航菜单特效
06-24
js+css3下划线文字导航菜单特效是一款个性的网站导航菜单，鼠标经过显示下划线效果，还可以改变颜色。
JavaScript+CSS实现的可折叠二级菜单实例
10-22
主要介绍了JavaScript+CSS实现的可折叠二级菜单,以完整实例形式分析了JavaScript基于页面元素节点及样式的动态操作实现折叠菜单的相关技巧,需要的朋友可以参考下
仿CmsEasy网站横向二级JS+CSS导航菜单
06-06
渐变显示的二级横向下拉菜单
JS+CSS实现六级网站导航主菜单效果
10-23
主要介绍了JS+CSS实现六级网站导航主菜单效果,涉及JavaScript遍历页面元素及动态修改css属性的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JS+CSS打造三级折叠菜单，自动收缩其它级 js
最新发布
05-30
<li><a href="#">三级菜单1</a></li> <li><a href="#">三级菜单2</a></li> <li><a href="#">三级菜单3</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值