最近趁過年時，幫綜合口味的關於頁面做了「浮動側欄動態選單」，如果想看效果的話可以先去綜合口味的關於頁面玩玩看～喜歡的話再來照這個教學做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;然後數值自己設定，數值越大就變成越右邊！
