PIXNET 快捷功能Bar ( topbar ) 似乎有更新了~
千呼萬喚的通知功能回魂了 ヽ(●´∀`●)ﾉ
不過有時現實是殘酷的~

像是功能有時用不到、色系跟版型不太搭之類的
於是自訂魂就會熊熊地燃了起來~

以下將以 CSS 為主軸來提供部落客自訂這條 topbar 的樣式
若需要其它種樣子也可以再討論討論~

※ 注意
這些 CSS 調整會影響別人瀏覽時，
可能找不到預期中的功能，
使用時要特別留意唷~

懶人包:
topbar 樣式生成器 + 樣式預覽
http://jsbin.com/xeyed/2

就先來分個幾類吧~

一直盯著看型

『新的 Bar 真好用~ 我要跟 FB 一樣一直盯著看~』
會固定在上方

#topbar {position: fixed; left:0; right:0; top: 0;}

眼不見為淨型

『你還在，我睡不著呀～』
一行 CSS 清光光

#topbar {display:none; }

口嫌體正直型

『我想，我們可能需要一點空間呼吸。』
旁邊呆著，我要時再出現就好 (這一類的呈現方式有很多種，可以自己想想哪款比較適合字己操作習慣)

/* 滑鼠滑到 topbar 的位置時才淡入出現 */
#topbar {
  opacity: 0;
  transition: all .3s;
}
#topbar:hover {
  opacity: 1;
}

有些用不到型

因為有很多個小功能，請將以下不需要的項目自行拿掉整行

.topbar__logo, /* 別秀 Logo */
.topbar__search, /* 用不到搜尋功能 */
.topbar__announce, /* 站內公告沒興趣 */
.topbar__notification, /* 通知不想看 */
.topbar__user, /* 後台功能不常用 */
.topbar__lang, /* 語系要辣不要切 */
#uccu {
  display: none;
}

特殊需求

釘在底部 for 阿一│魂飄[forest0sea]

示意圖
topbar fixed on bottom  

#topbar {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.topbar__lang__lists,
.topbar__user__lists {
  top: auto;
  bottom: 40px
}
.topbar__notification .topbar__dropdown-lists {
  top: auto;
  bottom: 50px;
}
.topbar__notification .topbar__dropdown-lists:before {
  top: auto;
  bottom: -26px;
  border-top-color: #ADADAD;
  border-bottom-color: transparent;
}
.topbar__notification .topbar__dropdown-lists:after {
  top: auto;
  bottom: -23px;
  border-top-color: #FFF;
  border-bottom-color: transparent;
}
.topbar__search__suggestion {
  top: auto;
  bottom: 30px;
}
.topbar__search__btns {
  -webkit-transition: all .2s;
  transition: all .2s;
}
.topbar__search__btns:hover {
  margin-top: -30px;
}
.topbar__search__btns:after {
  top: auto;
  bottom: 0;
}
相关文章