Written by Kasumi

横スライドメニューを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を使わず、簡単にできるのでぜひお試しください!

目次

関連記事

HTMLCSS

【CSS】ボーダー斜めのストライプ背景を作成する方法

2022.10.02
97
WordPress プログラミング

【簡単】Custom Post Type UI で カスタム投稿タイプのアーカイブページに親ページ(任意の固定ページ)を設定する方法

更新日:2022.04.13
2039
プログラミング

金額(値段)を三桁区切りで自動表示する方法

2019.12.05
278
WordPress プログラミング

【BreadcrumbNavXT】パンくずをJSONLD形式構造化で表示する方法

2022.01.02
392