模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
竖向折叠的CSS滑动菜单_菜单导航特效
查看演示效果
特效Tag:
竖向
折叠菜单
添加
折叠菜单,竖向展开,点击时缓慢展开,展开后可以作为菜单的栏目先容等,还算不错。
<!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" mrc="text/html; charset=gb2312" /> <title>竖向可折叠的CSS滑动菜单</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} .mrc{ height:150px;width:400px; background:#fff; background:#FAFAFA} .mrc 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 mrc = getNextChild(head); var isOpen = false; this.pHidden = function() { if (isOpen) hidden(); } this.pShow = show; var baseH = mrc.offsetHeight; mrc.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(); } mrc.style.height = "0px"; mrc.style.display = "block"; mrc.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(); mrc.style.display = "none"; isOpen = false; state.hidden = false; } function move() { var dist = (tarH - mrc.style.height.pxToNum())*speed; if (Math.abs(dist) < 1) dist = dist > 0 ? 1: -1; mrc.style.height = (mrc.style.height.pxToNum() + dist) + "px"; if (Math.abs(mrc.style.height.pxToNum() - tarH) <= range ) { clearInterval(interval); mrc.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="mrc"><p>立剑赏月意惆怅,袖饰刀,衣披霜,傲视雾丸,徒手战扶桑.<br /> 问津终寻帝王陵,黑影没,尸满岗,惟见逆鲮露寒光. <br /> 须发苍,气轩昂,三尺银狼,破风动八方<br /> 依身紧握噬魂枪,饮虎血,豪万丈.惟有千年我故乡!</p></div> </li> <li> <h2>玉女枪法</h2> <div class="mrc"><p>曾经有个梦想:驰骋江湖,快意恩仇。<br /> 曾经有份愿望:千里追凶,十步溅血。<br /> 曾经有腔豪情:奇功盖世,名冠武林。<br /> 曾经有种期盼:烛影摇红,衣袖添香。</p></div> </li> <li> <h2>黑沙刚体</h2> <div class="mrc"><p>赵客缦胡缨,吴钩霜雪明。银鞍照白马,飒沓如流星。 <br /> 十步杀一人,千里不留行。事了拂衣去,深藏身与名。 <br /> 闲过信陵饮,脱剑膝前横。将炙啖朱亥,持觞劝侯嬴。 <br /> 三杯吐然诺,五岳倒为轻。眼花耳热后,意气素霓生。 <br /> 纵死侠骨香,不惭世上英。谁能书阁下,白首太玄经。</p> </div> </li> <li> <h2>ASP源码下载</h2> <div class="mrc">请到这里来……</div> </li> <li> <h2>雾水掌</h2> <div class="mrc"><p>蹄影善奔,如幻如魔,其皮传世,绝学再现,<br /> 又有谁在这残阳道中追逐它的身影... </p> </div> </li> </ul> </body> </html>
所属频道:
菜单导航特效
/
更新时间:2011-02-24
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
:
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
简单明了的CSS导航条
适合企业使用的导航菜单
通用的后台左侧管理菜单
CSS 滑动门,自己写的,没有图片
简洁CSS 导航条
很独特的弹性下拉导航菜单
三级CSS下拉导航菜单
精致纯CSS导航栏
清新带圆角的CSS竖向菜单
银灰色三级CSS下拉菜单
猜你也喜欢看这些
对联式的图片广告代码
鼠标滑过,缩略图放大显示(纯CSS)
图片点击后变灰色的CSs代码
一组图片向上滚屏特效
点击显示大图的JS效果
按钮可以控制的JS横向图片滚动
动态的Loading文字,逐个变大
改变网页背景图片
CSS+JS滑动门式的图片轮番切换
鼠标点击图片后切换为其它图片
相关链接:
复制本页链接
|
搜索竖向折叠的CSS滑动菜单
特效说明:
菜单导航模板
-
竖向折叠的CSS滑动菜单
。