豎向折疊的CSS滑動菜單

2024-09-05 12:19:14

字體：大中小

供稿：網(wǎng)友

折疊菜單，豎向展開，點擊時緩慢展開，展開后可以作為菜單的欄目介紹等，還算不錯。

<!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   id="iwvjtn8m0"   class="content"><p>立劍賞月意惆悵,袖飾刀,衣披霜,傲視霧丸,徒手戰(zhàn)扶桑.<br />問津終尋帝王陵,黑影沒,尸滿崗,惟見逆鯪露寒光.　 <br />須發(fā)蒼,氣軒昂,三尺銀狼,破風動八方<br />依身緊握噬魂槍,飲虎血,豪萬丈.惟有千年我故鄉(xiāng)!</p></div></li><li><h2>玉女槍法</h2><div   id="iwvjtn8m0"   class="content"><p>曾經(jīng)有個夢想：馳騁江湖，快意恩仇。<br />曾經(jīng)有份愿望：千里追兇，十步濺血。<br />曾經(jīng)有腔豪情：奇功蓋世，名冠武林。<br />曾經(jīng)有種期盼：燭影搖紅，衣袖添香。</p></div></li><li><h2>黑沙剛體</h2><div   id="iwvjtn8m0"   class="content"><p>趙客縵胡纓，吳鉤霜雪明。銀鞍照白馬，颯沓如流星。 <br />十步殺一人，千里不留行。事了拂衣去，深藏身與名。 <br />閑過信陵飲，脫劍膝前橫。將炙啖朱亥，持觴勸侯嬴。 <br />三杯吐然諾，五岳倒為輕。眼花耳熱后，意氣素霓生。 <br />縱死俠骨香，不慚世上英。誰能書閣下，白首太玄經(jīng)。</p></div></li><li><h2>ASP源碼下載</h2><div   id="iwvjtn8m0"   class="content">請到這里來……</div></li><li><h2>霧水掌</h2><div   id="iwvjtn8m0"   class="content"><p>蹄影善奔,如幻如魔,其皮傳世,絕學再現(xiàn),<br />又有誰在這殘陽道中追逐它的身影... </p></div></li></ul></body></html>

上一篇：絕對經(jīng)典的滑動門特效代碼

下一篇：CSS實現(xiàn)的目錄樹型菜單