WEB Tips デザイン・コーディング

クリックで開閉するドロップダウンメニューの作り方

本記事にはプロモーションが含まれています。

クリックで開閉するドロップダウンメニューの作り方

サイトのデザインで表示スペースが限られている場合に役に立つのがドロップダウンメニューです。

PC上でのドロップダウンメニューはホバーした時(マウスを乗せた時)に表示される仕様が多いですが、モバイルでは期待通りに動かない場合があります。

モバイルではタッチイベントが標準なので、クリックで開閉するドロップダウンメニューの方がユーザビリティに優れています。

この記事ではクリックで開閉するドロップダウンメニューの作り方を紹介します。

ナビゲーションなどで有用。CSS+HTMLだけで作る横並び、縦並びのドロップダウンメニューはこちらの記事です。

CSS+HTMLだけドロップダウンメニューの作り方【サンプルあり】

jQuery不要、CSSとHTMLだけでも軽快でおしゃれなドロップダウンメニューが作れます。 この記事ではシンプル、簡単なCSSとHTMLだけで作るドロップダウンメニューを例を挙げて説明します。 ドロ ...

続きを見る

jQueryで作るクリックで開閉するドロップダウンメニュー

クリックでメニューを閉じたり開いたりするにはjQueryを使う方法が一般的です。jQueryを使う機会は少なくなっていますが、簡単に導入できるので覚えておくと役に立つでしょう。

See the Pen クリックで開閉ドロップダウンメニュー by mixtaro (@mixtaro) on CodePen.

メニュー部分のCSSは以下のようになります。jQueryで表示非表示を制御するので、サブメニューは初期状態で非表示にしておきます。

/* サブメニューは初期状態で非表示 */
.menu ul {
  display: none;
}
/* サブメニューが表示されているときのスタイル */
.menu li.active > ul {
  display: block;
  position:absolute;
  top:100%;
  left:0;
  width: 100%;
  li{
    width:100%;
    white-space: nowrap;
  }
}

jQueryは以下の通りです。

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
 $(document).ready(function() {
    $('.has-submenu > a').click(function(e) {
      e.preventDefault(); //通常のリンククリックによる画面遷移
      $(this).parent().toggleClass('active');
    });
  });
<script>

.has-submenu直下にある<a>要素がクリックされたら、その親要素にあたる.has-submenu.activeクラスを付与します。

CSSのみで作るクリックで開閉するドロップダウンメニュー

CSSのみでも、Checkboxを使って同じような動作を実装することができます。

See the Pen クリックで開閉ドロップダウンメニュー checkbox by mixtaro (@mixtaro) on CodePen.

checkboxlabel要素使ってクリックできる領域を作ります。:checked擬似クラスでチェックボックスがチェックされているかチェックされていないかに応じてサブメニューを表示しています。

.dropdown input[type="checkbox"] {
  display: none;
}

.dropdown label {
  cursor: pointer;
}

.dropdown .submenu {
  display: none;
}

.dropdown input[type="checkbox"]:checked + label + .submenu {
  display: block;
}

CSSの隣接セレクタを使った表現方法は以下の記事でまとめています。

覚えておくと便利なCSS 隣接セレクタの使い方と使用例

隣接セレクタとは、同じ階層で指定した要素の直後にある要素(同じ階層なので兄弟要素)だけを選択することができるCSSセレクタです。 例えば、見出しの後にある段落だけにマージンを設定したり、リストの最初の ...

続きを見る

以上、「クリックで開閉するドロップダウンメニューの作り方」、jQueryを使う方法、CSSのみで作る方法を紹介しました。

ドロップダウンメニューだけでなくクリックで開閉して新たな情報を表示するのは、よく使う機能です。

使い方をマスターしてモバイルフレンドリーなサイト作りを目指しましょう!

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大50%キャッシュバッグ月額495円&ドメイン永久無料 - 2024年4月3日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額678円 53%OFF ドメイン2個無料 - 2024年3月13日(木)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WEB Tips, デザイン・コーディング
-, ,