Javascript, 網頁設計

jQuery教學-滑動式開始選單

梅干2010/06/30
梅問題-jQuery教學-滑動式開始選單
  眼尖的朋友應該有發現到,當進到文章時,向下拉底部就會出現一個像開始功能表選單,可直接初換到所需的選單,由於現在的網頁愈來愈長,把一些常用的功能加在底部確實有它的必要性,這樣就不用看完文時,又得將捲軸向上拉,回到上層才點選單,而梅干作了點調整,讓大家更便於直接套用,之後要增減子選單,只要直接從HTML修改就可以了,之後只要有子選單的,右邊就會出現一個箭頭, 這一切都要歸功於好友男丁的幫忙, 讓這一個功能更加完善,好啦!有興趣的朋友就一塊來看看,這選單要如何來套用。

放在<head>.....</head>之間:
#css
body{margin:0; padding:0;}
a{text-decoration: none;}
img{border:0;}
ul{margin:0; padding:0;}
ul li{
margin:0;
padding:0;
list-style-type: none;
}

/* minwtStartMneu Style Str================================================================================================ */#minwt_StartMneuBar{
width:100%;
height:25px;
background:#333;
position:absolute;
bottom:0;
}

#minwt_startBtn{
position:absolute;
left:20px;
line-height:25px;
width:70px;
background:url(https://ds.minwt.com.tw/img/icon/minwticon.png) no-repeat 10px 0 #000; 
padding-left:40px;
}

#minwt_startBtn a{
color:#fff;
font-size:15px;
text-decoration: none;
}

#minwt_mainMenu{
position:absolute;
bottom:25px;
left:20px;
width:200px;
height:500px;
background:#222;
padding:10px;
display:none;
text-align:left;
}
#minwt_mainMenu a{color:#ccc;}
#minwt_mainMenu li{
border-bottom:solid 1px #eee;
line-height:34px;
font-size:15px;
margin-top:5px;
padding-bottom:5px;
}
#minwt_mainMenu li img{padding-top:14px; padding-right:10px; float:right;}
#minwt_mainMenu li.ps{background:url(https://ds.minwt.com.tw/img/icon/ps.png) no-repeat 0 0; padding-left:42px;}
#minwt_mainMenu li.camera{background:url(https://ds.minwt.com.tw/img/icon/camera.png) no-repeat 0 0; padding-left:42px;}
#minwt_mainMenu li.flash{background:url(https://ds.minwt.com.tw/img/icon/fla.png) no-repeat 0 0; padding-left:42px;}
#minwt_mainMenu li.pc{background:url(https://ds.minwt.com.tw/img/icon/pc.png) no-repeat 0 0; padding-left:42px;}
#minwt_mainMenu li.mac{background:url(https://ds.minwt.com.tw/img/icon/mac.png) no-repeat 0 0; padding-left:42px;}
#minwt_mainMenu li.iphone{background:url(https://ds.minwt.com.tw/img/icon/iphone.png) no-repeat 0 0; padding-left:42px;}
#minwt_mainMenu li.css{background:url(https://ds.minwt.com.tw/img/icon/css.png) no-repeat 0 0; padding-left:42px;}
#minwt_mainMenu li.js{background:url(https://ds.minwt.com.tw/img/icon/js.png) no-repeat 0 0; padding-left:42px;}
#minwt_mainMenu li.webdesign{background:url(https://ds.minwt.com.tw/img/icon/webdesign.png) no-repeat 0 0; padding-left:42px;}
#minwt_mainMenu li.wp{background:url(https://ds.minwt.com.tw/img/icon/wp.png) no-repeat 0 0; padding-left:42px;}
#minwt_mainMenu li.all{background:#222;}

#minwt_mainMenu li ul{
position:absolute;
left:210px;
top:1px;
width:220px;
background:#404040;
border:solid 1px #757575;
display:none;
}
#minwt_mainMenu li ul li{padding:5px 15px;}
#minwt_mainMenu li ul li a{
font-size: 12px;
color: #fff;
text-decoration: none;
}
#minwt_mainMenu li ul li a:hover{color:#111;}
/* minwtStartMneu Style Str================================================================================================ */

#javascript
<script src="https://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>
<script language="javascript">
$(function(){
$(document).click(function(){
$("#minwt_mainMenu").css('display','none');
});
$("#minwt_mainMenu li").each(function(){
var $this = $(this);
//找尋#minwt_mainMenu li中的ul標籤是否>0
if($this.find("ul").length>0){
$(this).children("a").append("<img src=http://ds.minwt.com.tw/img/icon/arrow.png class=img>");
}
});

$("#minwt_startBtn a").click(function(){
if($("#minwt_mainMenu").is(":visible")){
$("#minwt_mainMenu").slideUp();
}else{
$("#minwt_mainMenu").slideDown();
$("#minwt_mainMenu ul").hide();
}

return false;
});

$("#minwt_mainMenu li a").click(function(){
var $this= $(this),
$parent = $this.parent(),
$next = $this.next("ul"),
_idx = $parent.index();//取得索引

if($next.length>0){
if($next.is(":visible")){//判斷顯示與否
$next.slideUp();
}else{
//先將父層兄弟的ul標籤關閉
$parent.siblings().find("ul").slideUp();
$next.css('top',55*_idx).slideDown();
}
//關閉連結
return false;
}
});


//消除連結虛線框
$("a").focus( function(){
$(this).blur();
});
   
});
</script>

放在<body>.....</body>之間:
#html
<div id="minwt_StartMneuBar">
  <div id="minwt_startBtn"><a href="#">梅選單</a></div>
   <ul id="minwt_mainMenu">
   <li class="ps">
        <a href="#">Photoshop</a>
        <ul>
                <li>
<a href="#">實用範例</a>
                <ul>
                    <li><a href="https://www.minwt.com/?tag=%E6%B1%BA%E6%88%B060%E7%A7%92">決戰60秒</a></li>
                        <li><a href="https://www.minwt.com/?tag=false-true">其假亂真</a></li>
                        <li><a href="https://www.minwt.com/?tag=beautiful">就是愛玩美</a></li>
<li class="all"><a href="https://www.minwt.com/?cat=4">▲顯示全部</a></li>
                    </ul>                
                </li>
                <li><a href="https://www.minwt.com/?cat=5">疑難雜症</a></li>
<li class="all"><a href="https://www.minwt.com/?cat=3">▲顯示全部</a></li>
            </ul>
      </li>
        <li class="camera"><a href="#">數位攝影</a>
        <ul>
                <li><a href="https://www.minwt.com/?cat=1076">基本應用</a></li>
                <li><a href="https://www.minwt.com/?cat=1074">商品攝影</a></li>
<li><a href="https://www.minwt.com/?cat=1073">器材分享</a></li>
<li class="all"><a href="https://www.minwt.com/?cat=19">▲顯示全部</a></li>
            </ul> 
        </li>
        <li class="flash"><a href="#">Flash</a>
<ul>
                <li><a href="https://www.minwt.com/?cat=8">AS3.0</a></li>
                <li><a href="https://www.minwt.com/?cat=7">AS2.0</a></li>
<li><a href="https://www.minwt.com/?cat=317">相關問題</a></li>
<li class="all"><a href="https://www.minwt.com/?cat=6">▲顯示全部</a></li>
            </ul> 
</li>
<li class="pc"><a href="#">電腦不求人</a>
<ul>
                <li><a href="https://www.minwt.com/?cat=244">USB</a> | <a href="https://www.minwt.com/?cat=373">PDF</a> | <a href="https://www.minwt.com/?cat=522">影像</a> | <a href="https://www.minwt.com/?cat=798">桌面</a> | <a href="https://www.minwt.com/?cat=1003">影音</a></li>               
<li><a href="https://www.minwt.com/?cat=1006">防毒</a> | <a href="https://www.minwt.com/?cat=1089">瀏覽器</a> | <a href="https://www.minwt.com/?cat=1183">Win7</a> | <a href="https://www.minwt.com/?cat=242">MSN</a> | <a href="https://www.minwt.com/?cat=243">網路</a></li>
<li><a href="https://www.minwt.com/?cat=247">系統</a> | <a href="https://www.minwt.com/?cat=246">備份</a> | <a href="https://www.minwt.com/?cat=245">不分類</a></li>
<li class="all"><a href="https://www.minwt.com/?cat=18">▲顯示全部</a></li>
            </ul> 
</li>
<li class="mac"><a href="https://www.minwt.com/?cat=17">MAC</a></li>
<li class="iphone"><a href="#">iPhone</a>
<ul>
                <li><a href="https://www.minwt.com/?cat=1347">火速上手</a></li>               
<li><a href="https://www.minwt.com/?cat=1348">JB教學應用</a></li>
<li><a href="https://www.minwt.com/?cat=1349">應用程式</a></li>
<li class="all"><a href="https://www.minwt.com/?cat=1189">▲顯示全部</a></li>
            </ul> 
</li>
<li class="css"><a href="#">css</a>
<ul>
                <li><a href="https://www.minwt.com/?cat=11">常用範例</a></li>               
<li><a href="https://www.minwt.com/?cat=12">輔助工具</a></li>
<li class="all"><a href="https://www.minwt.com/?cat=10">▲顯示全部</a></li>
            </ul> 
</li>
<li class="js"><a href="https://www.minwt.com/?cat=14">Javascript</a></li>
<li class="webdesign"><a href="https://www.minwt.com/?cat=16">網頁設計</a></li>
<li class="wp"><a href="https://www.minwt.com/?cat=55">Wordpress</a></li>
    </ul>
</div>

增減選單:
之後若要增減選單時,只要增加<ul><li>選單</li></ul>就可增加一組選單了,若要加入多組子選單只要在<li></li>中再包<ul><li>選單</li></ul>,這樣就會出現一層的子選單。

範例:
一層選單:

<ul>
  <li>選單1</li>
  <li>選單2</li>
  <li>選單3</li>
</ul>

二層選單:

<ul>
 <li>選單1
   <ul>
   <li>子選單1</li>
   <li>子選單2</li>
   <li>子選單3</li>
   </ul>

 </li>

  <li>選單2</li>
  <li>選單3</li>
</ul>

三層選單:

<ul>
  <li>選單1
  <ul>
   <li>子選單1
     <ul>
     <li>次選單1</li>
     <li>次選單2</li>
     <li>次選單3</li>
     </ul>

   </li>
   <li>子選單2</li>
   <li>子選單3</li>
   </ul>

 </li>

  <li>選單2</li>
  <li>選單3</li>
</ul>

※依此類推就可自行增減子選單。

  其實從原始碼各位應該會發現到CSS碼與jQ還多,確實是如此其實這個範例麻煩的地方就在於網頁結構,只要網頁結構拼的出來,剩下就是控制它的開關閉而已,所以會發現到CSS碼還是落落長。 
[範例預覽] [範例下載]
UAG軍規iPhone防摔殼