模板無憂
網頁特效
每日更新
|
TOP排行榜
|
Tag標簽
|
充值
無憂首頁
網頁模板
程序模板
建站教程
視頻教程
網頁特效
圖標素材
字體下載
站長工具
站長問答
網頁特效
菜單導航
圖片特效
文本鏈接
層和布局
頁面背景
表單按鈕
日期時間
計算轉換
鍵盤鼠標
瀏覽器
游戲娛樂
綜合其它
常用代碼
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在線編輯器
Mootools
HTML
JS廣告代碼合集
站長工具
站長常用軟件
網站綜合查詢
Alexa排名查詢
Google PR查詢
域名Whois查詢
網站收錄查詢
友情鏈接查詢
CSS2中文手冊
CSS精簡優化工具
網頁特效代碼
模板無憂
>
網頁特效
>
菜單導航特效代碼
>
收藏
分享
查看評論
菜單導航
演示
圓角豎向的CSS折疊菜單_菜單導航特效
查看演示效果
特效Tag:
折疊菜單
添加
這個代碼不錯,用CSS實現圓角效果,豎向排列,可折疊、可展開,自動響應鼠標運作,內容定制方便,希看你喜歡。
<style type="text/css"> <!-- #menu { font-size:12px; height:380px; margin:0; padding:0; width:180px; overflow:hidden; background:#f0f0f0; list-style:none; border-left:1px solid #DDD; border-right:1px solid #DDD; } #menu li a { display:block; text-decoration:none; color:#00b; margin:0; width:100%; } #menu li a span { display:none; color:#000; height:120px } #menu li a.one span { display:block; margin:0 10px; } #menu li a:hover { background:#f1f1f1; } #menu li a:hover span { display:block; margin:0 10px; cursor:pointer; } #menu .h2 { margin:0 5px; padding:0; color:#808; font-variant:small-caps; border:0; } #menu .h3 { margin:0 5px; padding:0; color:#00b; } .curved { width:180px; margin:0 auto; } .curved .b1, .curved .b2, .curved .b3, .curved .b4 { font-size:1px; display:block; background:#88c; overflow: hidden; } .curved .b1, .curved .b2, .curved .b3 { height:1px; } .curved .b2, .curved .b3, .curved .b4 { background:#f0f0f0; border-left:1px solid #DDD; border-right:1px solid #DDD; } .curved .b1 { margin:0 4px; background:#DDD; } .curved .b2 { margin:0 2px; border-width:0 2px; } .curved .b3 { margin:0 1px; } .curved .b4 { height:2px; margin:0px; } --> </style> <div class="curved"> <b class="b1 c1"> </b> <b class="b2 c2"> </b> <b class="b3 c3"> </b> <b class="b4 c4" ></b> <ul id="menu"> <li> <a href="#nogo"> <b class="h2">ASP CODE</b><br /> <span>本類ASP源代碼分享交流區,大量精品的ASP源代碼供初學者學習研究,希看你喜歡!</span> </a> </li> <li> <a href="#nogo"> <b class="b1"></b> <b class="b2"></b> <b class="h2">PHP CODE</b><br /> <span>本類PHP代碼分享發布區,歡迎愛好者和我們一起交流進步進步,歡迎來來到mb5u.com</span> </a> </li> <li> <a href="#nogo"> <b class="b1"></b> <b class="b2"></b> <b class="h2">JSP CODE</b><br /> <span>本類JSP代碼學習區,不錯吧,JSP學習區,熱烈歡迎您的加盟。</span> </a> </li> </ul><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></div>
所屬頻道:
菜單導航特效
/
更新時間:2010-05-22
[收藏]
[報錯]
[返回列表]
相關
菜單導航特效
:
CSS+div+js組合強大實現超酷菜單
超酷仿GOOGLE首頁導航菜單效果
仿網易的滑動門技術DIV+CSS實現
仿藍色理想網站的導航菜單
鼠標觸及帶邊框菜單
用JS實現的類似框架的鏈接導航模式
CSS立體層
右鍵彈出菜單
純css的導航下拉菜單
隱藏菜單效果
css模擬title和alt的提示效果
下拉菜單鏈接頁面打開方式選擇
菜單導航特效Rss訂閱
特效代碼搜索
菜單導航特效推薦
三級CSS下拉導航菜單
目錄式導航菜單-鼠標放上的下拉菜單
純CSS Tabs選項卡示例
CSS仿迅雷的網站導航
移動菜單
比較流行的JS+CSS選項卡TAB
強烈推薦的一款CSS導航菜單
經典的藍色CSS下拉菜單
JS折疊菜單
鼠標滑過變色的菜單欄
猜你也喜歡看這些
天極網的JS卡通圖片切換
滑動條顯示 Script
鼠標放到圖片上會滑出提示文字
純CSS實現Lightbox點擊小圖無刷新顯示大圖
相片選擇器腳本 任意選擇圖片
經典的圖片切換
很有意思的圖片分裂復制效果
圖片型不規則菜單的CSs實現方法
圖象滾動公告版
Js新聞幻燈圖片輪番播放代碼
相關鏈接:
復制本頁鏈接
|
搜索圓角豎向的CSS折疊菜單
特效說明:
菜單導航模板
-
圓角豎向的CSS折疊菜單
。