JS+CSS实现的竖向简洁折叠菜单效果代码


Posted in Javascript onOctober 22, 2015

本文实例讲述了JS+CSS实现的竖向简洁折叠菜单效果代码。分享给大家供大家参考,具体如下:

这是一款JS+CSS竖向简洁的折叠菜单,支持三级分类,红色垂直型,个人感觉非常棒,希望大家喜欢。

运行效果截图如下:

JS+CSS实现的竖向简洁折叠菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS+Js竖向简洁的折叠菜单</title>
<style>
#outer {width:504px; height:510px; position:relative; background:url(images/red_frog.jpg) no-repeat 0px 160px;}
#outer #content {clear:left; position:absolute; left:230px; top:10px; width:250px; z-index:10;}
#menu {list-style-type:none; padding:0; margin:0; width:125px; position:absolute; top:70px; left:0; border:1px solid #fff; border-width:0 1px 1px; z-index:100;}
#menu ul {list-style-type:none; padding:0; margin:0; width:125px;}
#menu li {float:left; background:#657; position:relative; border-top:1px solid #fff;}
#menu li.sub {background:#d30;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:125px; text-decoration:none; cursor:pointer; font-weight:bold; text-indent:5px;}
#menu ul,
#menu li.click ul ul,
#menu li.click ul li.hover ul ul {display:none;}
#menu li.hover {color:#ff0; z-index:500;}
#menu li.click {color:#ff0;}
#menu li.click ul {display:block;}
#menu li.click ul li.hover ul, 
#menu li.click ul li.hover ul li.hover ul {display:block; position:absolute; left:110px; top:-1px; border:1px solid #fff; border-width:0 1px 1px;}
#menu li.click ul li.fly {background: #657 url(images/frog_arrow.gif) no-repeat top right;}
#menu li.click ul li.hover {background:#98a;}
#menu li.click ul li.hover ul li {background:#c60;}
#menu li.click ul li.hover ul li.hover ul li {background:#780; z-index:500;}
#menu li.click ul li.hover ul li.fly {background: #c60 url(images/frog_arrow.gif) no-repeat top right;}
#menu li.click ul li.hover ul li.hover {z-index:500; background:#fa4;}
#menu li.click ul li.hover ul li.hover a {color:#000;}
#menu li.click ul li.hover ul li.hover ul li.hover {background:#aa0;}
#menu li.click ul li.hover ul li.hover ul li.hover a {color:#fff;}
#outer img {display:block; float:right;}
#outer p {margin:0px; padding:17px 0 0 0; color:#000; font-size:12px; font-family:arial, sans-serif; text-align:justify;}
</style>
<script type="text/javascript">
clickMenu = function(menu) {
  var getEls = document.getElementById(menu).getElementsByTagName("LI");
  var getAgn = getEls;
  for (var i=0; i<getEls.length; i++) {
      getEls[i].onclick=function() {
        for (var x=0; x<getAgn.length; x++) {
        getAgn[x].className=getAgn[x].className.replace("unclick", "");
        getAgn[x].className=getAgn[x].className.replace("click", "unclick");
        }
      if ((this.className.indexOf('unclick'))!=-1) {
        this.className=this.className.replace("unclick", "");;
        }
        else {
        this.className+=" click";
        }
      }
      getEls[i].onmouseover=function() {
        this.className+=" hover";
      }
      getEls[i].onmouseout=function() {
        this.className=this.className.replace("hover", "");
      }
    }
  }
</script>
</head>
<body onload="clickMenu('menu')">
<div id="outer">
<ul id="menu">
  <li class="sub">Types
    <ul>
      <li><a href="#nogo">Indian</a></li>
      <li><a href="#nogo">韩国</a></li>
      <li class="fly"><a href="#nogo">美国</a>
        <ul>
          <li><a href="#nogo">朝鲜</a></li>
          <li class="fly"><a href="#nogo">南朝鲜</a>
            <ul>
              <li><a href="#nogo">西大街</a></li>
              <li><a href="#nogo">东大街</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#nogo">日本语</a></li>
      <li><a href="#nogo">简体中文</a></li>
    </ul>
  </li>
  <li class="sub">地区分布
    <ul>
      <li class="fly"><a href="#nogo">北京</a>
        <ul>
          <li><a href="#nogo">Hemiphractus</a></li>
          <li><a href="#nogo">Stefania</a></li>
        </ul>
      </li>
      <li class="fly"><a href="#nogo">河南</a>
        <ul>
          <li><a href="#nogo">Acris</a></li>
          <li><a href="#nogo">Anotheca</a></li>
          <li><a href="#nogo">Trachycephalus</a></li>
        </ul>
      </li>
      <li class="fly"><a href="#nogo9">武汉</a>
        <ul>
          <li><a href="#nogo">Boophis</a></li>
          <li><a href="#nogo">Callixalus</a></li>
          <li><a href="#nogo">Chiromantis</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="sub">References
    <ul>
      <li><a href="#">Wikipedia</a></li>
      <li><a href="#nogo11">Encyclopedia</a></li>
    </ul>
  </li>
  <li class="sub">链接
    <ul>
      <li><a href="#nogo">脚本下载</a></li>
      <li><a href="#nogo">百度搜索</a></li>
    </ul>
  </li>
</ul>
</div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
js实现select下拉框菜单
Dec 08 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
浅谈node.js中async异步编程
Oct 22 #Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 #Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 #Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 #Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 #Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 #Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 #Javascript
You might like
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
php生成短网址示例
2014/05/05 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
php微信开发接入
2016/08/27 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
JavaScript的parseInt 进制问题
2009/05/07 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
JavaScript多种图形实现代码实例
2020/06/28 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
python妹子图简单爬虫实例
2015/07/07 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
捷克玩具商店:Bambule
2019/02/23 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
大学生旅游业创业计划书
2014/01/29 职场文书
音乐教学随笔感言
2014/02/19 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
销售人员工作自我评价
2014/09/21 职场文书
离职信范文
2015/06/23 职场文书
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL