JS+CSS竖向折叠滑动菜单代码
代码简介:
折叠菜单,竖向展开,点击时缓慢展开,展开后可以作为菜单的栏目介绍等,还算不错。
代码内容:
<!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>JS+CSS竖向折叠滑动菜单代码_网页代码站(www.webdm.cn)</title>
</head>
<style type="text/css">
<!--
body,div,ul,li,p,h1,h2{ margin:0; padding:0; border:0; background:#FAFAFA; font-family:Arial, Helvetica, sans-serif,"宋体"}
body{ text-align:center; font-size:12px}
li{ list-style:none}
.rolinList{ width:402px; height:auto; margin:20px auto 0 auto; text-align:left}
.rolinList li{margin-bottom:1px;border:1px solid #DADADA}
.rolinList li h2{ width:380px; height:40px; background:#fff; font-size:14px; line-height:40px; padding-left:20px; color:#333; cursor:pointer}
.content{ height:150px;width:400px; background:#fff; background:#FAFAFA}
.content p{ margin:12px}
-->
</style>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
rolinTab("rolin")
}
function rolinTab(obj) {
var list = $(obj).getElementsByTagName("LI");
var state = {show:false,hidden:false,showObj:false};
for (var i=0; i<list.length; i++) {
var tmp = new rolinItem(list[i],state);
if (i == 0) tmp.pShow();
}
}
function rolinItem(obj,state) {
var speed = 0.0666;
var range = 1;
var interval;
var tarH;
var tar = this;
var head = getFirstChild(obj);
var content = getNextChild(head);
var isOpen = false;
this.pHidden = function() {
if (isOpen) hidden();
}
this.pShow = show;
var baseH = content.offsetHeight;
content.style.display = "none";
var isOpen = false;
head.onmouseover = function() {
this.style.background = "#EFEFEF";
}
head.onmouseout = mouseout;
head.onclick = function() {
this.style.background = "#EFEFEF";
if (!state.show && !state.hidden) {
if (!isOpen) {
head.onmouseout = null;
show();
} else {
hidden();
}
}
}
function mouseout() {
this.style.background = "#FFF"
}
function show() {
head.style.borderBottom = "1px solid #DADADA";
state.show = true;
if (state.openObj && state.openObj != tar ) {
state.openObj.pHidden();
}
content.style.height = "0px";
content.style.display = "block";
content.style.overflow = "hidden";
state.openObj = tar;
tarH = baseH;
interval = setInterval(move,10);
}
function showS() {
isOpen = true;
state.show = false;
}
function hidden() {
state.hidden = true;
tarH = 0;
interval = setInterval(move,10);
}
function hiddenS() {
head.style.borderBottom = "none";
head.onmouseout = mouseout;
head.onmouseout();
content.style.display = "none";
isOpen = false;
state.hidden = false;
}
function move() {
var dist = (tarH - content.style.height.pxToNum())*speed;
if (Math.abs(dist) < 1) dist = dist > 0 ? 1: -1;
content.style.height = (content.style.height.pxToNum() + dist) + "px";
if (Math.abs(content.style.height.pxToNum() - tarH) <= range ) {
clearInterval(interval);
content.style.height = tarH + "px";
if (tarH != 0) {
showS()
} else {
hiddenS();
}
}
}
}
var $ = function($) {return document.getElementById($)};
String.prototype.pxToNum = function() {return Number(this.replace("px",""))}
function getFirstChild(obj) {
var result = obj.firstChild;
while (!result.tagName) {
result = result.nextSibling;
}
return result;
}
function getNextChild(obj) {
var result = obj.nextSibling;
while (!result.tagName) {
result = result.nextSibling;
}
return result;
}
//]]>
</script>
<body>
<ul class="rolinList" id="rolin">
<li>
<h2>网页代码站</h2>
<div class="content"><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</div>
</li>
<li>
<h2>唐朝帝王槌</h2>
<div class="content"><p>立剑赏月意惆怅,袖饰刀,衣披霜,傲视雾丸,徒手战扶桑.<br />
问津终寻帝王陵,黑影没,尸满岗,惟见逆鲮露寒光. <br />
须发苍,气轩昂,三尺银狼,破风动八方<br />
依身紧握噬魂枪,饮虎血,豪万丈.惟有千年我故乡!</p></div>
</li>
<li>
<h2>玉女枪法</h2>
<div class="content"><p>曾经有个梦想:驰骋江湖,快意恩仇。<br />
曾经有份愿望:千里追凶,十步溅血。<br />
曾经有腔豪情:奇功盖世,名冠武林。<br />
曾经有种期盼:烛影摇红,衣袖添香。</p></div>
</li>
<li>
<h2>黑沙刚体</h2>
<div class="content"><p>赵客缦胡缨,吴钩霜雪明。银鞍照白马,飒沓如流星。 <br />
十步杀一人,千里不留行。事了拂衣去,深藏身与名。 <br />
闲过信陵饮,脱剑膝前横。将炙啖朱亥,持觞劝侯嬴。 <br />
三杯吐然诺,五岳倒为轻。眼花耳热后,意气素霓生。 <br />
纵死侠骨香,不惭世上英。谁能书阁下,白首太玄经。</p>
</div>
</li>
<li>
<h2>ASP源码下载</h2>
<div class="content"><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</div>
</li>
<li>
<h2>雾水掌</h2>
<div class="content"><p>蹄影善奔,如幻如魔,其皮传世,绝学再现,<br />
又有谁在这残阳道中追逐它的身影... </p>
</div>
</li>
</ul>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/bedaf0bd-7854-478d-bbaf-f3e7ca484b32.html
转载于:https://www.cnblogs.com/webdm/archive/2011/04/26/2028895.html
JS+CSS竖向折叠滑动菜单代码相关推荐
- html如何做滑动门效果,JS+CSS实现简单滑动门(滑动菜单)效果
本文实例讲述了JS+CSS实现简单滑动门的方法.分享给大家供大家参考.具体如下: 这是一款超简约设计的滑动门菜单,鼠标放到主菜单上,里面的内容会跟着变化,实际上本演示是一个范例,从代码中的注释你就能感 ...
- JS打字效果的动态菜单代码分享
这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...
- JS超级酷的导航菜单代码
代码简介: JS超级酷的导航菜单代码,类似WINDOWS风格的导航,又又立体效果,很不错的,赶快运行一下,一睹为快吧. 代码内容: <HTML> <HEAD> <TITL ...
- html5手机端的点击弹出侧边滑动菜单代码
效果预览:http://hovertree.com/texiao/html5/19/ 本效果适用于移动设备,可以使用手机等浏览效果. 源码下载:http://hovertree.com/h/bjaf/ ...
- html css 导航 左右滑动效果代码,HTML+CSS/CSS3实现滑动下拉导航栏
HTML+CSS/CSS3实现滑动下拉导航栏 纯css实现的滑动下拉导航栏,超详细代码,以及实现中遇到的小问题 首先创建一个列表以及一些标签的全局样式 html代码 css代码 * { margin: ...
- 动态html树形菜单模板,JS+CSS简易树状菜单Tree
/p> "http://www.w3.org/TR/html4/loose.dtd"> 树形菜单实例-www.mb5u.com function showhide_ob ...
- Android 3D滑动菜单完全解析,实现推拉门式的立体特效
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/10471245 在上一篇文章中,我们学习了Camera的基本用法,并借助它们编写了一 ...
- 网页计算机(h5+js+css)
今天学了一个网页计算机(h5+js+css) 效果图如下: 代码如下: html: <!DOCTYPE html> <html lang="en"> < ...
- html实现图片淡化效果,图片由模糊变清晰的淡入效果 js+css实现【原创】
网页里,在一些例如栏目.标签.产品展示的地方,如果直接显示图片,会觉得有点平淡,如果图片加点由模糊变清晰.淡入淡出的效果,会大大的增强用户体验.本文将为你介绍一个js+css实现的方法,代码简单易懂, ...
最新文章
- 科大星云诗社动态20211214
- 【Blog.Core开源】网关自定义认证鉴权与传参
- 【Flink】FLink 反序列化空指针 java.lang.String.<init> SimpleStringSchema
- 解决iphone横屏时字体变大问题或者内容大小不一样等...
- 减速箱箱体尺寸是怎样计算的_手把手教你解剖减速机
- 2020-9测试通过:eclipse安装svn插件
- RecyclerView框架——BRVAH3.x使用指南
- GoComb.com搜索引擎问世:改进搜索体验
- Struts2 通配符不能使用问题
- CFree 5使用方法
- (SEED-Lab) TCP/IP Attack Lab
- 智慧水务大数据平台-智慧水务建设方案
- 2017国庆 雅礼集训 题解合集
- 科普:手机的各种传感器原理及用途
- 华为机试题:HJ108 求最小公倍数(python)
- [转载] js 下获取子元素的方法 -- 李富生
- Warning: Class ‘com.xxx.xxx‘ not found in module ‘xxxx‘
- DSP TMS320C6000基础学习(5)—— 阅读DSP6713的Datasheet
- 旧电脑做php网站服务器,送了我爸一台电脑,原来的旧电脑就当破烂卖了
- 永磁同步电机矢量控制一更