css  
主要是針對 [公告] 部落格「快捷功能BAR」改版介紹 所做的調整

[關於pixnet 上方 BAR的自行調整 ]

隱藏上方 BAR (好孩子不要學)

#top_bar {

display:none; important!

}

收合式上方 Bar

#top_bar:hover {
top: 0px;
}

#top_bar {
top: -35px;
}

當移動到上方的時候會浮現, 一般時候隱藏 (top: -35px)
同樣的邏輯也可以應用在側欄, 以我的部落格為例:

#links:hover{

margin-left: -310px;

}

#links{

margin-left: -80px;

}

設 -80px是因為還是要留一點點讓人家知道右邊是有東西的. 


選單列滑動時就顯示, 滑鼠移出後隱藏

<script type='text/javascript'>
jQuery('.user_function.li_wide').on({
'mouseleave': function() { jQuery(this).css('height', 39); },
'mouseover': function() { jQuery(this).css('height', 200); }
}
);
</script>

這指的是上方 Bar的選單列, 現在要點一下才會出現,
加上這段 jquery可以讓滑鼠移到就出現,
移開就自動收起來.


js 可以加在公告板位, 頁尾描述, 或者任何一個自定側欄中 .
css 則是去修改 css原始碼 . 路徑: 部落格後台 -> 樣式管理 -> 自定樣式 -> CSS原始碼編輯 

arrow
arrow
    文章標籤
    css 上方bar
    全站熱搜

    艾草 發表在 痞客邦 留言(0) 人氣()