漢堡選單 全螢幕主選單．nav menu
1-01 .toggleClass()
語法 : ( 添加/移除 Class Name )
- 在元素上「添加或移除」一個或多個 .class 名稱。
- 像切換開關 ( 切換 .class ) 一樣。
- .class 名稱 “存在” 時就移除它 ( 關閉掉 )，“不存在” 就添加回元素上 ( 重新打開 )。
實作 : ( 開啟/關閉 主選單 )
- 在主選單<nav>元素上添加「.is-open」來 display: block 顯示/開啟主選單。
- 在主選單<nav>元素上移除「.is-open」來 display: none 隱藏/關閉主選單。
結構
...
<!--//導覽列-->
<header>
<h1><!--標題--></h1>
<a><!--圖示( 返回 )--></a>
<button class="navbtn" title="開啟選單"><!--圖示( 漢堡選單 )--></button>
<button><!--圖示( 搜尋 )--></button>
</header>
<!--//主選單-->
<nav class="is-open">
<button class="closebtn" title="關閉選單"><!--圖示( ✖ 符號 )--></button>
<ul><!--選單項目( 開始游戲、複習單字、新增單字卡 )--></ul>
</nav>
...
樣式
…
nav {
…
position: fixed;
…
display: none; /* 關閉主選單 */
…
}
nav.is-open {
display: block; /* 開啟主選單 */
}
…
互動
$(function () {
$('header .navbtn, nav .closebtn').on('click', function () { // 點擊導覽列的漢堡選單按鈕或主選單的關閉按鈕，
$('nav').toggleClass('is-open'); // 來切換(顯示/隱藏)主選單。
// $('nav').slideToggle('is-open'); // 使用「上下滑動」效果來切換(顯示/隱藏)主選單
});
});
程式碼
JQuery nav menu：fullscreen overlay navigation menu - CodePen
語法
.toggleClass() - jQuery API 文件
.slideToggle() - jQuery API 文件
補充
- toggleClass—新手一步一腳印之簡單用jQuery控制CSS - Tedious Life
- jQuery 筆記 - 選擇器的選法與基本動畫效果語法 - TimCodingBlog
- jQuery的差別：$().click()和(document).on('click', ... - 熱愛前端的17號誒 - 博客園
- jquery click 事件的長相差別？ - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天
其它
關於網站主選單的四種類型｜關於那個三條線按鈕 - 筱涵｜Hannah的沙龍
Transforming Borders into Cool CSS Triangles | Quick Tutorial - Optimistic Web