topCATEGORY全ての記事Tipswebサイトインタビューデザインニュースマークアップ2019.08.29#webサイト【コピペで簡単】JSを使用しないドロワーメニューの実装方法こんにちは。8月も残すところわずかとなりました。今年の夏はBBQや海にも遊びに行きましたが、何か夏らしい事をやり残してはいないかとそわそわしている小林です。今回はWebサイトでよく見かける、ドロワーメニューの実装方法について書いて見ようと思います。ドロワーメニューとはそもそも「ドロワー」とは、引き出しといった意味の名詞になります。普段は格納されていますが、画面外から引き出して表示させるナビゲーションメニューがそれに当たります。パソコンのブラウザではそこまで利便性を感じられませんが、表示領域の少ないスマホやタブレットではとても有効的な手段ではないでしょうか。CSSのみでドロワーメニューを実装する方法クリックやタップでドロワーメニューを展開させる場合、jQueryを使用してプログラムを組むのが一般的だと思いますが、今回はCSSのみでドロワーメニューを開閉させてみたいと思います。・CSSのみで実装したドロワーメニューデモ右上の3本線をクリックすることでドロワーメニューを開閉させる事ができます。メニューが開閉する仕組み(HTML)ページ全体のHTMLの構造は下記の通りです。Sample</h1></div></div></body><input>タグ一つに対して、<label>タグを2つ用意してあります。ひとつは開くと閉じるの両方で、もうひとつを閉じる用としています。class=”close”></label>を配置しておき、コンテンツエリアには見えないcheckboxをそれらのスイッチの役割として置いています。チェックボックスがチェックされる事で、スタイルが入り切りされる仕組みです。CSSの記述コンテンツ部分のCSSは割愛しています。none;で非表示にしていますが、2つのlabel要素と紐づいている為、しっかり仕事をしてくれています。最後に:checked擬似クラスはIE9以上で使用できるみたいですが、古いブラウザを考慮しなければいけない場合は使用を控えた方が良いかもしれません。表示領域の少ないスマホでは確実に便利な手段ではないでしょうか。reserved.プライバシーポリシ。