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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
简单的JS多重继承示例
Mar 13 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
Vue触发式全局组件构建的方法
Nov 28 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
微信小程序加载机制及运行机制图解
Nov 27 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
PHP 缓存实现代码及详细注释
2010/05/16 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
Python smallseg分词用法实例分析
2015/05/28 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
销售提升方案
2014/06/07 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
房屋转让协议书
2014/10/18 职场文书
Mysql Show Profile
2021/04/05 MySQL
Vue和Flask通信的实现
2021/05/19 Vue.js
解析redis hash应用场景和常用命令
2021/08/04 Redis