Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

Web

ハンバーガーメニューはなぜ動くのか!CSSだけ& jQuery使用のコードで確認しよう

 

ハンバーガーメニューとは

Webサイトを見ていると、右上などにメニューを表示させる横線三本があります。これはハンバーガーメニューと言われるナビゲーションメニューの表示形式の一つです。(このサイトもスマホで見たり、ブラウザを細くしたりすると表示されます。)

ハンバーガーメニューサンプル

今回はハンバーガーメニューの簡単なソースコードを見ながら「ハンバーガーメニューはなぜ動くのか」その仕組みを「CSSだけ」と「jQueryを使用」の2パターンで同じものを作りながら説明します。なおソースコードはコピペして使用していただいても大丈夫です!

  • 本記事では、HTMLとCSSの知識をある程度必要とします。
  • jQueryの知識はなくても大丈夫です。ただし導入は省きます。

CSSだけで作ったハンバーガーメニュー


こちらがCSSだけで作ったハンバーガーメニューです。簡単にするため、動きはつけていません。
ポイントは『checkbox』です。

<input type=”checkbox” class=”ham-checkbox” id=”ham-toggle”>

これはクリックするとチェックマークが付くチェックボックスを作る要素になります。このチェックボックスには次の特徴があります。

    1. チェックボックスのid名と同じfor属性を持ったlabel要素をクリックしてもチェックボックスをonにできる。
    2. CSSではチェックボックスがonのときを擬似クラス『:checked』を用いることで表現できる。

まず1の特徴を使い、チェックボックスではなくハンバーガーメニューのアイコンをクリックしてもチェックボックスをonにできるようにします。(なお、チェックボックスの□が残っていると不恰好なので非表示にしています。)

次に2の特徴を使い、擬似クラス『:checked』と兄弟セレクタ『~』を組み合わせることによって、チェックボックスがonのときの兄弟要素にスタイルをつけることができます。CSSのコードは以下のようなものです。

.ham-checkbox:checked ~ ●●● {
スタイル;
}

これによって、
①チェックボックスがonのときのハンバーガーメニューのアイコンを「X」にする
②チェックボックスがonのときにナビゲーションが表示される
この2つをCSSに記述すればハンバーガーメニューの完成です!!
(上記サンプルコードではCSSの最後に記述しています)

jQueryを使ったハンバーガーメニュー


こちらがjQueryを使ったハンバーガーメニューです。こちらも簡単にするため、動きはつけていません。
jQueryの記述を見てみましょう。

$(‘#js-ham-toggle’).on(‘click’, function () {
$(‘#js-ham-toggle’).toggleClass(‘active’);
$(‘#js-ham-nav’).toggleClass(‘active’);
});

余分は省きました!!たった3行です!!
これを和訳すると次のようになります。

#js-ham-toggleの要素がクリックされたら次のことをして下さい {
#js-ham-toggleの要素にクラス『active』を付ける(付いてれば外す)
#js-ham-navの要素にクラス『active』を付ける(付いてれば外す)
}

CSSだけの方では擬似クラス『:checked』を使いハンバーガーメニューのon,offを切り替えていたところを、jQueryで要素にクラス『active』をつけてハンバーガーメニューのon,offを切り替えようということです。

あとは、CSSだけと同様に、
①クラス『active』がついたときにハンバーガーメニューのアイコンを「X」にする
②クラス『active』がついたときにナビゲーションが表示される
この2つをCSSに記述すればハンバーガーメニューの完成です!!

2つのコードの比較

ここまで同じハンバーガーメニューに対し、「CSSだけ」と「jQueryを使用」の2パターンで作りましたが、実はこの2パターンには決定的な違いがあります。

  • CSSだけでは、ナビゲーションをチェックボックスの兄弟要素にしないといけない。
  • jQueryを使用すると、ナビゲーションをどこに配置してもOK。

そのため、今回の場合CSSだけの方は<div class=”header”>の中にチェックボックスがあるので、<div class=”header”>の外にナビゲーションを配置することができません。
ところで、今回のサンプルではヘッダーの下に影が付いているのに気づきましたか?
CSSだけではどうしてもこの影の下にナビゲーションを配置することができません。ここで「CSSだけ」と「jQueryを使用」の大きな違いが出てきます。

header_shadow

なお、ナビゲーションを<div class=”header”>の外に移動し、ヘッダーの影がかかるようにしたjQueryのコードはこちらになります。

最後に

いかがでしたでしょうか?ちょっとでもハンバーガーメニューの理解、HTMLやCSS,jQueryの理解になっていただければ幸いです。最後にもう少しかっこよく動きをつけたコードも紹介いたします。参考にどうぞ。

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. Web

    HTML&CSS初心者が通る道。バリデーターで文法チェック

    初心者みんなが通る道(かな?)間違い探しHTMLを習い始めたと…

  2. Flexbox(縦並び)

    Web

    Flexboxで縦並びを簡単に!

    以前、ご紹介しました「Flexboxで横並びを簡単に!」…

  3. Just Code

    Web

    Just Code cssで画像加工

    CSSを使用して、画像を加工するツールを紹介します。オンラインで利…

  4. Web

    【CSS】calc()関数で簡単サイズ指定

    今回はcalc()関数についてご紹介します。calc()関数とはC…

  5. Subtle Patterns

    Web

    WEBサイトの背景などに!商用OKの無料テクスチャ素材サイト「Subtle Patterns」の紹介…

    みなさんウェブサイト作りは捗っていますでしょうか?自分はやっとトップペ…

  6. FC2ホームページ 登録からサイトのアップロード

    Dreamweaver

    FC2ホームページ 登録からサイトのアップロードまでの手順

    登録1.ユーザーとIDの登録1.「FC2ホームページ」と検索し…

人気の記事

CodeCamp

おすすめの参考書

PAGE TOP