CSSだけでドロワーメニュー

概要

jQueryを使ったドロワーメニューなら簡単に設置できるんだろうけど、使わないで済むならそのほうがいいね。
ということで・・・

■疑似クラス「:checked」
該当要素がチェックされた状態のときのプロパティを指定できるよ。
でも該当要素のスタイルしか設定できないのね。

■隣接セレクタ「+」
隣合う要素をセットで指定できるよ。

これらの条件さえ整えば同時に使うことで#openがチェックされた状態のときの#menuのプロパティを設定できるね!

■サンプルのHTML

sample.html

※ハンバーガーボタンはfont-awesomeを使っています。

■共通CSS

css/drawer_common.css

左から出てくるドロワーメニューのCSS

css/drawer_left.css

このCSSをサンプルHTMLに追加

CSSのみで左から出てくるドロワーメニューサンプル

◆右から出てくるドロワーメニューのCSS

css/drawer_right.css

このCSSをサンプルHTMLに追加

CSSのみで右から出てくるドロワーメニューサンプル

◆上から出てくるドロワーメニューのCSS

css/drawer_top.css

このCSSをサンプルHTMLに追加

CSSのみで上から出てくるドロワーメニューサンプル

シェアする

  • このエントリーをはてなブックマークに追加

フォローする