CSSと簡単なJSでできるドロワーメニューの実装方法｜notes by SHARESL
はじめに WEBサイトでよくある実装ですが、スマホ表示の時にいわゆる「ハンバーガーボタン」などを作ってメニューを隠し、タップすると隠していたメニューを大きく開くような「ドロワーメニュー（Drawer Menu）」と呼ばれるメニュー。 スマホサイトでよく使われる手法ですね。今回はその実装方法をメモ。 実装内容 まず実際の画面はこちら。 ドロワーメニューのデモ 一応、スマホでもPCでも動くように作っています。 Githubにソースコードを置いてますのでコードを詳しく見たい方はどうぞ。 https://github.com/inos3910/drawer-menu HTML ヘッダーの中にハンバーガーボタンとメニューを用意します。 HTMLの書き方等に特に必須条件はないです。ボタンを置く位置もデザインによって様々なので自由に配置して大丈夫です。今回のデモではヘッダーの中にボタンとメニューを配置す
CSSのみでドロワーメニューをつくったぞい - みかづきブログ その3
DEMO See the Pen Drawer Menu made from CSS only by kimmy (@kimmy) on CodePen. チェックボックス、隣接セレクタ、checked擬似クラス、target擬似クラスを活用してJavaScript無しでの動作を実現しています。 HTML <input id="btnMenu" type="checkbox" class="btn"/> <nav id="menu"><a href="#a" class="btn">MENU_A</a><a href="#b" class="btn">MENU_B</a><a href="#c" class="btn">MENU_C</a><a href="#d" class="btn">MENU_D</a></nav> <div id="a" class="result">A</div>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Jade/Pug】gulpでJade / Pugをコンパイルする – Snaplog
