模板無憂
網頁特效
每日更新
|
TOP排行榜
|
Tag標簽
|
充值
無憂首頁
網頁模板
程序模板
建站教程
視頻教程
網頁特效
圖標素材
字體下載
站長工具
站長問答
網頁特效
菜單導航
圖片特效
文本鏈接
層和布局
頁面背景
表單按鈕
日期時間
計算轉換
鍵盤鼠標
瀏覽器
游戲娛樂
綜合其它
常用代碼
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在線編輯器
Mootools
HTML
JS廣告代碼合集
站長工具
站長常用軟件
網站綜合查詢
Alexa排名查詢
Google PR查詢
域名Whois查詢
網站收錄查詢
友情鏈接查詢
CSS2中文手冊
CSS精簡優(yōu)化工具
網頁特效代碼
模板無憂
>
網頁特效
>
菜單導航特效代碼
>
收藏
分享
查看評論
菜單導航
演示
一個簡潔二級導航菜單雛形_菜單導航特效
查看演示效果
特效Tag:
導航菜單
添加
一個二級導航菜單雛形,風格簡潔,圓角形,也是當前比較流行的菜單效果,支持二級,演示內容是隨便搞的,希看大家喜歡。
<!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> <title>二級導航菜單</title> <meta http-equiv="mrc-type" mrc="text/html;charset=gb2312"> <style type="text/css"> <!-- *{font-size:12px;} html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;} UL{list-style-type:none; margin:0px;} .ttl{height:18px;} .ctt{ height:auto; padding:6px; clear:both; border: 1px solid #CCCCCC; } .w936{ width:936px; clear:both; height: 120px; margin-top: 20px; margin-right: 0; margin-bottom: 2px; margin-left: 0; } .normaltab { color:#1F3A87; } .hovertab { color:#FF0000; background-color: #99CC00; } .dis{display:block;} .undis{display:none;} .tabs { width:100%; background:#BBD9EE; font-size:93%; line-height:normal; } .tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } .tabs li { display:inline; margin:0; padding:0; cursor: pointer; } .tabs a { float:left; background:url("http://p1.mb5u.com/texiao/tableft.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } .tabs a span { float:left; display:block; background:url("http://p1.mb5u.com/texiao/tabright.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#666; } .tabs a span {float:none;} .tabs a:hover span { color:#FF9834; } .tabs a:hover { background-position:0% -42px; } .tabs a:hover span { background-position:100% -42px; } --> </style> <script type="text/javascript" language="javascript"> <!-- function g(o){return document.getElementById(o);} function HoverLi(n) { for(var i=1;i<=8;i++){g('tb_'+i);g('tbc_0'+i).className='undis';} g('tbc_0'+n).className='dis';g('tb_'+n); } //--> </script> </head> <body> <div class="w936"> <div id="tb_" class="tb_ tabs"> <ul> <li id="tb_1" onmouseover="HoverLi(1);"><a href="#"><span>ASP</span></a></li> <li id="tb_2" onmouseover="HoverLi(2);"><a href="#"><span>PHP</span></a></li> <li id="tb_3" onmouseover="HoverLi(3);"><a href="#"><span>.NET</span></a></li> <li id="tb_4" onmouseover="HoverLi(4);"><a href="#"><span>JSP</span></a></li> <li id="tb_5" onmouseover="HoverLi(5);"><a href="#"><span>JAVA</span></a></li> <li id="tb_6" onmouseover="HoverLi(6);"><a href="#"><span>DELPHI</span></a></li> <li id="tb_7" onmouseover="HoverLi(7);"><a href="#"><span>VC++</span></a></li> <li id="tb_8" onmouseover="HoverLi(8);"><a href="#"><span>AJAX</span></a></li> </ul> </div> <div class="ctt"> <div class="dis" id="tbc_01">ASP的內容一</div> <div class="undis" id="tbc_02">PHP的內容二</div> <div class="undis" id="tbc_03">.NET的內容三</div> <div class="undis" id="tbc_04">JSP的內容四</div> <div class="undis" id="tbc_05">JAVA的內容五</div> <div class="undis" id="tbc_06">DELPHI的內容六</div> <div class="undis" id="tbc_07">VC++的內容七</div> <div class="undis" id="tbc_08">AJAX的內容</div> </div> </div> </body> </html>
所屬頻道:
菜單導航特效
/
更新時間:2011-02-24
[收藏]
[報錯]
[返回列表]
相關
菜單導航特效
:
CSS+div+js組合強大實現(xiàn)超酷菜單
超酷仿GOOGLE首頁導航菜單效果
仿網易的滑動門技術DIV+CSS實現(xiàn)
仿藍色理想網站的導航菜單
鼠標觸及帶邊框菜單
用JS實現(xiàn)的類似框架的鏈接導航模式
CSS立體層
右鍵彈出菜單
純css的導航下拉菜單
隱藏菜單效果
css模擬title和alt的提示效果
下拉菜單鏈接頁面打開方式選擇
菜單導航特效Rss訂閱
特效代碼搜索
菜單導航特效推薦
藍色背景平滑的圓角形CSS菜單欄
一個自動切換的Tab選項卡(滑動門)
帶緩沖的伸縮下拉菜單
像滑動門一樣的CSs菜單
菜單效果1
帶英文提示的CSS網站導航欄
像電燈開關一樣的豎直菜單
隱藏菜單效果
CSS仿126郵箱TAB選項卡
純CSS圓角導航菜單
猜你也喜歡看這些
漫天飛雪
黑色風格帶緩沖的JS焦點圖代碼
JS圖片切換,仿水紋波動
Js圖片連續(xù)左右滾動代碼
JavaScript偽3D輪播圖片幻燈切換代碼
CSS趣味圖片邊框之——帶間隔的大邊框代碼
圖片的漸顯播放效果的代碼
鼠標經過圖片時顯示半透明文字,邊框變色
圖片瀏覽器腳本
CSS強制按比例縮小圖片
相關鏈接:
復制本頁鏈接
|
搜索一個簡潔二級導航菜單雛形
特效說明:
菜單導航模板
-
一個簡潔二級導航菜單雛形
。