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 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
JavaScript 学习笔记(六)
Dec 31 Javascript
使用js获取地址栏中传递的值
Jul 02 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
express框架下使用session的方法
Jul 31 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 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
Syphon 使用方法
2021/03/03 冲泡冲煮
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
详解python字节码
2018/02/07 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
python实现简单的文字识别
2018/11/27 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
生物技术专业毕业生求职信范文
2013/12/14 职场文书
市场开发与营销专业求职信
2013/12/31 职场文书
高中运动会广播稿
2014/01/21 职场文书
会计工作决心书
2014/03/11 职场文书
春节联欢会主持词
2014/03/24 职场文书
父母对孩子的寄语
2014/04/09 职场文书
校庆团日活动总结
2014/08/28 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python