Responsive Web Design-響應式選單-漢堡選單+選單固定 (語法範例)

本範例有兩種寫法： (一)為使用jQuery 的 slideToggle

                                  (二)為使用jQuery 增加class (toggleClass)                              

但我這裡只有(一)，(二)有時間的話再列出。

【漢堡式選單】右上角menu點開，跳出單欄式一個階層選單

全螢幕瀏覽：

手機瀏覽：

 

【 純html+css沒有jQuery】
特別列出來是因為我覺得在寫隱藏和跳出表單時就有點複雜，所以拉出來寫。
這裡會放表單沒有關起來時後樣子。

在@media(max-width) { .menu{ } } 不隱藏高度
選單在手機瀏覽時是打開



在@media(max-width) { .menu{ max-height:0px; overflow:hidden; } } 隱藏高度
選單在手機瀏覽時是不見

【jQuery 增加class (toggleClass)】
本來高度是關起來的，點擊右上menu跳出選單，這裡會用jQuery動態增加class，增加class同時增加高度方式

注意：toggleClass 是在所欲加的class前面再加新的class

{. new class .original  class } 如果加在後面動態效果會跑不動{.original  class. new class  }

這裡用 on click 不是click 原因是因為click是點擊事件，但是在頁面加載完之後，jQuery 事件新添加的元素，用click的話是無法獲取元素的。

但如果要再綁訂新的事件，需要用on來獲取新的元素

簡單的說頁面加載完成時候頁面顯示的元素可以用on，也可以用click，但是頁面加載完成之後後期再追加的元素只能用on 。



【選單固定-desktop menu固定】
內容多，不管螢幕往下拉或滑，menu都會跟著跑的寫法.

本來header是寫 .header {position: relative;} 改寫成.header{position: sticky;} 並加上背景色 變成.header{position: sticky;background-color: #3A0088;} ，因為header本來是透明的，固定在上方，下方content滑動下方文字會透出來，要給她一個底色蓋掉。


【選單固定-mobile固定】

在@media 寫  @media (max-width:767px) { .header { position:fixed ; width:100% ;} 如果desktop版本的header也有設固定，那麼背景就已經有設顏色，這裡不用重複設定。如果desktop版本menu沒有設固定，menu也不需要設定被景色，在@media裡面反而需要設定。

【本範例含desktop+mobile的menu固定】桌面版本點開codepen進去看會更詳細

See the Pen rwd-menu-hamburger(3) by peiyun (@corly74) on CodePen.

【更多選單可以去這個大大神Q超人網誌去看，從裡面爬文學到很多】