ドロップダウンメニューをスマートフォン・タブレットに表示させている場合、下層のメニューもうまくタップさせる方法【便利なjQueryプラグインがあります】

jQuery このページをあとで読む

ドロップダウンメニューがあるWEBサイトで「他のメニューも見ようかな～」と思ってスマートフォン・タブレットからタップすると「最上位のメニューしかタップできない・・・もっと下層のメニューを選びたいのに！」ってことがあります。

一瞬だけ下層のメニューが表示されるんだけど、最上位のメニューのリンクが効いてしまってページ移動してしまうんですよね・・・タップできない。

こんな状況。ドロップダウンメニューの下層のメニューをタップしたいんだけど・・・

上の状況は、レスポンシブWEBデザイン（RWDって略されて呼ばれることもある）で作られているサイトでたびたびあります。PCの表示をNexus7,iPadなどタブレットの画面サイズに合わせて表示させている例などです。もしかしたら、ドロップダウンメニューをうまく活用できていない閲覧者がいるかもしれないです。

これはもったいないです・・・というわけで、スマートフォン・タブレットでドロップダウンメニューの下層メニューもタップできるようにカスタマイズしましょう～。

やりかたはいくつかありますが、jQueryプラグインでいいものがあります。比較的手軽に実装できますので、興味をお持ちでしたらご参考ください。

jQueryプラグインをダウンロード

「Drop-Down Navigation: Responsive and Touch-Friendly」のページを開いて、最後らへんに「DoubleTaptogo.js」へのリンクがあるのでダウンロードします。（例えばGoogleChromeを使っていたら、「名前を付けてページを保存」でダウンロードします）

このダウンロードした「DoubleTaptogo.js」を利用して、ドロップダウンメニューに適用します。

こうなります（サンプル）

ちょっとサンプルを作りました。パッと見はわからないのですが、スマートフォン・タブレットで閲覧してタップすると、下層メニューが展開されます。

下層メニューもタップしてもらえそうです。

html,JavaScript,cssはこんな感じです

説明するのがあまりうまくないので、サンプルコードを掲載します。

html,JavaScript

ドロップダウンメニューと読み込むスクリプトです。

<nav id="nav">
    <ul>
        <li><a href="./1/">1</a>
            <ul class="children-1">
                <li><a href="./1-1/">1-1</a>
                    <ul class="children-2">
                        <li><a href="./1-1-1/">1-1-1</a></li>
                        <li><a href="./1-1-2/">1-1-2</a></li>
                    </ul>                
                </li>
                <li><a href="./1-2/">1-2</a>
                    <ul class="children-2">
                        <li><a href="./1-2-1/">1-2-1</a></li>
                        <li><a href="./1-2-2/">1-2-2</a></li>
                        <li><a href="./1-2-3/">1-2-3</a></li>
                        <li><a href="./1-2-4/">1-2-4</a></li>
                    </ul>
                </li>
                <li><a href="./1-3/">1-3</a>
                    <ul class="children-2">
                        <li><a href="./1-3-1/">1-3-1</a></li>
                    </ul>                
                </li>
            </ul>
        </li>
        <li><a href="./2/">2</a>
            <ul class="children-1">
                <li><a href="./2-1/">2-1</a>
                    <ul class="children-2">
                        <li><a href="./2-1-1/">2-1-1</a></li>
                        <li><a href="./2-1-2/">2-1-2</a></li>
                    </ul>                                
                </li>
                <li><a href="./2-2/">2-2</a>
                    <ul class="children-2">
                        <li><a href="./2-2-1/">2-2-1</a></li>
                        <li><a href="./2-2-2/">2-2-2</a></li>
                    </ul>                                
                </li>
                <li><a href="./2-1/">2-3</a>
                    <ul class="children-2">
                        <li><a href="./2-3-1/">2-3-1</a></li>
                        <li><a href="./2-3-2/">2-3-2</a></li>
                        <li><a href="./2-3-3/">2-3-3</a></li>
                        <li><a href="./2-3-4/">2-3-4</a></li>
                    </ul>                
                </li>
            </ul>
        </li>
    </ul>
</nav>

<!-- jQueryプラグイン「doubletaptogo.js」をドロップダウンメニューのhtmlコード以下で読み込む-->
<script src="doubletaptogo.js"></script>

<!--「#nav li」要素に「ul」要素を持つメニューに適用 -->
<script>
$( function()
 {
 $( '#nav li:has(ul)' ).doubleTapToGo();
 });
</script>

css

#nav{
    background:#E6E4D7;
    float:left;
    margin:15px;
}

#nav li{
	text-align:center;
	position:relative;
	float:left;
    width:110px;
}

#nav a{
    text-decoration:none;
    color:#333;
}

#nav li a{
	display:block;
	height:38px;
	line-height:38px;
	font-size:12px;
}

#nav .children-1 a,
#nav .children-2 a{
	height: 30px;
	line-height: 30px;
	width: 100%;
	background: #E6E4D7;
	border-top: 1px solid #D8D7CA;
}

#nav .children-2 a{
	width:100%;
}

#nav li .children-1 li,
#nav li .children-2 li{
	width:110px;
}

#nav li .children-1{
	display:none;
	position:absolute;
	top:38px;
	left:0px;
	width:100%;
}

#nav li .children-1 li .children-2{
	display:none;
	position:absolute;
	top:0px;
	left:110px;
	width:100%;
}

#nav li:hover .children-1{
	display:block;
	background:#E6E4D7;
}

#nav .children-1 li:hover .children-2{
	display:block;
	background:#E6E4D7;
}


#nav li:hover > a{
	background:#E6E4D7;
}

#nav li:hover a:hover{
	background:#DBD8C5;
}

まとめ

細かいことですが、ドロップダウンメニューのちょっとしたカスタマイズの方法でした～。この記事を読んでもちょっとわかんないな・・・という方は、制作者の方が詳しく解説されていますし、デモもありますし、解説動画もあります。

そうそう、言いたいのはこういうことっす。私がこの記事で長々と書いた内容をわかりやすく表現されています。必要に応じてご参考ください。

ちなみに、WordPressにも実装できますので、お試しください。（私は最近WordPressの制作案件で実装しました）

便利なプラグインだなぁと思います。以上、何かのご参考となりましたら幸いです。

著者:bouya Imamura