快捷導(dǎo)航

基于jquery的slideDown和slideUp做手風(fēng)琴

更新時(shí)間：2011年02月12日 15:47:52 投稿：mdxy-dxy

slideDown和slideUp做手風(fēng)琴菜單面板的代碼，也就是大家常說(shuō)的折疊/展開(kāi)菜單，不少朋友都喜歡的風(fēng)格，本代碼兼容性好，簡(jiǎn)單易懂，便于修改，希望大家喜歡。

<!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>手風(fēng)琴</title><style>*{ padding:0; margin:0; }body{ background:#fafafa; font-size:12px; }.slider{ line-height:24px; width:700px; color:#7ecef4; margin:10px auto; background:#010e16; }.slider dt{ background:#f5f5d2; padding-left:30px; cursor:pointer; overflow:hidden; background:#1b1b1b; border-bottom:1px solid #fff; height:32px; line-height:32px; }.slider dt.slider_open{background:#707070; color:# }.slider dd{ display:none; background:#f1f1ea; height:90px; background:#111; border-bottom:1px dashed #fafafa; overflow:hidden;}.slider dd p{ padding:10px 20px; overflow:hidden; }</style></head><body><dl class="slider"><dt class="slider_open">趙本山，央視春晚</dt><dd><p>央視春晚臺(tái)柱子趙本山在2011年央視春晚演出后，不得不接受緊急治療。從個(gè)體人性角度祝愿這老爺子健康長(zhǎng)壽。但諾將其身體狀況作為一種文化隱喻，它卻預(yù)示著CCTV洗/腦愚樂(lè)文化正面臨無(wú)可奈何花落去壽終正襟的命運(yùn)。</p></dd><dt>支持打拐</dt><dd><p>據(jù)媒體報(bào)道，濮存昕也表示對(duì)打拐的支持。他建議全國(guó)公安系統(tǒng)應(yīng)盡快建立起一支專(zhuān)業(yè)的打拐隊(duì)伍，各地公安機(jī)關(guān)應(yīng)當(dāng)設(shè)立專(zhuān)門(mén)的打拐機(jī)構(gòu)，配備必要的編制和專(zhuān)項(xiàng)經(jīng)費(fèi)。</p></dd><dt>愛(ài)的真言</dt><dd><p>我曾經(jīng)喜歡八八，堅(jiān)定只有八八才能給川兒幸福、只是最近幾集，你讓我情何以堪？感動(dòng)，心疼，糾結(jié)，真的是不悲不喜了！現(xiàn)在我的心情。。很難過(guò)、不知道應(yīng)該選擇八八還是四四呢？</p></dd><dt>注意保重身體</dt><dd><p>還頭痛嗎？如果不是生病引起的頭痛,我一般會(huì)聽(tīng)聽(tīng)音樂(lè),自己喜歡的音樂(lè),用心做自己的事固然是對(duì)的,但不要忽略自己的身體。</p></dd></dl>如果是通過(guò)網(wǎng)頁(yè)運(yùn)行代碼的，需要刷新下才能看到效果。</body></html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

幾個(gè)不錯(cuò)的自動(dòng)收縮菜單導(dǎo)航效果
幾個(gè)不錯(cuò)的自動(dòng)收縮菜單導(dǎo)航效果...
2007-10-10
搜集了幾個(gè)不錯(cuò)的下拉菜單效果
搜集了幾個(gè)不錯(cuò)的下拉菜單效果...
2007-05-05
CSS TreeMenu 二級(jí)樹(shù)形菜單示例
二級(jí)樹(shù)形菜單示例：CSS TreeMenu ，非常漂亮的樹(shù)形菜單，用在網(wǎng)站右側(cè)比較合適。
2010-11-11
js無(wú)限級(jí)折疊菜單精簡(jiǎn)版
一個(gè)簡(jiǎn)單的js無(wú)限級(jí)折疊菜單，這里只列出JS版本的，JQUERY版本的可以到作者發(fā)的帖子上看，權(quán)當(dāng)拋磚引玉了。
2011-03-03
使用html+css+js實(shí)現(xiàn)導(dǎo)航欄滾動(dòng)漸變效果
這篇文章主要介紹了使用html+css+js實(shí)現(xiàn)導(dǎo)航欄滾動(dòng)漸變效果,鼠標(biāo)向下拖動(dòng)滾動(dòng)條的時(shí)候?qū)Ш綑跁?huì)隨著拖動(dòng)有一個(gè)漸變動(dòng)畫(huà)效果,非常的炫酷,快來(lái)學(xué)習(xí)一下如何制作吧
2023-03-03
js仿土豆視頻滾動(dòng)菜單
比較漂亮的仿土豆視頻導(dǎo)航菜單，漂亮大方
2008-05-05
純CSS實(shí)戰(zhàn)豎向?qū)Ш讲藛?，這也算是一個(gè)典型的CSS菜單啦，這里要用到兩個(gè)背景圖片，在鼠標(biāo)動(dòng)作時(shí)分別加載不同的背景圖片，以達(dá)到反差給人的清新效果，其實(shí)這種菜單的制作是很簡(jiǎn)單的，代碼量不大，作為初級(jí)者的教程還是很不錯(cuò)的。
2010-03-03

javascript實(shí)現(xiàn)的鼠標(biāo)懸停時(shí)動(dòng)態(tài)翻滾的導(dǎo)航條

鼠標(biāo)懸停時(shí)動(dòng)態(tài)翻滾的導(dǎo)航條，注意這里用了兩個(gè)背景圖，請(qǐng)等待網(wǎng)頁(yè)加載完成或多刷新幾次，這個(gè)是使用JavaScript實(shí)現(xiàn)的，不過(guò)代碼好像是從jQuery里摘出來(lái)的，有點(diǎn)像。

2009-11-11