浮動側欄動態選單簡易教學



最近趁過年時,幫綜合口味的關於頁面做了「浮動側欄動態選單」,如果想看效果的話可以先去綜合口味的關於頁面玩玩看~喜歡的話再來照這個教學做XD



step1:

將想要有「浮動側欄動態選單」的網頁或文章,從「撰寫」模式(預設)切換到「HTML」模式,並在文章最前方貼入以下內容:

<!--浮動右側欄位Start-->

 <!--part1Start-->
<style>
.floatMenu{
 width:110px; //如果每個區塊的字數較多,請自行調大這裡的數值。
 margin-left:672px; //如果沒有剛好吸附在右邊的話,請自行調整這裡的數值,數字越大越右邊。(想吸附在左邊的話請見附註4)
 position:fixed;
 top:20%; //如果想要更改出現的高度的話,請自行調整這裡的數值,數字越大越下面。
}

 .pointer {
 //這段之下是讓效果變柔和的效果,可自行修改「.25」的數值調整速度,若不需要可拿掉XD  
 -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; 
-o-transition:all .25s ease-in-out; transition:all .25s ease-in-out;
 //這段之上是讓效果變柔和的效果,可自行修改「.25」的數值調整速度,若不需要可拿掉XD 
 
 background-color:#fff; //每個項目的顏色。
 text-indent:0;
 display:inline-block;
 font-size:1em; //項目的字體大小,若單位不習慣em可自行改為px。
 font-style:normal;
 height:40px; //每個項目的高度。
 line-height:40px; //行高,請跟項目的高度一樣。
 width:100px; //每個項目的寬度。
 text-decoration:none;
 text-align:center;
 margin-bottom:5px//每個項目的間距。
 border-left: #31BBBB 10px solid; //每個項目前面的那條顏色及寬度,想換色就修改#的內容,改粗細則修改10px這數值。
}

 .pointer:hover{
 border-left: #f64c83 5px solid; //滑鼠經過時,每個項目前面的那條顏色及寬度;想換色就修改#的內容,改粗細則修改5px這個數值。由於滑鼠經過時會從10px變成5px,所以會產生動態效果,若只想單純換色就將數值改為10px即可。
}
</style>
<!--part1End, made by chodaict-->

 <!--part2Start-->
<script>
$(function(){
 $('#aboutA').click(function(){ $('html,body').animate({scrollTop:$('#about').offset().top}, 800); }); //這邊注意,一個是「aboutA」,另一個是「about」,可自行命名。
 $('#nameA').click(function(){ $('html,body').animate({scrollTop:$('#name').offset().top}, 800); }); //這邊注意,一個是「nameA」,另一個是「name」,可自行命名。
 $('#authorA').click(function(){ $('html,body').animate({scrollTop:$('#author').offset().top}, 800); }); //這邊注意,一個是「authorA」,另一個是「author」,可自行命名。
});
</script>
<div class="floatMenu">
<a class="pointer" href="#about" id="aboutA"> 關於我們</a><!--這邊id要有A,href則不必。-->
<a class="pointer" href="#name" id="nameA">  名稱由來</a><!--這邊id要有A,href則不必。-->
<a class="pointer" href="#author" id="authorA">作者簡介</a><!--這邊id要有A,href則不。必-->

</div>
<!--part2End, made by chodaict-->

 <!--浮動右側欄位End, made by chodaict-->





step2:

接下來,一樣在Html模式,把文章的段落用div標籤分隔開來:
<div id="about">
區塊文章內容,文章寫在這區域內!
</div>

 <div id="name">
區塊文章內容,文章寫在這區域內!
</div>

 <div id="author">
區塊文章內容,文章寫在這區域內!
</div>
⋯⋯依此類推。如此一來,就擁有跟綜合口味的關於頁面一樣的浮動側欄動態選單了!







附註:

  1. 樣式歡迎自行修改!
  2. 在step1中橘色字的部分,如果會在很多頁面用到的話,可以考慮直接貼到範本的程式碼內,到搜尋</head>並貼在前一行。
  3. 在step1及step2中引號內的aboutaboutA皆可以自行修改,但要注意名字要一樣,例如改成hellohelloA是沒問題的,否則會沒有效果。
  4. 如果希望浮動欄改到左邊的話,把margin-left:672px;這段改成margin-right:672px;然後數值自己設定,數值越大就變成越右邊!
Read More...