CSS – RYOB.net

レスポンシブサイトなどでよく使われる、メニューボタンをクリックするとページの端からニョロっと表示されるメニューをドロワーメニューといいます。jQueryなどで実装することが多いですが、HTMLとCSSだけで実装することもできます。 簡単に実装できるので、最近はHTMLとCSSのみでドロワーメニューを実装することが多いです。それでは、HTMLとCSSを使ったドロワーメニューの実装方法を解説します。 HTMLとCSSで実装したドロワーメニューの基本形 まずは、HTMLとCSSで実装したドロワーメニューの基本形を解説します。装飾は一切施していない最低限のソースコードです。 ドロワーメニューのHTMLは以下のようになります。 &lt;input type="checkbox" id="menu-toggle" class="menu-checkbox"> &lt;label for="menu-toggle" class="menu-button">メニューボタン&lt;/label> &lt;div class="drawer-menu"> &lt;ul> &lt;li>&lt;a href="#">メニュー1&lt;/a>&lt;/li> &lt;li>&lt;a href="#">メニュー2&lt;/a>&lt;/li> &lt;li>&lt;a href="#">メニュー3&lt;/a>&lt;/li> &lt;li>&lt;a href="#">メニュー4&lt;/a>&lt;/li> &lt;li>&lt;a href="#">メニュー5&lt;/a>&lt;/li> &lt;/ul> &lt;label for="menu-toggle" class="menu-close">閉じる&lt;/label> &lt;/div> .menu-buttomクリックすると.menu-checkboxにチェックが入ったり外れたりします。.menu-checkboxにチェックが入っているときだけ.drawer-menuが表示されるようにCSSを指定することでドロワーメニューの開閉を実装します。 ドロワーメニューのCSSは以下のようになります。 .menu-checkbox { display: none; } .drawer-menu { position: fixed; top: 0; left: 0; height: 100%; width: 200px; transform: translateX(-100%); transition: .5s; background-color: #cccccc; } .menu-checkbox:checked ~ .drawer-menu { transform: translateX(0); } .menu-checkboxはページに表示する必要が無いので非表示にします。 次に.drawer-menuの閉じた状態のCSSを指定しています。ポジションや背景色を指定し、transform: translateX(-100%);でメニューを左端に隠します。 最後に.menu-checkbox:checked ~ .drawer-menuでメニューが開いた状態のCSSを指定します。「:checked」はチェックボックスにチェックが入った状態を指します。「~」は同階層の要素を指定することができます。つまり、「.menu-checkboxにチェックが入った状態の同階層の.drawer-menu」に対してCSSを指定することができます。 transform: translateX(0);を指定することで左端に隠れていたメニューがスライドしながら表示されます。 あとは自分好みにCSSで装飾していくだけです。 ドロワーメニューを装飾する ドロワーメニューをCSSで装飾していきます。主な変更点は以下の通りです。 メニューボタンをハンバーガーメニューに変更メニューボタンに開閉アニメーションを追加閉じるボタンを削除ドロワーメニューの背景をクリックするとメニューが閉じる機能を追加 変更後のHTMLは以下のようになります。 &lt;input type="checkbox" id="menu-toggle" class="menu-checkbox"> &lt;label for="menu-toggle" class="menu-button">&lt;span>&lt;/span>&lt;/label> &lt;div class="drawer-menu"> &lt;ul> &lt;li>&lt;a href="#">メニュー1&lt;/a>&lt;/li> &lt;li>&lt;a href="#">メニュー2&lt;/a>&lt;/li> &lt;li>&lt;a href="#">メニュー3&lt;/a>&lt;/li> &lt;li>&lt;a href="#">メニュー4&lt;/a>&lt;/li> &lt;li>&lt;a href="#">メニュー5&lt;/a>&lt;/li> &lt;/ul> &lt;/div> &lt;label for="menu-toggle" class="menu-background">&lt;/label> .menu-buttonを少し変更したのと、.menu-backgroundを追加したくらいです。 CSSは以下のように変更しました。 /* チェックボックスを非表示 */ .menu-checkbox { display: none; } /* メニューボタンの装飾 */ .menu-button { display: block; position: fixed; top: 20px; right: 20px; z-index: 200; height: 30px; width: 40px; cursor: pointer; } .menu-button::before, .menu-button::after { content: ''; transition: .3s; } .menu-button::before, .menu-button::after, .menu-button span { display: block; position: absolute; left: 0; height: 2px; width: 100%; margin-top: -1px; background-color: #000000; } .menu-button::before { top: 0; } .menu-button::after { bottom: 0; } .menu-button span { top: 50%; } /* メニューボタンのアニメーション */ .menu-checkbox:checked ~ .menu-button::before { top: 50%; transform: rotate(45deg); } .menu-checkbox:checked ~ .menu-button::after { top: 50%; transform: rotate(-45deg); } .menu-checkbox:checked ~ .menu-button span { display: none; } /* ドロワーメニューの装飾 */ .drawer-menu { position: fixed; top: 0; left: 0; z-index: 200; height: 100%; width: 200px; transform: translateX(-100%); transition: .5s; background-color: #fff; } .drawer-menu ul { margin: 0; padding: 0; list-style-type: none; } .drawer-menu li { border-bottom: 1px dotted #ccc; } .drawer-menu a { display: block; padding: 15px; color: #000000; text-decoration: none; } /* ドロワーメニューの開閉 */ .menu-checkbox:checked ~ .drawer-menu { transform: translateX(0); } /* ドロワーメニューの背景 */ .menu-background { display: none; position: fixed; top: 0; left: 0; z-index: 100; height: 100%; width: 100%; background-color: rgba(0, 0, 0, .5); cursor: pointer; } .menu-checkbox:checked ~ .menu-background { display: block; } ハンバーガーメニューのアニメーションやドロワーメニューの背景の指定を追加したため、少々ボリュームが多くなりました。ひとつひとつ解説すると長くなってしまうので割愛しますが、特に難しい指定はしていません。 HTMLとCSSのみでドロワーメニューを実装する方法のまとめ レスポンシブサイトなどでよく使うドロワーメニューはHTMLとCSSだけで実装することもできます。普段、javascriptよりHTMLとCSSを触ることが多い方にとっては意外と使いやすいと思います。 CSSを変更することで、ドロワーメニューを上からスライドさせたり、全画面にフェードインで表示したり、いろいろな動きを表現できます。ぜひいろいろなドロワーメニューを作って遊んでみてください。

CSSとJavaScriptでスクロールアニメーションを実装する方法【レスポンシブ対応】

HTMLとCSSのみでドロワーメニューを実装する方法