文章前提

固定式漢堡選單設計

固定式漢堡選單 範例

步驟
固定式漢堡選單與上一篇文章漢堡選單步驟差不多，差在後方header與content處理方式，前段就當複習囉XD

• 此篇載具一樣由桌機寫到手機

• 架設好桌機架構header(logo , desktop-menu , mobile-menu )、content

• 開始進入平板手機的media query設定→ @media(max-width:768px){ }

  • desktop-menu與header分別做absolute與relative讓desktop-menu移至header下方，並把寬度100%左置右延伸。
  • desktop-menu隱藏，另外加動態active，讓jQuery啟用它

• 把header固定於上方，網頁往下滑時依舊於原處

.header{
    Position:fixed;
}

• header固定住時，content會被遮住。content需往下推一個header高度

.content{
    Padding:/*header高度*/;
}

固定式漢堡選單，小螢幕需注意

使用position fixed效果時，要留意header fixed是否會佔手機板面太大的空間，
有些效能較低的手機可能會不支援position fixed的作法。