單頁網站/RWD

HTML,CSS

HTML

1. tabindex：HTML 的全局屬性(Global Attribute)，控制網頁元素是否能接收鍵盤焦點(如按下 Tab 鍵)以及鍵盤導航的順序。
2. aria-label：告訴讀屏軟件某個元素是什麼。
3. aria-controls：識別其內容或呈現受到設定該屬性之元素所控制的元素

主要元件

開關

<input type='checkbox' id='menu-switcher' aria-label='切換主要選單' aria-controls='xo-globalnav' />
<label id='menu-toggle' for='menu-switcher' title='開啟／關閉選單'>
	<span class='hamburger-line' aria-hidden='true'></span>
</label>

CSS：

#menu-switcher,#menu-toggle {display:none;}
@media screen and (max-width:768px) {
 #menu-switcher {display:block;position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;}
 #menu-switcher:focus-visible ~ #xo-banner #menu-toggle {outline:3px solid #1251c6;outline-offset:2px;}
 #menu-toggle {display:flex;align-items:center;justify-content:center;position:absolute;right:12px;top:50%;transform:translateY(-50%);width:48px;height:48px;padding:10px;border:0;border-radius:4px;background:#000;color:#fff;cursor:pointer;}
 .hamburger-line {display:block;width:28px;height:3px;background:#fff;margin:auto;box-shadow:0 9px 0 #fff,0 -9px 0 #fff;}
 #menu-switcher:checked ~ #xo-globalnav {display:block;}
 #menu-switcher:checked ~ #xo-banner .hamburger-line {background:transparent;box-shadow:none;position:relative;}
 #menu-switcher:checked ~ #xo-banner .hamburger-line::before,
 #menu-switcher:checked ~ #xo-banner .hamburger-line::after {content:'';position:absolute;left:0;top:0;width:28px;height:3px;background:#fff;}
 #menu-switcher:checked ~ #xo-banner .hamburger-line::before {transform:rotate(45deg);}
 #menu-switcher:checked ~ #xo-banner .hamburger-line::after {transform:rotate(-45deg);}
}

1. menu-switcher：是一個 input type 為 checkbox