2

jQueryでシンプルなドロップダウンメニューを実装してみる

jQueryでシンプルなドロップダウンメニューを実装してみる

至極シンプルなドロップダウンメニューをjQueryを利用して作ってみます。
ウィンドウサイズに対応するように横幅いっぱいにナビゲーションを配置したい時に使えるかもしれません。

それでは、見ていきましょう。

DEMO




1.HTMLを記述

<ul>タグに対してID名「DropDownMenu」を付け、入れ子状に<li>要素でナビ項目を配置しています。

 

2.CSSを記述

画面幅いっぱいのナビゲーションにするために、横幅25%の指定で4つのボタンを配置しています。

 

3.JavaScriptを記述

今回は外部JavaScriptを読み込む形式にしておきます。

  • 2行目: 変数$Speedにアニメーション速度を指定
  • 3行目: $(“#DropDownMenu li”)のところにHTMLで記述した名前を指定

 ※「dropdownmenu.js」という名前でjsフォルダに配置しています。

 

4.jQueryとJavaScriptを読み込む

 

見た目も動きもシンプルになっていますので、ここからカスタマイズしてみてください。

以上になります。

2 Comments

  1. 初めまして。横幅いっぱいのドロップダウンメニューを探していた時に、こちらのサイトに巡り会いました。簡潔に導入方法が書かれており、わかりやすく読ませていただきました。
    動作自体は問題ないのですが、サブメニューの幅が微妙に上のメインメニューよりはみ出してしまいます。こちらのdemoでは横幅がきちんと揃っているので、どこに何を記述すればよいのか教えていただけると助かります。何卒ご教授のほどよろしくお願いいたします。

    • 「ぴよ」さん
      コメントありがとうございます。
      サブメニューの横幅がズレてしまうということでしたが、こちらのdemoでは横に4つのボタンを配置しているので、「ul#DropDownMenu li ul」に対して「width:25%」を指定して四等分しています。もしボタンの数が5つであれば「20%」に指定するなどすれば、メインメニューと同じ横幅を保てるかなと思いますがいかがでしょうか?

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > jQueryでシンプルなドロップダウンメニューを実装してみる