模板無憂
網頁特效
每日更新
|
TOP排行榜
|
Tag標簽
|
充值
無憂首頁
網頁模板
程序模板
建站教程
視頻教程
網頁特效
圖標素材
字體下載
站長工具
站長問答
網頁特效
菜單導航
圖片特效
文本鏈接
層和布局
頁面背景
表單按鈕
日期時間
計算轉換
鍵盤鼠標
瀏覽器
游戲娛樂
綜合其它
常用代碼
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在線編輯器
Mootools
HTML
JS廣告代碼合集
站長工具
站長常用軟件
網站綜合查詢
Alexa排名查詢
Google PR查詢
域名Whois查詢
網站收錄查詢
友情鏈接查詢
CSS2中文手冊
CSS精簡優化工具
網頁特效代碼
模板無憂
>
網頁特效
>
菜單導航特效代碼
>
收藏
分享
查看評論
菜單導航
演示
豎向選項卡,藍色樣式_菜單導航特效
查看演示效果
特效Tag:
選項卡
Tab
豎向
添加
豎向選項卡系列之一,藍色簡約型,只有線條修飾,沒有使用任何圖片,移植方便,拷貝即可用,有些地方還需完善。
<!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" mrc="text/html; charset=utf-8" /> <title>豎排的選項卡</title> <style type="text/css"> body{font-size:12px;font-family:Arial;} a:link,a:visited,a:hover,a:active{text-decoration:none;color:#256bae;} .main{border:1px solid #256bae;width:336px;height:160px;padding:5px;overflow:hidden;float:left;} .news{position:absolute;z-index:100;margin:8px 0 0 348px;width:24px;} .news ul{list-style:none;padding:0;margin:0;} .news ul li{border-top:1px solid #256bae;border-right:1px solid #256bae;border-bottom:1px solid #256bae;height:60px;width:20px;margin-bottom:10px;padding-top:5px;text-align:center;cursor:pointer;;vertical-align:middle;padding-bottom:5px;} .news ul li.on{border-left:1px solid #fff;} .dis{display:block;} .undis{display:none;} </style> <script type="text/javascript"> function g(o){return document.getElementById(o);} function HoverLi(m,n,counter){for(var i=1;i<=counter;i++){g('tb_'+m+i).className='';g('tbc_'+m+i).className='undis';}g('tbc_'+m+n).className='dis';g('tb_'+m+n).className='on';} </script> </head> <body> <div id="tab"> <div class="news"> <ul> <li class="on" id="tb_11" onmouseover="HoverLi(1,1,2);">變了</li> <li class="" id="tb_12" onmouseover="HoverLi(1,2,2);">愛了</li> </ul> </div> <div class="dis" id="tbc_11"> <div class="main"> 變了吧? </div> </div> <div class="undis" id="tbc_12"> <div class="main"> 愛了吧? </div> </div> </div> </body> </html>
所屬頻道:
菜單導航特效
/
更新時間:2012-11-21
[收藏]
[報錯]
[返回列表]
相關
菜單導航特效
:
CSS+div+js組合強大實現超酷菜單
超酷仿GOOGLE首頁導航菜單效果
仿網易的滑動門技術DIV+CSS實現
仿藍色理想網站的導航菜單
鼠標觸及帶邊框菜單
用JS實現的類似框架的鏈接導航模式
CSS立體層
右鍵彈出菜單
純css的導航下拉菜單
隱藏菜單效果
css模擬title和alt的提示效果
下拉菜單鏈接頁面打開方式選擇
菜單導航特效Rss訂閱
特效代碼搜索
菜單導航特效推薦
CSS豎向菜單,多級展開
簡潔的滑出菜單
背景自適應的圓角滑動門菜單
純CSS制作雙語導航條
通用的后臺左側管理菜單
CSS實現的Vista風格菜單
QQ網站的選項卡、滑動門菜單
一個可以伸展打開的滑動導航欄
這么簡單就實現了CSS滑動菜單(滑動門)
大氣清新的滑動菜單(CSS+JS)
猜你也喜歡看這些
同一頁面調用并顯示多個圖片幻燈切換效果
JavaScript圖片翻轉,垂直和水平
XML立體字體
CSS實現自適應的圖片背景邊框
JS+CSS給圖片加上鼠標滑過的方框
圖片雷達效果,像光照一樣
鼠標放到圖片上會滑出提示文字
JS實現鼠標懸停圖片交換
Js版淘寶圖片切換,類似相冊播放效果
仿淘寶星級評分的CSS代碼
相關鏈接:
復制本頁鏈接
|
搜索豎向選項卡,藍色樣式
特效說明:
菜單導航模板
-
豎向選項卡,藍色樣式
。