竖向折叠的CSS滑动菜单

2024-09-05 12:19:14

字体：大中小

来源：转载

供稿：网友

折叠菜单，竖向展开，点击时缓慢展开，展开后可以作为菜单的栏目介绍等，还算不错。

<!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>竖向可折叠的CSS滑动菜单</title></head><style type="text/css"></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"><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">请到这里来……</div></li><li><h2>雾水掌</h2><div class="content"><p>蹄影善奔,如幻如魔,其皮传世,绝学再现,<br />又有谁在这残阳道中追逐它的身影... </p></div></li></ul></body></html>

上一篇：绝对经典的滑动门特效代码