2008年3月1日 星期六
[Blogger]新增浮動Navigation Bar
- 找到 ]]></b:skin> 所在位置，並將下列Code加在該位置之前：
/*-- smallnav--*/
#smallnav{
position:fixed;
text-align:left;
margin-left:-20px;
margin-top:17px;
}
* html #smallnav{ /*IE only*/
position:absolute;
}
#smallnav a img{
opacity:0.6;
-moz-opacity:0.6;
filter:alpha(Opacity=60);
}
#smallnav a:hover img{
opacity:1;
-moz-opacity:1;
filter:alpha(Opacity=100);
position:relative;top:1px;left:1px;
}
* html #smallnav a img{
filter:alpha(Opacity=100);
}
#smallnav img{
margin-bottom: 5px;
}
* html .smallnav{
margin-bottom: 7px;
}
實際狀況中，我將上列定義放在 #footer-wrapper{} 之後，上列 #smallnav{} 定義中的 margin-left 與 margin-top 可用來調整navbar要顯示的位置。 - 在 ]]></b:skin> 位置之後，加入以下Code：
<script src='http://bloggertips.googlecode.com/files/prototype.js' type='text/javascript'></script>
<script src='http://bloggertips.googlecode.com/files/scriptaculous.js?load=effects' type='text/javascript'></script> - 在 <body> 標籤之後，找到 <div id='main-wrapper'> ，並將下列Code依照需求修改並放置其後：
<div id='smallnav'>
<span>
<a href='http://網誌首頁網址/' style='border:0;' title='Home || 網誌首頁'><img alt='Home || 網誌首頁' class='smallnav' src='按鈕圖片網址'/></a>
<br/>
<a href='javascript:scroll(0,0)' style='border:0;' title='Top of Page || 回到頁首'><img alt='Top of Page || 回到頁首' class='smallnav' src='按鈕圖片網址'/></a>
<br/>
<a href='http://相簿網址/' style='border:0;' target='_blank' title='Gallery || Flickr相簿'><img alt='Gallery || Flickr相簿' class='smallnav' src='按鈕圖片網址'/></a>
<br/>
</span>
</div>
欲增加連結按鈕，可新增<a>...</a>至<br/>的Code - 若欲在游標移至navbar上時，出現泡泡狀說明文字，可在 <head> 後加入下列Code：
<script src='http://bloggertips.googlecode.com/files/BubbleTooltips.js' type='text/javascript'></script>
<script type='text/javascript'>
window.onload=function(){enableTooltips("smallnav");};
</script> - 若要解決navbar在IE6.0之下無法固定住的問題，可在navbar的CSS code之前加上下列Code：
* html{overflow-y:hidden;overflow-x:hidden;}
body{overflow-y:auto;height:100%;margin:0;margin-right:13px;}
上面主要是隱藏html（Browser最右邊）的y捲軸，並將body高度設定為100％，讓body來決定是否顯示其捲軸。之後在 * html #smallnav{} 裡將position設為absolute，如此便可做出同firefox裡的fixed效果。
此時看到的y捲軸是body的不是html的，但這樣會有個問題，瀏覽器會跑出x捲軸, 每次都必須要向右拉才看得到y捲軸，若是隱藏起來（為了美觀）就沒法使用y捲軸。
因此只好用一個不怎麼漂亮的方法，那就是將body的margin-right設個值讓y捲軸往左邊跑一點，我把這個值設成15px差不多就可以了。Firefox裡會跑出一點空白但是不太影響整體美觀，目前也只能這樣了。
參考資料：
No comments yet