範例

Bootstrap -navpanel 作業拆解示意圖

部屬

  1. 容器空間 ( 最外層,像 Bootstrap btn 的設定 )
  2. 內層元素
  3. 元素互動
  4. 主題化 ( 亮色、暗色 )
  5. 變數 variables ( 會重複使用到的 )
  6. 捲軸 scroll bar ( 這邊捲軸有另外做客製,捲軸設定可參考 卡斯伯 – Webkit 自定義Scroll Bar外觀 )

navpanle 實作遇到的問題簡易統整 出處

  • 點選+ Level 做切換時,子選單收合起來背景色比內容文字早消失?
    • 背景色與內陰影直接設定於 .navpanel-nav li ul 內,而不是等到 .show 內再設定,這樣就不會有不同屬性轉場時間和順序的問題
  • 點選+ Level 展開子選單,子選單左側主色( $primary )提示被擋住,只剩 + Level 的左側主色提示 ?
    • 正常排版下,子元素會在父元素上方。
    • 所以 .navpanel-nav li ul 會擋住 .navpanel-nav li。建議的解法是直接在更下一層(但在畫面更上方) .navpanel-nav li ul li 做設定將 .navpanel-nav ul 擋住。

資料來源

最後修改日期: 3 7 月, 2020

作者