Peekaboo Navbar :自動隱藏\顯示上方的 Navbar

幾乎所有隱藏/顯示的功能在網路上都稱作 Peekaboo (躲貓貓),相當地可愛,像是首頁隱藏內文,進入單篇文章再展開這個功能稱作 Peekaboo Post ,Archive Page 內的文章條列式開合也稱作 Peekaboo Recent Post, AJAX 動態選單收合動作也被戲稱為 Peekaboo Menu,要找尋類似的功能,當然以搜尋 Peekaboo 關鍵字為主來進行搜尋,找到相關 Code 的命中率相當地高。

使用 Blogger.com 的亞洲使用者有不少人不太喜歡 Blog 上方被嵌進的 Navbar,尤其是以台中港三地的使用者為最(當然,在 Publish via FTP 的設定中 Navbar 是可以取消的),但是這個 Navbar 其實有不少的功能,例如登入後在右上角可以直接進行 Post、進入 Layout 的修改、登出等,左上角則有搜尋 Blog 內文、使用 Next Blog 來隨意瀏覽 *BlogSpot.com 中其他使用者的 Blog,也能夠立即針對正在看的文章使用 Blog This 來發佈相關文章。

有些使用者是採用其他方式來取消這個 Navbar,有些使用者使用的語法也破壞 Template 內語法的完整性,沒了這一條 Bar 似乎也不像是在用 Blogger.com 了,那不如改用 Peekaboo Navbar 吧!只要在 CSS 設定的前頭放入底下兩行 CSS 設定,就可以讓 Navbar 自動隱藏,滑鼠經過時再展開,就像這邊的上方 Navbar 一樣

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

不過在測試的過程當中, Firefox 2.0 可以完全支援這個設定,但是在 IE7 中則完全看不見這條 BAR,我現在沒用 IE6 ,所以完全沒有測試過,在原教學中後來補上測試結果:
Basic Support: IE6 & IE7 (Hidden & Active=It is there invisible)
Semi Supported: Opera 9.0 and up. (a litle flickery, and can be activated by clicking on the search field too)
Full Support: Firefox, Iceweasel(linux),Flock, MZS6,Netscape, Safari & camino(linux)
可以參考一下。如果可以再進一步像 Wordpress.com 一樣設定成登入後才顯示 Navbar 就更好了,不過暫時還不知道該怎麼處理。

這個網誌中的熱門文章

Gatsby 廣告中木村拓哉機械舞的背後

Google Doodle : Pacman 小精靈

玩玩軟路由系統