メニューボタン（ハンバーガー）一旦開発完了

クラス名

bl_btnMenu

マークアップ例

<button class="bl_btnMenu js_spNavToggle" type="button" aria-hidden="true">
	<span class="bl_btnMenu_icon"></span>
	<span class="el_readerOnly">メニュー</span>
</button>
	
<div class="" id="site-navigation">
	<!-- コントロール対象 -->
</div>

定義

機能
スマホ用のグローバルナビなどを開閉するボタン

あしらい・振る舞い
aria属性も適切に使用すること
スクリーンリーダー向けの説明などを提供する

特記事項
bl_ 接頭辞だがサイズ的にエレメントに分類

余談　2021-11-09

内部の要素のレイアウトにいろいろと苦心していたのだけど、何もしなくても上下左右センターに寄ることに気がついて唖然としている。
そのため、アイコンは何もしなくてもセンターの恩恵に預かり、MENUなどの文字を入れる際には絶対配置にしてしまう方が、バランスが取りやすいと考え、少しCSSをいじりました。

JSを修正　2022-05-24

ウインドウのリサイズを察知していろいろ処理をするようにしていましたが、どうにも上手くいかないので、bodyのクラス名の操作をするだけのjQueryに修正しました。それに伴い、HTMLのWAI-ARIA属性についても見直しました。

ファイルパス

利用しているライブラリ

• jQuery
• sp-nav-toggle.js ナビゲーション用

Change Log

1. 開発開始：2021-07-16
2. 2021-11-09　CSSを微修正
3. 2022-05-24　JSを変更、bodyのクラス名変化のみにする
4. 最終更新：2022-05-24