javascript 可控速度的上下拉菜单
样式部分
<style type="text/css">
*{ margin:0; padding:0; border:none; background:none;}
ul,li{ list-style:none;}
.side-nav-list{ width:200px; background:#eee; border:#666 1px solid; padding:5px 10px; margin:20px auto;}
.side-nav-list li{ border-bottom:#666 1px solid;}
.side-nav-list-2,.side-nav-list-3{ display:none;}
.side-nav-list-2 li{ border-bottom:#999 1px dotted;}
.side-nav-list-3 li{ border-bottom:none;}
.side-nav-list .side-nav-list-2 a{ text-indent:1em;}
.side-nav-list .side-nav-list-3 a{ text-indent:2em;}
.side-nav-list a,.side-nav-list .slide-btn{color:#000; display:inline-block; height:24px; line-height:24px; overflow:hidden;}
.side-nav-list a{ text-decoration:none; width:80%; font-size:12px;}
.side-nav-list a:hover{ color:#C00;}
.side-nav-list .slide-btn{width:20%;text-align:center; cursor:pointer; font-weight:bold; font-size:16px;}
.side-nav-list .active-li{ background:#FFF; font-weight:bold;}
</style>
HTML部分
<ul class="side-nav-list" id="side-nav-list">
<li><a href="javascript:;">家居灯具</a><span class="slide-btn">+</span>
<ul class="side-nav-list-2">
<li><a href="slide.htm">客厅</a><span class="slide-btn">+</span>
<ul class="side-nav-list-3">
<li><a href="http://test.php?id=12">吸顶灯<span>(146)</span></a></li>
<li><a href="http://test.php?id=13">落地灯<span>(146)</span></a></li>
<li><a href="http://test.php?id=14">台灯<span>(146)</span></a></li>
<li><a href="http://test.php?id=15">壁灯<span>(146)</span></a></li>
<li><a href="http://test.php?id=16">筒灯<span>(146)</span></a></li>
<li><a href="http://test.php?id=17">天花灯<span>(146)</span></a></li>
</ul>
</li>
<li><a href="http://test.php?id=7">卧室</a><span class="slide-btn">+</span>
<ul class="side-nav-list-3">
<li><a href="http://test.php?id=23">吸顶灯<span>(146)</span></a></li>
<li><a href="http://test.php?id=24">落地灯<span>(146)</span></a></li>
<li><a href="http://test.php?id=25">台灯<span>(146)</span></a></li>
<li><a href="http://test.php?id=26">壁灯<span>(146)</span></a></li>
<li><a href="http://test.php?id=27">镜前灯<span>(146)</span></a></li>
<li><a href="http://test.php?id=28">天花灯<span>(146)</span></a></li>
</ul>
</li>
<li><a href="http://test.php?id=8">儿童房</a><span class="slide-btn">+</span>
<ul class="side-nav-list-3">
<li><a href="http://test.php?id=29">吸顶灯<span>(146)</span></a></li>
<li><a href="http://test.php?id=30">落地灯<span>(146)</span></a></li>
<li><a href="http://test.php?id=31">儿童护眼灯<span>(146)</span></a></li>
<li><a href="http://test.php?id=32">吊线灯<span>(146)</span></a></li>
</ul>
</li>
<li><a href="http://test.php?id=10">厨卫</a><span class="slide-btn">+</span>
<ul class="side-nav-list-3">
<li><a href="http://test.php?id=37">厨卫吸顶灯<span>(146)</span></a></li>
</ul>
</li>
<li><a href="http://test.php?id=11">阳台</a><span class="slide-btn">+</span>
<ul class="side-nav-list-3">
<li><a href="http://test.php?id=38">吸顶灯<span>(146)</span></a></li>
<li><a href="http://test.php?id=39">感应灯<span>(146)</span></a></li>
</ul>
</li> </ul>
</li>
<li><a href="javascript:;">光源电器</a><span class="slide-btn">+</span>
<ul class="side-nav-list-2">
<li><a href="http://test.php?id=42">3U灯</a><span class="slide-btn">+</span>
<ul class="side-nav-list-3">
</ul>
</li>
</ul>
</li>
</ul> <script type="text/javascript" src="slide.js"></script>
<script type="text/javascript">
var slideA = sideNavList.getElementsByTagName('a');
var lhref = location.href;
var ids = lhref.match(/id=\d+/);
if(ids){
for(var i=0; i < slideA.length; i++){
var tlink = slideA[i].href.match(/id=\d+/);
if(tlink && (tlink[0] === ids[0]) ){
var pn = slideA[i].parentNode.parentNode;
if(pn.tagName.toLowerCase()=='ul'){
show_nav_sel(pn);
}
slideA[i].parentNode.className = 'active-li';
}
}
} function show_nav_sel(o){
var p_t = o.parentNode.parentNode;
if(p_t.tagName.toLowerCase()=='ul'){
arguments.callee(p_t);
}
var pen = getPrevEleNode(o);
if(pen!=null && pen.tagName.toLowerCase()=='span' && pen.className=='slide-btn'){
pen.click();
}
} </script>
Slide.js部分
// JavaScript Document var sideNavList = document.getElementById('side-nav-list'),
sideSpanBtn = sideNavList.getElementsByTagName('span'),
spanLength = sideSpanBtn.length,
i = 0;
for(; i < spanLength ; i++){
if(sideSpanBtn[i].className == 'slide-btn'){
var next_ul = getNextEleNode(sideSpanBtn[i]);
var ul_in_li_length = next_ul && next_ul.tagName.toLowerCase()=='ul' ? next_ul.getElementsByTagName('li').length : 0;
if(ul_in_li_length){
sideSpanBtn[i].onclick = function(){ul_slide(this,'ul');}
}else{
sideSpanBtn[i].style.display = 'none';
}
}
}
function ul_slide(o,s_tag){
o.innerHTML = o.innerHTML=='+'?'-':'+';
var n_s = getNextEleNode(o);
if(!n_s){return false;}
if(n_s.tagName.toLowerCase()==s_tag){
var n_s_display = n_s.style.display;
if(n_s_display =='none' || !n_s_display || (n_s_display=='block' && !n_s.offsetHeight)){
slideDown(n_s,500);
}else{
slideUp(n_s,500);
}
}
} function getNextEleNode(n){
var x=n.nextSibling;
while ( x!=null && x.nodeType!=1){
x=x.nextSibling;
}
return x;
} function getPrevEleNode(n){
var x=n.previousSibling;
while ( x!=null && x.nodeType!=1){
x=x.previousSibling;
}
return x;
} function slideDown(o,t){
o.style.display = 'block';
o.style.overflow = 'hidden';
var h = o.scrollHeight;
if(h>0){
var m = h / t * 10;
set_slide_down(o,h,m,t,1);
}
} function slideUp(o,t){
var h = o.scrollHeight;
if(h>0){
var m = h / t * 10;
set_slide_up(o,h,m,t,1);
}
} function set_slide_down(o,h,m,t,n){
if( m * n < h ){
o.style.height = (m*n)+'px';
setTimeout(function(){set_slide_down(o,h,m,t,n+1)},1);
}else{
o.style.height = "auto";
}
} function set_slide_up(o,h,m,t,n){
if( ( h-( m * n ) ) > 0 ){
o.style.height = h-(m*n)+'px';
setTimeout(function(){set_slide_up(o,h,m,t,n+1)},1);
}else{
o.style.height = '0px';
} }
javascript 可控速度的上下拉菜单的更多相关文章
- JavaScript 多级联动浮动(下拉)菜单 (第二版)
JavaScript 多级联动浮动(下拉)菜单 (第二版) 上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...
- 第一百三十二节,JavaScript,封装库--下拉菜单
JavaScript,封装库--下拉菜单 封装库,增加了3个方法 shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码) ...
- JavaScript+CSS+DIV实现下拉菜单示例
<!DOCTYPE html> <html> <head> <title>下拉菜单示例</title> <script languag ...
- (JavaScript插件——下拉菜单)
前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html 本文主要来学习一下JavaScrip ...
- Bootstrap学习js插件篇之下拉菜单
案例 通过此插件可以为几乎所有东西添加下拉菜单,包括导航条.标签页.胶囊式按钮. 用于导航条 导航条分为四个部分.第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列. <n ...
- 二、JavaScript语言--事件处理--DOM事件探秘--下拉菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Javascript版选择下拉菜单互移且排序
效果图如下: 代码如下: <html> <head> <title>Javascript版选择下拉菜单互移且排序</title> <meta ht ...
- javascript 横向下拉菜单演示
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><me ...
- 下拉菜单--JavaScript触发方法
1. $(function(){ $(".dropdown-toggle").one("click",function(){ $(this).dropdown( ...
随机推荐
- Mac系统安装Lua(转)
下载最新版的lua请点击,然后解压 运行“终端”进入到该文件夹下 ,主要是cd [文件夹名] 在“终端”输入 make macosx (回车) 在“终端”输入 make test (回车) 然后再输入 ...
- SecurityCRT输出日志重定向
使用CRT进行抓取log,因为工具本省缓冲区有限,导致,刷屏特别快,可能会错过一些log,可以对CRT的log进行增加输出源,或者说将输出到控制台的log再输出到本地文件中: 文件->点击(勾选 ...
- python ^M 产生的原因 及 lxml 如何获取text的原因
其实跟踪一下会发现,^M 是由于 /r/n 所造成的. article = dom_c.xpath('//td[@id="article_content"]//text()')co ...
- Java传递程序员变量
解决方案虽然简单,不过若是想不起来就麻烦啦,好方法往往简单. 1.如何在一个java文件叫A里用另一个java文件叫B的方法叫method()? ...
- UVA 1329 - Corporative Network
带权值的并查集的应用: 代码: #include<cstdio> #include<algorithm> #include<cmath> #include<c ...
- 浅析深究什么是SOA?(转)
http://blog.vsharing.com/fengjicheng/A1059842.html 阅读提示: 本文探讨SOA概念背后的核心内涵,如何将SOA落地的实务方法. 金蝶中间件作为全球领先 ...
- Java 引用 WeakReference
Reference 是一个抽象类,而 SoftReference,WeakReference,PhantomReference 以及 FinalReference 都是继承它的具体类.接下来我们来分别 ...
- Spark Streaming 结合FlumeNG使用实例
SparkStreaming是一个对实时数据流进行高通量.容错处理的流式处理系统,可以对多种数据源(如Kdfka.Flume.Twitter.Zero和TCP 套接字)进行类似map.reduce.j ...
- PHP 不安全文件权限漏洞
漏洞名称: PHP 不安全文件权限漏洞 CNNVD编号: CNNVD-201309-056 发布时间: 2013-09-09 更新时间: 2013-09-09 危害等级: 漏洞类型: 权限许可和 ...
- Win8/Win7系统下用IE11浏览器调试js脚本
作为一个web开发者,调试js脚本是工作中的一部分,但是并不是所有的浏览器都会很好的兼容js脚本的.随着win8系统的发布,ie11也慢慢进入了大家的视野,ie11的众多优点及新特性就不必多说了(全面 ...