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

CSS

HTMLとCSSのみのドロワー
HTMLとCSSだけでドロワーメニューって作れるの？

そんな疑問にお答えします。

 

ドロワーメニューを作る方法はいろいろあります。

jQueryを使って自作する方法やjQueryライブラリを使う方法がよく用いられます。

ですが今回はjQueryを使いません。

HTMLとCSSだけで作っていきます。

仕組みさえわかればjQueryを書かない分、より簡単に実装できます。

またCSSのスキル次第でさまざまなカスタマイズが可能なので、使いこなせれば鬼に金棒です。

ぜひ使えるようになっておきましょう。

HTMLとCSSのみのドロワーメニュー

まず今回の完成形を見ておきます。

See the Pen
ハンバーガーメニュー by toshi (@toshi78)
on CodePen.

ハンバーガーメニューをクリックすれば右端からメニューが出てくるというよく見るパターンです。

メニューの開閉はハンバーガーマークとバツ印で行います。

今回はさらにドロワーメニューの背景をクリックしてもメニューが閉じる仕様にします。

ハンバーガーメニュー

 

HTMLとCSSでドロワーメニューの動きを制御する仕組み

jQueryを使わないでどうやってドロワーメニューの動きを制御しているのか？

今回の肝はここです。

ここさえ理解できればドロワーメニューは作れます。

大事な点は次の２つです。

💡ポイント！　チェックボックスの使い方　
  • inputのid属性とlabelのfor属性
  • 「:checked」の挙動

 

inputのid属性とlabelのfor属性

labelタグを使うことで項目とテキストフィールドやチェックボックスなどと連動させることができます。

下のサンプルを見てください。

テキストフィールドをクリックすればもちろん入力欄が選択状態になりますが、「名前」をクリックしても入力欄が選択状態になります。

 

See the Pen
for属性1 by toshi (@toshi78)
on CodePen.


これは項目とフォームを連動させているのでこうなります。

 

💡ポイント！　連動させるコードの書き方
  • 項目名は「label」で囲む
  • labelには「for=”〇〇”」、inputには「id=”〇〇”」と同じ名前を書く

 

<label for="linked">名前：</label> <input type="text" id="linked" name="yourname">
 labelの「for」名とinputの「id」名を同じにすることで連動します。 

 

「:checked」の挙動

まずチェックボックスの動きとコードを見てみましょう。

See the Pen
for属性2 by toshi (@toshi78)
on CodePen.

<input type="checkbox" id="check-linked" class="my-checkbox">
<label for="check-linked" class="check-point"><span>ここをチェック</span></label>
type>=”checkbox”と変わっているだけで、先ほどとコードの書き方は同じです。

「check-linked」で連動させています。

次に「:checked」についてです。

チェックされたときの動きを制御するには、擬似クラス「:checked」を使います。

下のサンプルはチェックされたときに文字色を変えるようにしています。

See the Pen
for属性3 by toshi (@toshi78)
on CodePen.

.my-checkbox:checked ~ .check-point span { 
    color: #3584BB;
}

「:checked」とはチェックボックスにチェックが入った状態を指します。

「~」は同階層の要素を指定することができます。

つまり、「.my-checkbox」にチェックが入った状態の同階層の「.check-point」に対してCSSを指定しています。

よって「チェックボックスにチェックが入ったとき」に「文字色を青にする」という制御がなされています。

 

💡ポイント！　「:checked」の働き　

「:checked」がon/offの役割を担っている

 

jQueryのクリックイベントでは

$("[対象の要素]").on("click", function() {
/* 処理内容 */
});

という書き方をしますが、この「クリックしたら」という動きと同じことを、CSSでは「:checked」で行っているということです。

 

チェックボックスを使ってドロワーメニューを作る流れ

ここまでの動きが理解できればドロワーメニューは作れます。

ポイントは以下のとおり。

 

💡ポイント！　チェックボックスを使ったドロワーメニューの作り方
  • チェックボックスは非表示にする
  • 「for」の要素をハンバーガーメニューとドロワーメニューの背景に当てる

 

ドロワーメニューを作ろう！

それでは実際にドロワーメニューを作ってみましょう。

まずは完成コードを貼っておきます。

あとで解説します。

<input type="checkbox" id="drawer-checkbox" class="menu-checkbox">
<label for="drawer-checkbox" class="drawer-icon"><span></span></label>
<div class="drawer-menu">
  <ul class="drawer-menu-list">
    <li class="drawer-menu-item"><a class="drawer-menu-item-link" href="#">メニュー1</a></li>
    <li class="drawer-menu-item"><a class="drawer-menu-item-link" href="#">メニュー2</a></li>
    <li class="drawer-menu-item"><a class="drawer-menu-item-link" href="#">メニュー3</a></li>
  </ul>
</div>
<label for="drawer-checkbox" class="menu-background"></label>
a {
text-decoration: none;
}

ul {
list-style: none;
}

.menu-checkbox {
display: none;
}

.drawer-menu {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 200px;
transform: translateX(100%);
transition: all 0.5s ease-in-out 0s;
background-color: #3584BB;
z-index: 20;
}

.drawer-menu-list {
margin-top: 100px;
}

.drawer-menu-item-link {
display: block;
text-align: center;
font-size: 20px;
color: #fff;;
margin-top: 20px;
}

.menu-checkbox:checked ~ .drawer-menu {
transform: translateX(0);
}

.drawer-icon {
cursor: pointer;
position: fixed;
top: 40px;
right: 60px;
justify-content: center;
align-items: center;
z-index: 30;
background-color: #fff;
}

.drawer-icon span,
.drawer-icon span:before,
.drawer-icon span:after {
content: '';
display: block;
height: 6px;
width: 40px;
border-radius: 3px;
background-color: #3584bb;
position: absolute;
transition: all 0.5s ease-in-out 0s;
}

.drawer-icon span::before {
bottom: 12px;
}

.drawer-icon span::after {
top: 12px;
}

.menu-checkbox:checked ~ .drawer-icon {
background-color: #3584bb;
}

.menu-checkbox:checked ~ .drawer-icon span {
background-color: rgba(255, 255, 255, 0);
}

.menu-checkbox:checked ~ .drawer-icon span::before {
bottom: 0;
transform: rotate(-45deg);
background-color: #fff;
}

.menu-checkbox:checked ~ .drawer-icon span::after {
top: 0;
transform: rotate(45deg);
background-color: #fff;
}

.menu-background {
display: none;
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
transition: all 0.5s ease-in-out 0s;
}

.menu-checkbox:checked ~ .menu-background {
display: block;
opacity: 0.3;
}

 

コード解説

HTML
  • ハンバーガーメニューはspan部分
  • ハンバーガーメニューをlabelで囲んでいる
  • ハンバーガーメニュー「for=”drawer-checkbox”」
  • チェックボックス「id=”drawer-checkbox”」
  • drawer-menuはクリックされたら出てくる部分
  • menu-backgroundはドロワーメニューの背景部分

 

CSS
  • .menu-checkbox はdisplay: none;で非表示に
  • .drawer-menuはメニューが閉じているときの状態をCSSで指定
  • .drawer-menuはtransform: translateX(100%);でメニューを右端に隠す
  • .menu-checkbox:checked ~ .drawer-menuでメニューが開いたときの状態をCSSで指定
  • transform: translateX(0);で右端に隠れていたメニューがスライドしながら表示される
  • 「.menu-checkbox:checked ~ .drawer-icon span」「.menu-checkbox:checked ~ .drawer-icon span::before」「.menu-checkbox:checked ~ .drawer-icon span::after」でクリックされたときのハンバーガーメニューをCSSで指定
  • transition: all 0.5s ease-in-out 0s;でなめらかな動きを表現

 

ハンバーガーの三本線

通常時

.drawer-icon span,
.drawer-icon span:before,
.drawer-icon span:after {
content: '';
display: block;
height: 6px;
width: 40px;
border-radius: 3px;
background-color: #3584bb;
position: absolute;
transition: all 0.5s ease-in-out 0s;
}
.drawer-icon span::before {
bottom: 12px;
}
.drawer-icon span::after {
top: 12px;
}

 

バツマーク

.menu-checkbox:checked ~ .drawer-icon {
background-color: #3584bb;
}
.menu-checkbox:checked ~ .drawer-icon span {
background-color: rgba(255, 255, 255, 0);/*メニューが開いているときは真ん中の線を透明にする*/
}

.menu-checkbox:checked ~ .drawer-icon span::before {
bottom: 0;
transform: rotate(-45deg);
background-color: #fff;
}
.menu-checkbox:checked ~ .drawer-icon span::after {
top: 0;
transform: rotate(45deg);
background-color: #fff;
}

三本線はspanタグと疑似要素で作っています。

「.menu-checkbox:checked」がチェックボックスにチェックが入っている状態、つまりハンバーガーが押されたときなので、バツ印になるようにCSSを書きます。

真ん中の線を透明にしてバツ印にしています。

 

ドロワーメニューの背景

<label for="drawer-checkbox" class="menu-background"></label>

ドロワーメニューの背景をクリックしてもメニューを閉じるように「:checked」のon/offとシンクロさせます。

そのために「for」属性を追加しています。

 

.drawer-icon {
z-index: 30;
}

.drawer-menu {
z-index: 20;
}

.menu-background {
z-index: 10;
}

ここでの注意点は「z-index」です。

ドロワーメニューの背景が一番下にくるように、重なりに気をつけて指定しましょう。

 

まとめ：HTMLとCSSのみでドロワーメニューを実装しよう！

プログラミング

inputのid属性とlabelのfor属性の関係、「:checked」の挙動さえ理解できればHTMLとCSSのみでドロワーメニューは作れます。

チェックボックスをチェックさせるための要素を「for」で指定することで作れ、かつこのon/off要素はいくつでも設置できます。

仕組みさえ理解できればいろんなパターンのドロワーメニューを作ることができます。

いろいろ作ってみて自由に扱えるようになりましょう。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

投稿者 トシ

ホーム > CSS > 【jQuery不要】HTMLとCSSのみでドロワーメニューを実装する方法