Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

jQuery

Web初心者がjQuery 「jMenu」を使ってドロップダウンのナビゲーションを実装する方法(サンプル付き)

投稿日:

グローバルナビで、サブメニューがあるときにスムーズにサブメニューが表示するサイトをいくつか見かけました。

今回は、web初心者向けにwebサイト上で配布しているスクリプトを使ってドロップダウンメニューを表示させるjQueryを実装します。

jMenu

URLhttp://www.myjqueryplugins.com/jquery-plugin/jmenu

jQueryを動かすために STEP1

head内にいつもおなじみののコードを書いてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

ファイルをダウンロード STEP2

ファイルをダウンロード

Download Zip」がありますのでクリックしてください。

「DOWNLOAD」をクリックするとファイル一式をダウンロードできます。

データを解凍します STEP3

「DOWNLOAD」をサイトからダウンロードして、zipファイルを解凍します。

解凍すると
データを解凍します
データが入っています。

HTMLに実際に動く記述を書きます STEP4

<script type="text/javascript">
	$(document).ready(function() {
		$("#jMenu").jMenu({
			openClick : false,
			ulWidth :'150',
			 TimeBeforeOpening : 100,
			TimeBeforeClosing : 11,
			animatedText : false,
			paddingLeft: 1,
			effects : {
				effectSpeedOpen : 150,
				effectSpeedClose : 150,
				effectTypeOpen : 'slide',
				effectTypeClose : 'slide',
				effectOpen : 'swing',
				effectClose : 'swing'
			}

		});
	});
</script>

「ulWidth :'150'」 この150という値は、ナビにカーソルを当てたときにドロップダウンメニューとして表示される横幅です。単位はpxなので200pxの横幅がほしかったら200と入力してください。

HTMLを設置します STEP5

<ul id="jMenu">
            <li><a>CSS</a>
                <ul>
                    <li><a>CSS1</a></li>
                    <li><a>CSS2</a></li>
                    <li><a>CSS3</a></li>
                    <li><a>CSS4</a></li>
                    <li><a>CSS5</a></li>
                </ul>
            </li>

            
            
            <li><a>WordPress</a>
                <ul>
                    <li><a>プラグイン</a></li>
                    <li><a>コード</a></li>
                    <li><a>PHP</a></li>
                </ul>
            </li>
            
            
            <li><a>オススメ</a>
                <ul>
                    <li><a>マンガ</a></li>
                    <li><a>映画</a></li>
                    <li><a>ゲーム</a></li>
                    <li><a>スポーツ</a></li>
                </ul>
            </li>
            
            
            <li><a>バスケットボール</a>
                <ul>
                    <li><a>ドリブル</a></li>
                    <li><a>パス</a></li>
                    <li><a>シュート</a></li>
                    <li><a>ディフェンス</a></li>
                </ul>
            </li>
            
</ul>

ダウンロードしたHTMLとは少し変えています。

CSSを記述します STEP6

#jMenu{
	display:table;
	margin:0;
	padding:0;
	list-style:none;
	}
	
#jMenu li{
	display:table-cell;
	background-color:#322f32;
	margin:0;
	list-style:none;
	width:150px;
	text-align: center;
	}
	
#jMenu li a{
	padding:10px 15px;
	display:block;
	background-color:transparent;
	color:#fff;
	text-transform:uppercase;
	cursor:pointer;
	font-size:12px;
	}
	
#jMenu li a:hover{
	background-color:#3a3a3a;
	}
	
#jMenu li:hover>a{
	background-color:#3a3a3a;
	}
	
#jMenu li ul{
	display:none;
	position:absolute;
	z-index:9999;
	padding:0;
	margin:0;
	list-style:none;
	}
	
#jMenu li ul li{
	background-color:#322f32;
	display:block;
	border-bottom:1px solid #484548;
	padding:0;
	list-style:none;
	position:relative;
	}
	
#jMenu li ul li a{
	text-transform:none;
	display:block;
	padding:7px;
	border-top:1px solid transparent;
	border-bottom:1px solid transparent;
	}
	
#jMenu li ul li a.isParent{
	background-color:#3a3a3a;
	}
	
#jMenu li ul li a:hover{
	background-color:#514c52;
	border-top:1px solid #322f32;
	border-bottom:1px solid #322f32;
	}

jMenuのjQueryファイルを付けます STEP7

jMenuのjQueryファイルを付けます

赤枠で囲った
「jMenu.jquery.min.js」
「jquery-ui.js」
をSTEP1でjQueryのコードの下に追加します。

※cssとjsファイルはご自身の環境に合わせてください

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/019/jMenu.jquery.min.js"></script>
<script src="js/019/jquery-ui.js"></script>

まとめ

[サンプル] ドロップダウンのナビゲーション

よくわからなかった人もいるかもしれませんが、ドロップダウンのナビゲーションはよく使われますのでぜひ試してみてください。

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-jQuery

Copyright© Sedori Plan , 2019 All Rights Reserved.