POPSブログ

jQuery WordPress等のCMS用ドロップダウンメニュー

356

  Category:  jquery2015/05/05 pops 

WordPress等のCMS用途の、グローバルメニュー、ナビメニューをドロップダウン形式にすることであるが、実態は横に並べたアコーディオンにすぎない。toggleクリック関数を使用しない形式ですからjquery-1.9系、jquery-2.0系でも動作します。
「同時開閉」などの動作をアレンジしたものも作ってみました。

 

jQuery WordPress等のCMS用ドロップダウンメニュー、テスト


ハッキリ言ってCSSで処理した方が簡単ですが、あえてjQueryで作ってみた。特別にJSで作るメリットが有る訳では有りません。

 

zu

 

 

ドロップダウンメニュー化する時の基本原則


メニューはほとんどがリスト部分になりますので、下記のような構造になっている事が条件です。

下記は、最近WordPressテーマで好評な Simplicity での出力形式である。他のテーマであってもほとんど似通っている。

WordPressテーマSimplicity

【参照】wp-simplicity.com: 内部SEO施策済みのシンプルな無料Wordpressテーマ

 

 

下記 HTML は「Simplicity」テーマ初期状態のナビです。



<nav>
<div id="navi">
	<div id="navi-in">
		<div class="menu"><ul><li class="page_item page-item-2"><a href="">サンプルページ</a></li></ul></div>
	</div>
</div>
</nav>

WordPressより出力されるのはdivを含む以下の様で、外側のラップ(#navi #navi-in)はテーマにより多少の違いがある。
「サブメニュー」があれば、それぞれの「li」要素に自動的に個別のID名などふられ識別できるように処理される。

下記はWordPressのカスタムメニューです。このような構造である事を条件に、JS処理する。



<div>
	<ul class="menu">
	<li></li>
	<li>
		<ul class="sub-menu">
		<li></li>
		<li></li>
		<li></li>
		</ul>
	</li>
	</ul>
</div>

 

ドロップダウンメニュー (HOVER形)

 

メニュー上部をマウスでHOVERすると、サブメニューがあれば開閉します。このページはjquery-1.6.4に成ります。

CSSでも簡単にできますが、JSで処理しています。この例ではサブメニューが上下にスライドします。
CLICK形 ドロップダウンメニューは別デモページに有ります。


HOVER形 ドロップダウンメニュー サンプル

slideToggle、サブメニューの幅を広げることが可能です。(現在、140pxのところ180pxに広げています)

 


 

 

メニュー上部タイトル部分(MENU)をマウスでHOVERして下さい。サブメニューのある部分が開きます。
現在、MENU-2 から MENU-4 にサブメニューがあります。

 

 

 

 

ドロップダウンメニュー (CLICK形)


当方はWordPressでは有りませんので、WordPress構造を模したページでシミュレーションしてみます。
「個別開閉」「同時開閉」「開いてから閉じる」「閉じてから開く」の4種類の状動作が確認できます。


● デモページは [ jqury-1.9 ] で動作しています。JS、は「デモ」ページに掲載しています。

DEMO-014

 


 

 

簡単な説明とHTML.JS


JS処理が以前の方法と違いますのでどのようなCMSであっても設置できると思います。


// JS処理が以前の方法と違います //

前ページで詳細を記していますが、アコーディオンと同じ形式で有りそのJSを少し修正しただけのものです。アコーディオンを横にならべればナビメニューである。


1. 開くために「クリック」(またはHover)されるのは必ず、どこかのタイトル要素1箇所である。
2. よって開いたタイトル要素のオブジェクトを保存しておき、判定と操作に利用する。
3. 複数個設定すれば連動形のアコーディオンを構成できます。
4. 条件分岐のためactiveクラスを使用しています。(問題があるなら名前を変更する)
5. WordPressテーマ用に修正しています。


「HOVERタイプ」のHTML JS


「HOVERタイプ」は「個別開閉」の1種類のみになります。

WordPressのナビメニューを模すため、最近WordPressテーマで好評な「Simplicity」での出力形式であるHTMLを用いた。

ここではサブメニューを含む「li」要素を走査して「wp-dropdown」クラスを与えた。
事前に「wp-dropdown」クラスを与えておけばJSでの走査はいらない。


HTMLの例

下記 HTML は「Simplicity」テーマ頒布サイト wp-simplicity.com のナビを簡略化したものです。



<nav>
<div id="navi">
<div id="navi-in">

<div>
<ul class="menu">
	<li id="menu-item-1" class="menu-item menu-item-type-custom"><a href="javascript:void(0);">MENU-1</a></li>
	<li id="menu-item-2" class="menu-item menu-item-type-custom"><a href="javascript:void(0);">MENU-2</a>
		<ul class="sub-menu">
		<li id="menu-item-3" class="menu-item"><a href="javascript:void(0);">sub-menu1</a></li>
		<li id="menu-item-4" class="menu-item"><a href="javascript:void(0);">sub-menu2</a></li>
		<li id="menu-item-5" class="menu-item"><a href="javascript:void(0);">sub-menu3</a></li>
		<li id="menu-item-6" class="menu-item"><a href="javascript:void(0);">sub-menu4</a></li>
		</ul>
	</li>
	<li id="menu-item-7" class="menu-item menu-item-type-custom"><a href="javascript:void(0);">MENU-3</a>
		<ul class="sub-menu">
		<li id="menu-item-8" class="menu-item"><a href="javascript:void(0);">sub-menu1</a></li>
		<li id="menu-item-9" class="menu-item"><a href="javascript:void(0);">sub-menu2</a></li>
		<li id="menu-item-10" class="menu-item"><a href="javascript:void(0);">sub-menu3</a></li>
		</ul>
	</li>
	<li id="menu-item-11" class="menu-item menu-item-type-custom"><a href="javascript:void(0);">MENU-4</a>
		<ul class="sub-menu">
		<li id="menu-item-12" class="menu-item"><a href="javascript:void(0);">sub-menu1</a></li>
		<li id="menu-item-13" class="menu-item"><a href="javascript:void(0);">sub-menu2</a></li>
		</ul>
	</li>
</ul>
</div>
</div>

</div><div class="clear"></div>
</nav>

JS

基本的に、toggleClass(”active”)は無くとも良いのですが、あればCSS操作が出来るので結構便利です(クラス名は自由)。
スライドを設定したブロックのみ交互に開閉させます。作るのが一番簡単でシンプルでアコーディオンそのものである。


「サブメニュー」のある「li」に wp-dropdownクラス を設定して、slideToggle()処理しているだけです。



//wp-hover-menu.js
//slideToggle

(function($){

	$(function(){

		//速度
		var slide_speed=250;
		var keep_openItem;
		//MENUブロック指定クラス名付加
		var dropdown=$('#menu-item-2,#menu-item-7,#menu-item-11').addClass("wp-dropdown");
		var dropdown_itme=$('.wp-dropdown');
		//dropdown_itme.css({'cursor':'pointer'});
		dropdown_itme.find('ul').hide();

		//hover-action
		$('.wp-dropdown').hover(function(){
			$(this).toggleClass("active");
			$(this).find('ul').slideToggle(slide_speed);
		});

	});

})(jQuery);


● 上記はIDで処理したが、同じクラス名もあるので、その場合は下記の様になる。


var dropdown=$('.menu-item-2,.menu-item-7,.menu-item-11').addClass("wp-dropdown");

● IDで処理した場合、下記のようにも出来るがこの場合、wp-dropdownクラスは利用されない。
難しいしマチガイ易いのでここでは使用しない。


		//hover-action
		dropdown.hover(function(){
			$(this).toggleClass("active");
			$(this).find('ul').slideToggle(slide_speed);
		});

● 全体を中央に配置する
全体を中央に配置する場合は、#navi-inの下の「div要素」に maragin: 0 autoを設定します。また「div要素」の幅はautoでは無く%または数値の必要があります。
このデモではpaddingの影響も有り、中のliの幅の合計値より大きくしないとカラム落ちします。


#navi-in div{
width:600px;
margin:0 auto;
}

● スライド以外のエフェクト
上記は、スライドで処理している。一番綺麗であるが他にも「Fade」「Show」でも処理できます。


Fade
$(this).find('ul').fadeToggle(slide_speed);

Show Hide
$(this).find('ul').toggle(slide_speed);

● Clickアクションにする場合
下記の様にアクションの種類を変更すれば良い。.hover() を .click() に変更するだけですから簡単です。


		//click-action
		$('.wp-dropdown').click(function(){
			$(this).toggleClass("active");
			$(this).find('ul').slideToggle(slide_speed);
		});

● サブメニューの幅を広げる
サブメニューの幅を広げる事が可能です。現在は180pxになっていますが幅設定は自由です。但しデモのCSSは暫定ですから、CSSの細部の修正が必要です。本来このCSSでは140pxです。


#navi-in .menu .sub-menu{
display:block;
width:180px;
height:auto;
padding:0 0 5px 0;
margin:0;
background-color:#37BDB5;/*#48D1CC*/
clear:both;
}

● メニュー構造の修正
場合によっては「メニュー構造の修正」を行ったほうが良い場合もあります。テーマの navi.php 修正すれば良いので如何なる構造にでも改造できるはずです。
WordPress以外のCMSなどでも、同じになります。場合によっては、「前ページ」のアコーディオンを利用するのも良いとおもいます。(改造は自由です)


CSS

CSSは基本的にWordPressのテーマに準じる。参考まで上記「サンプル」のCSSは下記の様になる。

#naviの z-index値 は適当な値です。あくまでも暫定のCSSで詳細を煮詰めたCSSでは有りません。

このCSSは結構難しいナ、慣れないと書けない。文字の間隔の微調整は「aリンク」で行っている。




/* wordpress */
#navi{
position:relative;
display:block;
width:100%;
height:2px;
margin:0;
padding:0;
z-index:100;
background-color:#CCCCCC;
}
#navi-in{
position:absolute;top:100%;left:0;
display:block;
width:100%;
height:25px;
margin:0;
padding:0;
background-color:#F5F5F5;
}
#navi-in div{
width:100%;/*564*/
height:25px;
margin:0;
padding:0;
}

#navi-in .menu{
display:block;
width:auto;
margin:0;
padding:0;
text-align:left;
}
#navi-in .menu .sub-menu{
display:block;
width:180px;
height:auto;
padding:0 0 5px 0;
margin:0;
background-color:#37BDB5;/*#48D1CC*/
clear:both;
}
#navi-in .menu .menu-item-type-custom{
list-style-type:none;
width:140px;
height:25px;
margin:0;
padding:0;
line-height:25px;
color:#FFFFFF;
font-size:12px;
font-weight:bold;
border-left:1px solid #FFFFFF;
background-color:#48D1CC;
float:left;
}
#navi-in .menu li a{
padding:0 3px;
}

#navi-in .menu .menu-item-type-custom.wp-dropdown{
background-color:#48D1CC;
}
#navi-in .menu .menu-item-type-custom.wp-dropdown.active{
background-color:#48D1CC;
}
#navi-in ul li a{
width:130px;
text-decoration:none;
color:#FFFFFF;
}
#navi-in ul li a:visited{
color:#DC143C;
}
#navi-in ul li a:hover{
color:#000000;
}
#navi-in .sub-menu .menu-item{
list-style-type:none;
width:auto;
height:16px;
margin:0;
padding:0;
font-weight:normal;
}

.clear{clear:both;}

 

CSSのみでドロップダウンメニューにする


JS処理外であるから、これは余談である。

JS処理しないでCSSのみでドロップダウンさせる場合です。下記のCSSを最後に加えると機能する。
注意、CSSを #navi から設定しているから #navi から書かないと機能しない。

ぱっと表示するだけですが、非常に簡単です。好みの問題でショウがJSの面倒さが無い。



#navi #menu-item-2 ul,#navi #menu-item-7 ul,#navi #menu-item-11 ul{
display:none;
}
#navi #menu-item-2:hover ul,#navi #menu-item-7:hover ul,#navi #menu-item-11:hover ul{
display:block;
}

 

「CLICKタイプ」のHTML JS


「CLICKタイプ」は「個別開閉」「同時開閉」「開いてから閉じる」「閉じてから開く」の4種類のみになります。

HTML、CSSは上記「HOVER形」と同じですからそちら参照ください。


「CLICKタイプ」の特徴

開閉を操作するに、開いたタイトルのオブジェクトを保存して処理しているために、離れた場所の「ドロップダウンメニュー」とも連動するのが特徴です。必要性があるかは不明ですが...


zuzu

 

図示すれば、当方ナビに「サブメニュー」が在ったと仮定すれば、離れた別構造のナビとも連動出来るという訳です。(HTML構成が似通っていてJS処理できるなど条件はありますが)


JS

開閉を操作するに、開いたタイトルのオブジェクトを保存して使用する事になる。keep_openItem は保存用変数。
ブロックが離れていても「同時開閉」処理できる。以下そのスクリプトを掲示する。



//同時開閉 wp-dropdown2.js
(function($){

	//同時開閉
	$(function(){

		//速度
		var slide_speed=250;
		var keep_openItem;
		//MENUブロック指定クラス名付加
		var dropdown=$('#menu-item-2,#menu-item-7,#menu-item-11').addClass("wp-dropdown");

		var dropdown_itme=$('.wp-dropdown');
		//dropdown_itme.css({'cursor':'pointer'});
		dropdown_itme.find('ul').hide();

		//click-action
		$('.wp-dropdown').click(function(){

			//hit判定クラス
			$(this).toggleClass("active");
			var slideItem=$(this).find('ul');

			//hit分岐処理
			if ($(this).hasClass('active')){

				//開いていればさきに閉じる
				if(keep_openItem) {
					keep_openItem.slideUp(slide_speed,function(){
						//activeクラス切り替
						keep_openItem.parent('li').removeClass("active");
					});
				}

				//開く
				slideItem.slideToggle(slide_speed,function(){
					//openItem保存
					keep_openItem=slideItem;
				});

			}

			if (!$(this).hasClass('active')){

				//閉じる
				slideItem.slideToggle(slide_speed);
				//openItemクリア
				keep_openItem=null;
			}
		});
	});

})(jQuery);

JSの設定(ほぼ共通)

構造など同じですので、上記の「HOVER形」説明を参照ください。


「CLICKタイプ」の矢印表示

タイトル部分の「li」要素が下に伸びる為、矢印表示に注意しなければなりません。
一応、1画像の矢印を2つ用意して下記の様に使用しました。ここは工夫が必要のようです。



#navi-in .menu .menu-item-type-custom.wp-dropdown{
background:url(/main/images/arrow_16.gif) no-repeat;
background-color:#48D1CC;
background-position:right 0px;
}
#navi-in .menu .menu-item-type-custom.wp-dropdown.active{
background:url(/main/images/arrow_16b.gif) no-repeat;
background-color:#48D1CC;
background-position:right 0px;
}

最後に

新しく考えたオブジェクトを保存してアコーディオン処理する方法(前ページ参照)のドロップダウンメニューへの応用する検証的なものになっています。他にも書き方は色々ありますがここでは省略します。




参照、参考

基本的には前ページの「アコーディオン」JSを修正したものです。

【参照】当方の記事: jQuery 簡単にWordPress等のCMSサイドバーをアコーディオンにする


CSSドロップダウンメニュー等は以下サイト記事が参考になるでしょう。

【参考】weboook: CSSで作ったドロップダウンメニューのドロップの動きいろいろ

【参考】coliss.com: [CSS]IE6, 7も考慮した、CSS3で実装するドロップダウンメニュー


画像

サンプル画像 / 原則 使用者が用途に応じてご用意ください。

透過矢印画像 arrow_5.gif 19x40 透過矢印画像 arrow_12.gif 19x40 透過矢印画像 arrow_13.gif 19x40 透過矢印画像 arrow_14.gif 19x25 透過矢印画像 arrow_14b.gif 19x25 矢印画像 arrow_15.gif 13x13 矢印画像 arrow_15b.gif 13x13 矢印画像 arrow_16.gif 13x26 矢印画像 arrow_16b.gif 13x26

以上です。

 


[ この記事のURL ]


タグ:jquery , Accordion

 

ブログ記事一覧



[1]