#navbar-iframe {
height:0px;
visibility:hidden;
display:none;}
另一種是讓Navigation bar暫時消失:
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
但第二種mouse over時Navigation bar又會出現,測試在IE是不work的,Firefox則是OK,下面這種隱藏的語法沒辦法把自己的blog標題往上提就是了,兩種都是簡單將程式碼加入template就可以!
Navigation bar自動隱藏版的,經過簡單的修改就可以變得更好用,不過還是Firefox專用啦!
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=50);height:5px}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100);height:30px}
加入深駝色的高度參數height的變化,整個呈現就成了我的blog現在Navigation bar的模樣,除了會自動隱藏,隱藏時頁面上方也不會很大一塊空白。修改了這個地方:
#header-wrapper {
margin:16px 0 0 0;
將header-wrapper的margin參數的第1個數字,也就是標題區塊的上方空隙,由22px減到16px,以求得更好的視覺效果。做完了之後,發覺Navigation bar整個呈現與動態都差不多了
沒有留言:
張貼留言