自適應選單中常見的漢堡選單的實作經驗和故障排除。關鍵在於：利用 JavaScript 控制 CSS的Class的刪除與新增(toggle)，並搭配一些隱藏技巧。
實作步驟
1. HTML 架構
別忘記到 jQuery 官網，並將 script 加入。同時，Font Awesome 上頭已經有免費的圖案可以利用，也別忘記引入。
|
1 2 3 4 5 6 7 8 |
<a href="#" class="showMenu"><i class="fas fa-bars"></i></a> <ul class="menu"> <li><a href="#home">home</a></li> <li><a href="#about">about</a></li> <li><a href="#service">service</a></li> <li><a href="#portfolio">portfolio</a></li> </ul> |
2. JavaScript 架構
本次需要利用的 jQuery，這是一個基於 JavaScript 而興起的函式庫(Library)，具有跨瀏覽器的特性，可以降低因使用者瀏覽器的差異，而衍生的一連串相容性問題。
本次是利用其 toggleClass 的功能，在 body 上添加/關閉 特定的 Class 屬性，達到「當使用者點擊選單選項時，導覽列自動收合」的效果。
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function () { $('.showMenu').on('click', function (event) { event.preventDefault(); $('body').toggleClass('menu-show'); }); $(".menu li a").on("click", function (event) { $('body').toggleClass('menu-show'); }); }); |
3. CSS 架構
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
/*電腦版時，不要顯示圖示*/ .showMenu{ display:none; } /*手機版時的狀態*/ @media (max-width: 576px) { .menu { /*隱藏選單，將最大高度設為0，overflow的文字就不會顯示*/ max-height: 0px; overflow: hidden; /*載入時漸變效果*/ transition: max-height 2.3s; margin-top: 1px; /*絕對定位疊在網頁上，並且利用上頭的隱藏技巧*/ position: absolute; z-index: 100; top: 90px; /* left:0 right:0表示滿版 */ left: 0; right: 0; background: rgb(49, 49, 49); text-align: center; } .menu li{ float: none; } .menu li a{ transition: all 0.3s; color:white; } .menu li a:hover{ background: #69CA62; } /*RWD時，選單圖示的位置*/ .showMenu{ display:block; float: right; margin: 1em; font-size:20px; color:black; } /*jQ點擊後動態在 body 加上 class ，藉著修改 max-height，畫面就顯示了*/ .menu-show .menu{ max-height: 500px } } |
