横スライドメニューをhtml・CSSのみで実装【JS不要簡単】
最近よく見かけるメニューアイコンをクリックすると横からスライドして出てくるメニュー。これを簡単に実装したい！
HTML・CSSのみで実装できるの？
このような疑問に回答します。
本記事では横スライドメニューを、JSは使わずCSSのみで簡単に実装する方法について、コードペンデモを用い、解説します。
以下コードペンデモです。
See the Pen 楽天ヘッダードロワーメニュー用 by Kohei (@kouk05) on CodePen.
上記コードペンで、実際に横スライドメニューを実装してみました。まずは自分の環境にコピペして見て動作を確認して見ましょう。
詳細としては以下になります。
JSを使わないで開閉動作を行う記述をする。
今回はCSSのみでスライドメニューの開閉を行うのでinputタグのチェックボックスを用いて、チェックされた時、されてない時の動作をCSSで記述します。
詳しい詳細については以下リンクを参考にしてください。
https://kasumiblog.org/css-accordion/
メニューアイコンがクリックされた時、横スライドメニューを出す
次に横スライドメニューさせる要素をあらかじめ作っておき、その要素に、
CSSで以下を記述。
position: absolute;
right: -100%;rightに-100%を指定し、右横の見えない所に要素をいったん隠しておきます。
あとは簡単！クリックされたらrightプロパティを0値に戻すCSSを記述すればOK！
スライドモーションにはtransition等を使って見栄えを整えましょう！
※今回は右からスライドメニューを実装するやり方ですが、左から出したいときはrightプロパティをleftにして同じようにソースを書けばOKです。
以上で完成です。
まとめ
上記方法で、横スライドメニューを実装出来ましたか？
JSを使わず、簡単にできるのでぜひお試しください！
目次
