2006-10-10

在Blogger Beta中,(自動)隱藏NavBar or 將NavBar置底

11/5 update: 新增(自動)隱藏NavBar
自動隱藏NavBar (Peek-A-Boo Blogger Navbar)
所謂自動隱藏NavBar,就跟windows裡自動隱藏工具列一樣,平常是隱藏的,要用到NavBar的功能時,將滑鼠移至上方,NavBar就會出現了! 在CSS中 " body{ "之前加入下列紅色語法

/* Use this with templates/template-twocol.html */
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,
FinishedOpacity=100)}

body {
 background:$bgcolor;
 margin:0;

只適用於 FireFox & Opera,IE7目前只能隱藏,沒辦法自動出現

Refernce:Blogger v3.0: Hovering Peek-A-Boo Blogger Navbar


在CSS中,body後加入下列語法

隱藏NavBar (Hide the NavBar)
/* === Hide the NavBar === */
.Navbar {
visibility:hidden;
display: none;
}
/* === Hide the NavBar === */


將NavBar置底 (Place the NavBar at the bottom of the page)
/* === Place the NavBar at bottom ===*/
body { position: relative; }
.Navbar{
position: absolute;
top: inherit;
bottom: -32px;
left: 0px;
margin-bottom: 0;

}
/* === Place the NavBar at bottom ===*/



Reference Link:Remove the NavBar

3 則留言:

Avatar X 提到...

looking good, thanks for the link.

墨竹軒 提到...

@Avatar

Thanks for your nice hack.

Ares 提到...

Navbar 置底的部分
再加句
width: 100%;
會比較好嗎 ??