模板無憂
網頁特效
每日更新
|
TOP排行榜
|
Tag標簽
|
充值
無憂首頁
網頁模板
程序模板
建站教程
視頻教程
網頁特效
圖標素材
字體下載
站長工具
站長問答
網頁特效
菜單導航
圖片特效
文本鏈接
層和布局
頁面背景
表單按鈕
日期時間
計算轉換
鍵盤鼠標
瀏覽器
游戲娛樂
綜合其它
常用代碼
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在線編輯器
Mootools
HTML
JS廣告代碼合集
站長工具
站長常用軟件
網站綜合查詢
Alexa排名查詢
Google PR查詢
域名Whois查詢
網站收錄查詢
友情鏈接查詢
CSS2中文手冊
CSS精簡優化工具
網頁特效代碼
模板無憂
>
網頁特效
>
菜單導航特效代碼
>
收藏
分享
查看評論
菜單導航
演示
淡藍色豎向簡潔Tab_菜單導航特效
查看演示效果
特效Tag:
選項卡
Tab
添加
淡藍色豎向簡潔Tab,選項卡,很多人都喜歡的一種風格。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" mrc="text/html;charset=gb2312" /> <title>簡潔Tab</title> <style type="text/css"> <!-- body{ padding:0;font:12px "宋體"; } #lib_Tab1_sx{width:500px;margin:0px;padding:0px;margin-bottom:15px; overflow:hidden;} .lib_tabborder_sx{border:1px solid #95C9E1;} .lib_Menubox_sx {line-height:28px;position:relative; float:left; width:130px; height:240px;border-right:1px solid #95C9E1;} .lib_Menubox_sx ul{margin:0px;padding:0px;list-style:none; position:absolute; top:15px; left:5px; margin-left:10px; height:25px;text-align:center;} .lib_Menubox_sx li{display:block;cursor:pointer;width:114px;color:#949694;font-weight:bold; margin-bottom:5px;height:25px;line-height:25px; background-color:#E4F2FD} .lib_Menubox_sx li.hover{padding:0px;background:#fff;width:116px;border:1px solid #95C9E1; border-right:0; color:#739242;height:25px;line-height:25px;} .lib_Contentbox_sx{margin-top:0px; border-top:none;padding:20px; border-left:0; margin-left:130px;} --> </style> <script> <!-- function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } //--> </script> </head> <body> <div id="lib_Tab1_sx" class="lib_tabborder_sx"> <div class="lib_Menubox_sx "> <ul> <li id="one1" onclick="setTab('one',1,5)" class="hover">最新源碼</li> <li id="one2" onclick="setTab('one',2,5)" >ASP類</li> <li id="one3" onclick="setTab('one',3,5)">PHP類</li> <li id="one4" onclick="setTab('one',4,5)">JSP類</li> <li id="one5" onclick="setTab('one',5,5)">.NET類</li> </ul> </div> <div class="lib_Contentbox_sx "> <div id="con_one_1" >新聞列表1</div> <div id="con_one_2" style="display:none">ASP類更新</div> <div id="con_one_3" style="display:none">PHP類更新</div> <div id="con_one_4" style="display:none">JSP類更新</div> <div id="con_one_5" style="display:none">ASP.NET類更新</div> </div> </div> </body> </html>
所屬頻道:
菜單導航特效
/
更新時間:2012-11-03
[收藏]
[報錯]
[返回列表]
相關
菜單導航特效
:
CSS+div+js組合強大實現超酷菜單
超酷仿GOOGLE首頁導航菜單效果
仿網易的滑動門技術DIV+CSS實現
仿藍色理想網站的導航菜單
鼠標觸及帶邊框菜單
用JS實現的類似框架的鏈接導航模式
CSS立體層
右鍵彈出菜單
純css的導航下拉菜單
隱藏菜單效果
css模擬title和alt的提示效果
下拉菜單鏈接頁面打開方式選擇
菜單導航特效Rss訂閱
特效代碼搜索
菜單導航特效推薦
拖動菜單
又一個Css+JS清新的選項卡、滑動門
始終顯示在頁面最下部的菜單
CSS實現的目錄樹型菜單
一個簡潔型伸縮菜單
B2B網站的滑動門,可以定義某個TAB是否滑動切換
一個簡易的CSS/JS滑動門
UL、LI 無序列表實現純CSS網站導航菜單
多顏色菜單
JS版下拉菜單生成器
猜你也喜歡看這些
CSS制作的類似相冊瀏覽的功能
一組圖片向上滾屏特效
Javascript圖片幻燈效果
JavaScript判斷圖片是否能夠加載,失敗則替換默認圖片
國外的Js圖片瀏覽效果
JavaScript隨機圖片顯示
美化過的勻速圖片滾動
JavaScript真正的鼠標放上動畫加載大圖的代碼
CSS將圖片自動變為圓角
JS圖片溶解出現的特效
相關鏈接:
復制本頁鏈接
|
搜索淡藍色豎向簡潔Tab
特效說明:
菜單導航模板
-
淡藍色豎向簡潔Tab
。