成品連結:演示
技巧1:
滑動選單基本上就在寫CSS,先用CSS寫出想要的樣子,要將子選項寫在選項當中HTML:
<div id="home-menu"> <div class="title">全站分類/div> <div class="menu1"> <li><a href="#"><h1>筆記型電腦</h1></a> <dl> <dt> <a href="#"><h2>ACER 宏碁</h2></a> <a href="#"><h2>ASUS 華碩</h2></a> <a href="#"><h2>HP 惠普</h2></a> <a href="#"><h2>LENOVO 聯想</h2></a> <a href="#"><h2>MSI 微星</h2></a> </dt> <dt> <a href="#"><h2>文書上網</h2></a> <a href="#"><h2>輕薄時尚</h2></a> <a href="#"><h2>影音娛樂</h2></a> <a href="#"><h2>行動商務</h2></a> <a href="#"><h2>遊戲電競</h2></a> <a href="#"><h2>大尺吋</h2></a> </dt> </dl> </li> <li><a href="#"><h1>桌上型電腦</h1></a></li> <li><a href="#"><h1>平板電腦</h1></a></li> <li><a href="#"><h1>DIY 零組件</h1></a></li> <li><a href="#"><h1>儲存裝置</h1></a></li> <li><a href="#"><h1>週邊耗材</h1></a></li> <li><a href="#"><h1>印表機及耗材</h1></a></li> <li><a href="#"><h1>遊戲軟體</h1></a></li> </div> </div>CSS:
h1,h2,h3 { padding:0px; margin:0px; font-weight:normal; } a:link, a:visited { color:#5b5247; text-decoration: none; } a:hover { color:#5b5247; text-decoration: none; } li { list-style: none; } /****** home-menu:start ******/ #home-menu { width:160px; padding-left:10px; float:left; } #home-menu .menu1 a { padding-left:10px; list-style: none; margin-right:20px; color:#333; height:28px; padding-left:10px; padding-top:7px; display:block; font-size:15px; letter-spacing:1px; } #home-menu .menu1 h1 { font-size:15px; } #home-menu .title { border-bottom: 1px solid #999; height: 25px; color: #333; padding-left: 10px; font-weight: bold; margin-right:20px; } #home-menu .menu1 { padding-top:10px; } #home-menu .menu1 a:hover{ background: #A8FFFF; } #home-menu .line { border-bottom: 1px solid #999; margin:15px 0; } #home-menu .menu1 li { position:relative; } #home-menu .menu1 dl { position: absolute; top:-30px; left:140px; background-color:#FFF; border:1px solid #DDD; padding:10px 15px 5px 15px; min-width:160px; min-height:360px; box-shadow:2px 2px 5px #999; z-index:10; /*display:none;*/ } #home-menu .menu1 dl a{ margin:3px 0 0 0; padding:5px; font-size:15px; color:#333; display:block; height:auto; } #home-menu .menu1 dl h2{ font-size:15px; } #home-menu .menu1 dl dd:hover{ background: #A8FFFF; } /****** home-menu:end ******/
技巧2:
在把子選單隱藏,用JS讓她動#home-menu .menu1 dl { position: absolute; top:-30px; left:140px; background-color:#FFF; border:1px solid #DDD; padding:10px 15px 5px 15px; min-width:160px; min-height:360px; box-shadow:2px 2px 5px #999; z-index:10; display:none; }
JS:
$("#home-menu .menu1 li").hover(function(){ $(this).find("dl").show(); },function (){ $(this).find("dl").hide(); });