にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2017/07/11. 16:37:57.

サブメニューは自動で開くが、勝手には閉じないドロップダウンメニューを作るスクリプトを書いた

ドロップダウンメニューのサブメニューうちの個人サイトで使っているグローバルメニューバーにある、サブメニューの開閉スクリプトを新たに書き直しました。

※そのグローバルメニューは今ご覧のブログページにはありません。(^_^;) ブログTOPページやHOMEページページなどIndex系ページにだけあります。右図の黄色矢印はサブメニューを開いたところです。

All Aboutで「簡単なドロップダウンメニューの作り方(jQuery活用編)」という記事を書いたんですが、そこで解説している方法をほぼそのままうちのサイトでも使っています。(※この記事自体は2013年からありましたが、2017年7月付で全面改稿しました。)

サブメニューが勝手に閉じてしまうとストレスになる

うちの個人サイトでは従来からjQueryを使ってサブメニューを開閉していましたが、今までは以下のような2段階仕様でした。

  • メニュー項目の上にマウスを載せると自動でサブメニューが開く
  • メニュー項目の上からマウスが外れたら自動でサブメニューが閉じる

よくあるドロップダウンメニューの仕様です。

ただ、この動作だと、ほんの少しマウス操作を誤っただけでサブメニューが勝手に閉じてしまうという問題があります。
マウスを勢いよく動かしすぎたせいで、ちょっと項目枠内から外れてしまった……というケースはよく起きますよね。その際、せっかく開いたサブメニューが勝手に閉じてしまうと、再度サブメニューを開く必要があるので少々手間です。
特に、サブメニューの開閉にアニメーション効果が伴っている場合には、アニメーション効果の終了を待たないと再度開けない場合もあって、余計にストレスが溜まります。(^_^;)

自動で開くが、自動では閉じない仕様だと、使いやすい

簡単なドロップダウンメニューの作り方(jQuery活用編)それを避けるために、以下のようなドロップダウンメニューの仕様を考えました。

  • メニュー項目の上にマウスを載せると自動でサブメニューが開く
  • メニュー項目の上からマウスが外れてもサブメニューはそのまま
  • どこかをクリックしたら、サブメニューが閉じる
  • (※ページがスクロールされても、サブメニューは消えます。)

上記の仕様なら、マウス操作がちょっとぶれてしまってメニュー項目範囲外に出てしまっても、一度開いたサブメニューは開かれたまま保持されます。このような動作だと使いやすいドロップダウンメニューになるのではないでしょうか。

ドロップダウンメニューは実はスクリプトを使わずにHTML+CSSだけでも作れますが、上記のように「開いたまま保持する」仕組みはスクリプトを併用する必要があります。

jQueryを使って、使いやすいドロップダウンメニューを作る方法

jQueryを使って上記のような仕様のドロップダウンメニューを作る方法をAll Aboutで解説したのが、以下の記事です。

簡単なドロップダウンメニューの作り方(jQuery活用編)@All About ホームページ作成

サンプルページも用意しているので、そちらのソースを見る方が早いかもしれません。^^;
記事は4ページ構成で、

  1. [ドロップダウンメニューの特長]
  2. [HTMLソース]
  3. [CSSソース]
  4. [JavaScript(jQuery)ソース]

の順に紹介しています。メインは4ページ目のjQueryソースです。
上記のような仕様のドロップダウンメニューでも、jQueryソースとして記述する分量はわずか9行だけで済みます。
とても簡単です。

備考:ページがスクロールされた際にもサブメニューを自動で閉じる(消す)方法

なお、この記事では「ページがスクロールされた際も、そのときサブメニューが開かれていたら自動で閉じる」という処理は紹介していません。スクロールで閉じるという動作は、「グローバルメニューが画面上部端に残り続ける」ようなページデザインを採用していない限り不要でしょうから。
スクロール時にも自動で閉じるには、例えば以下のようにスクリプトを書いておけば良いでしょう。

$(function() {
   $(window).scroll( function() {
      // サブメニューが出っぱなしなら消す。
      $('ul.ddmenu ul').hide();
   });
});

上記は、グローバルメニューを作っている要素の第1階層目が <ul class="ddmenu"> ~ </ul> の場合の記述例です。
その辺は、詳しくは記事本文を読んで下さい。(^_^;)

※なお、本記事で作るドロップダウンメニューは多段構成も可能なので、メニュー階層は3階層でも4階層でも好きなだけ増やせます。

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※ご投稿頂いた内容は、掲載前に管理者が確認する設定にしている場合があります。たいていは数日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連する記事など

※下記には、本サイト内外の関連記事などが8本くらい自動で表示されています。

にししふぁくとりー Sakura scope内限定での主要なカテゴリ

--- 当サイト内を検索 ---