<li id="spc7x"><object id="spc7x"></object></li>

<rp id="spc7x"></rp>

<th id="spc7x"><pre id="spc7x"></pre></th>

<button id="spc7x"><acronym id="spc7x"></acronym></button>

首頁 > 設計 > 實用代碼 > 正文

側邊欄導航菜單，溢出式導航-滑動門選項卡

2018-10-16 20:53:06

字體：大中小

來源：轉載

供稿：網友

側邊欄溢出式導航菜單，溢出的意思也就是當鼠標滑向某菜單項的時候，所屬的子菜單內容從主菜單中剝離到邊框外顯示，這樣會使導航效果更清淅，目前有不少的網站都在改進這種導航功能，特別是一些產品類網站。

Source Code to Run [www.liquidfrog.net 錯新網]

<!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=utf-8" /><title>側邊欄<a ><u>導航菜單</u></a></title><style>*{margin:0;padding:0;}body{background:#FFF;color:#000;text-align:center;font:normal 12px Georgia, Arial, Helvetica, sans-serif;}a:link,a:visited{color:#369;text-decoration:underline;}a:hover{color:#C80000;text-decoration:none;}span,li,dt,dd,p,h1,h2,h3,h4,h5,h6{text-align:left;}img{border:0;}ul,li{list-style-type:none;}p{line-height:150%;}h1{margin:0 auto;width:100%;background:#353535 font-size:28px;height:60px;color:#FFF;line-height:60px;text-indent:60px;overflow:hidden;border-bottom:3px solid #999;}#YMenu{margin:30px auto;width:590px;height:450px;overflow:hidden;border:3px solid #B0BEC7;padding:4px;}#YMenu-side{position:relative;z-index:2;float:left;width:200px;height:450px;border-right:3px solid #B0BEC7;}#YMenu-side h3{float:left;width:196px;clear:both;line-height:28px;font-size:14px;text-indent:10px;color:#369;background-color:#EAEFF5;overflow:hidden;clear:both;}.YM-mainmnu{float:left;width:100%;clear:both;}.YM-mainmnu li{position:relative;z-index:2;cursor:pointer;float:left;width:180px;clear:both;min-height:28px;line-height:28px;text-indent:10px;color:#999;}.YM-mainmnu li.current{border-top:1px solid #B0BEC7;border-left:1px solid #B0BEC7;border-bottom:2px solid #B0BEC7;border-right:1px solid #EAEFF5;background-color:#EAEFF5;}.YM-mainmnu li.current a{font-size:14px;font-weight:bold;color:#C80000;}.YM-mainmnu li.current span{display:none;}.YM-mainmnu li .YM-submnu{position:absolute;z-index:3;left:179px;top:-1px;display:none;width:200px;overflow:hidden;border:solid #B0BEC7;border-width:1px 2px 2px 0;background:#EAEFF5 url(../img/mnu-bg.gif) 0 0 no-repeat;}.YM-mainmnu li .YM-submnu li{float:left;clear:none;margin-left:10px;display:inline;text-indent:0;width:90px;overflow:hidden;line-height:24px;color:#000;border:0;}.YM-mainmnu li .YM-submnu li a{font-size:12px;font-weight:normal;color:#369;}#YMenu-main{position:relative;z-index:1;float:right;width:383px;overflow:hidden;}#YMenu-main h2{margin:0 auto;width:100%;height:28px;line-height:28px;background-color:#EAEFF5;font-size:18px;text-align:center;overflow:hidden;}#YMenu-main p{margin:10px auto;width:100%;line-height:150%;font-size:14px;overflow:hidden;text-indent:28px;}.even{background-color:#F8F8F8;}.odd{background-color:#EAEFF5;}.hover{background-color:#B0BEC7;color:#FFF;cursor:pointer;}.hidden{display:none;clear:both;}#footer{margin:0 auto;width:960px;padding:15px 0;overflow:hidden;border-top:1px solid #999;}#footer p{margin:0 auto;padding:5px 0;width:960px;line-height:20px;text-align:center;font-size:14px;}</style></head><body><h1>YTabs！側邊欄<a ><u>導航菜單</u></a></h1><div id="YMenu"><div id="YMenu-side"><h3>家用電器</h3><ul class="YM-mainmnu"><li class="YM-Tab"><a href="#">大家電</a><span> - 電視機、平板電視...</span><ul class="YM-submnu"><li><a href="#1">洗衣機</a></li><li><a href="#1">平板電視</a></li><li><a href="#1">電熱水器</a></li><li><a href="#1">家庭音響</a></li><li><a href="#1">燃氣熱水器</a></li><li><a href="#1">空調</a></li><li><a href="#1">冰箱冷柜</a></li><li><a href="#1">DVD播放器</a></li><li><a href="#1">電視附件</a></li><li><a href="#1">家電服務</a></li><li><a href="#1">家電下鄉</a></li></ul></li><li class="YM-Tab"><a href="#">大家電</a><span> - 電視機、平板電視...</span><ul class="YM-submnu"><li><a href="#1">洗衣機</a></li><li><a href="#1">平板電視</a></li><li><a href="#1">電熱水器</a></li><li><a href="#1">家庭音響</a></li><li><a href="#1">燃氣熱水器</a></li><li><a href="#1">空調</a></li><li><a href="#1">冰箱冷柜</a></li><li><a href="#1">DVD播放器</a></li><li><a href="#1">電視附件</a></li><li><a href="#1">家電服務</a></li><li><a href="#1">家電下鄉</a></li></ul></li><li class="YM-Tab"><a href="#">大家電</a><span> - 電視機、平板電視...</span><ul class="YM-submnu"><li><a href="#1">洗衣機</a></li><li><a href="#1">平板電視</a></li><li><a href="#1">電熱水器</a></li><li><a href="#1">家庭音響</a></li><li><a href="#1">燃氣熱水器</a></li><li><a href="#1">空調</a></li><li><a href="#1">冰箱冷柜</a></li><li><a href="#1">DVD播放器</a></li><li><a href="#1">電視附件</a></li><li><a href="#1">家電服務</a></li><li><a href="#1">家電下鄉</a></li></ul></li><li class="YM-Tab"><a href="#">大家電</a><span> - 電視機、平板電視...</span><ul class="YM-submnu"><li><a href="#1">洗衣機</a></li><li><a href="#1">平板電視</a></li><li><a href="#1">電熱水器</a></li><li><a href="#1">家庭音響</a></li><li><a href="#1">燃氣熱水器</a></li><li><a href="#1">空調</a></li><li><a href="#1">冰箱冷柜</a></li><li><a href="#1">DVD播放器</a></li><li><a href="#1">電視附件</a></li><li><a href="#1">家電服務</a></li><li><a href="#1">家電下鄉</a></li></ul></li></ul><h3>手機數碼</h3><ul class="YM-mainmnu"><li class="YM-Tab"><a href="#">大家電</a><span> - 電視機、平板電視...</span><ul class="YM-submnu"><li><a href="#1">洗衣機</a></li><li><a href="#1">平板電視</a></li><li><a href="#1">電熱水器</a></li><li><a href="#1">家庭音響</a></li><li><a href="#1">燃氣熱水器</a></li><li><a href="#1">空調</a></li><li><a href="#1">冰箱冷柜</a></li><li><a href="#1">DVD播放器</a></li><li><a href="#1">電視附件</a></li><li><a href="#1">家電服務</a></li><li><a href="#1">家電下鄉</a></li></ul></li><li class="YM-Tab"><a href="#">大家電</a><span> - 電視機、平板電視...</span><ul class="YM-submnu"><li><a href="#1">洗衣機</a></li><li><a href="#1">平板電視</a></li><li><a href="#1">電熱水器</a></li><li><a href="#1">家庭音響</a></li><li><a href="#1">燃氣熱水器</a></li><li><a href="#1">空調</a></li><li><a href="#1">冰箱冷柜</a></li><li><a href="#1">DVD播放器</a></li><li><a href="#1">電視附件</a></li><li><a href="#1">家電服務</a></li><li><a href="#1">家電下鄉</a></li></ul></li><li class="YM-Tab"><a href="#">大家電</a><span> - 電視機、平板電視...</span><ul class="YM-submnu"><li><a href="#1">洗衣機</a></li><li><a href="#1">平板電視</a></li><li><a href="#1">電熱水器</a></li><li><a href="#1">家庭音響</a></li><li><a href="#1">燃氣熱水器</a></li><li><a href="#1">空調</a></li><li><a href="#1">冰箱冷柜</a></li><li><a href="#1">DVD播放器</a></li><li><a href="#1">電視附件</a></li><li><a href="#1">家電服務</a></li><li><a href="#1">家電下鄉</a></li></ul></li><li class="YM-Tab"><a href="#">大家電</a><span> - 電視機、平板電視...</span><ul class="YM-submnu"><li><a href="#1">洗衣機</a></li><li><a href="#1">平板電視</a></li><li><a href="#1">電熱水器</a></li><li><a href="#1">家庭音響</a></li><li><a href="#1">燃氣熱水器</a></li><li><a href="#1">空調</a></li><li><a href="#1">冰箱冷柜</a></li><li><a href="#1">DVD播放器</a></li><li><a href="#1">電視附件</a></li><li><a href="#1">家電服務</a></li><li><a href="#1">家電下鄉</a></li></ul></li></ul></div></div><script language="javascript" type="text/javascript" src="http://www.codefans.net/jscss/demoimg/200908/yao.js"></script><script language="javascript" type="text/javascript"></script></body></html>

提示:您可以修改后再運行

上一篇：自己寫的CSS滑動門，藍色經典風格-滑動門選項卡

下一篇：一個很簡單適用的滑動門代碼-滑動門選項卡

學習交流

phpwind的rewrite重寫原理

phpwind的rewrite重寫原理...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

新聞熱點

為什么家庭升級要選激光電視？

2019-10-14 09:23:13

OPPO推出搭載Snapdragon730G的超強功能的新款K5

2019-10-14 08:35:41

360隨身wifi2代怎么使用？好用嗎？

2019-10-11 08:59:55

360旗下魯大師掛牌上市系中國首個硬件評測供應商

2019-10-11 08:54:28

華為Mate30 Pro系統迎更新新增超高清夜攝功能

2019-10-11 08:49:58

華為P40Pro概念圖：麒麟990+鴻蒙系統前后配7顆鏡頭

2019-10-11 08:25:39

疑難解答

圖片精選

網友關注

精品国产青草久久久久福利

<li id="spc7x"><object id="spc7x"></object></li>

<rp id="spc7x"></rp>

<th id="spc7x"><pre id="spc7x"></pre></th>

<button id="spc7x"><acronym id="spc7x"></acronym></button>