最近趁過年時，幫
綜合口味的關於頁面做了「
浮動側欄動態選單」，如果想看效果的話可以先去
綜合口味的關於頁面玩玩看～喜歡的話再來照這個教學做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>
⋯⋯依此類推。如此一來，就擁有跟
綜合口味的關於頁面一樣的
浮動側欄動態選單了！
附註：
- 樣式歡迎自行修改！
- 在step1中橘色字的部分，如果會在很多頁面用到的話，可以考慮直接貼到範本的程式碼內，到搜尋</head>並貼在前一行。
- 在step1及step2中引號內的about或aboutA皆可以自行修改，但要注意名字要一樣，例如改成hello和helloA是沒問題的，否則會沒有效果。
- 如果希望浮動欄改到左邊的話，把margin-left:672px;這段改成margin-right:672px;然後數值自己設定，數值越大就變成越右邊！
Read More...
