横から出てくるメニューを実装できるJQuery『Sidr』に閉じるボタンを設置する

 2014/10/05

sidrに閉じるボタンを設置
スマホサイトのメニューを実装するのに人気のあるJQueryプラグイン『Sidr』。リンクをタップすると横からにゅっとメニュー画面が出てきて、操作性のよいものです。しかし、メニューを出した後は、もう一度メニューのリンク先をタップしないと元に戻りません。サイトに初めて訪れてくださった方や操作の不慣れな方は、そのことがわからず、メニューを閉じることができないのではないでしょうか?ワタシ、閉じ方わからず焦りましたw
メニューの項目に『閉じる(戻る)』ボタンがあればもっと操作性が良くなるのではないかと思ったので、当ブログに設置した方法をご紹介します。

スポンサーリンク

Sidrに閉じるボタンを設置する手順

『Side』をサイトに組み込む

Sidrの詳しい設置方法につきましては前回のエントリーでご紹介しました。またはSidrのサイトにてご確認ください。

Sidrは通常の記載ですとこのような記述になります。

<!--タップするリンク -->
<a id="simple-menu" href="#sidr">メニュー</a>
<!-- メニュー部分 -->
<div id="sidr">
<ul>
<li><a href="#####">メニュー内容1</a></li>
<li><a href="#####">メニュー内容2</a></li>
<li><a href="#####">メニュー内容3</a></li>
</ul>
</div>
<script>
jQuery(document).ready(function() {
jQuery('#simple-menu').sidr();
});
</scrip>

このメニューを呼び出すJQueryのidをclassに変更します。(黄色でマークアップしているsimple-menuの部分です)さらにメニューの項目に閉じるボタンを追加するとこうなります。

<!--タップするリンク -->
<a class="simple-menu" href="#sidr">メニュー</a>
<!-- メニュー部分 -->
<div id="sidr">
<ul>
<li><a href="#####">メニュー内容1</a></li>
<li><a href="#####">メニュー内容2</a></li>
<li><a href="#####">メニュー内容3</a></li>
<li><a class="simple-menu" href="#sidr">メニューを閉じる</a></li>
</ul>
</div>
<script>
jQuery(document).ready(function() {
jQuery('.simple-menu').sidr();
});
</scrip>

これでメニューを開くと一番下に閉じるボタンが出現し、そこをタップするとメニューが戻り、記事が全画面表になります。

スポンサーリンク

WordPressのカスタムメニューに実装するには

カスタムメニューに『Sidr』を組み込み閉じるボタンを付けるのも簡単です。

<!--タップするリンク -->
<a class="simple-menu" href="#sidr">メニュー</a>
<!-- メニュー部分 -->
<div id="sidr">
<?php wp_nav_menu(
array(
'container' => false ,
'items_wrap' => '<ul>%3$s<li><a class="simple-menu" href="#sidr">メニューを閉じる</a></li></ul>'
)
); ?>
</div>
<script>
jQuery(document).ready(function() {
jQuery('.simple-menu').sidr();
});
</scrip>

タップするリンクとJQuery部分で、simple-menuのidをclassに変更
メニュー部分は</ul>の前に(メニューの一番下)【メニューを閉じる】ボタンのリンクを設置しました。カスタムメニューにデフォルトで付いている余計なDIVやクラス名の削除し、メニューのliタグに閉じるボタンを入れました。

これで『Sidr』に閉じるのボタンを入れることが出来ました。

まとめ

前回に引き続き『Sidr』ネタでした。けっこう横から出てくるメニューを使っていらっしゃる方多いですね。スマホだとタップしやすいメニューなのでなかなか良さそう!ユーザビリティー、大切にしたいです。

それではちゅんこ@shufulifeがお送りしましたー。

WordPress

Please comment!

  

1件のコメント

  • さこっち 2015年4月10日 19:52

    参考にさせて頂きました、時間なかったので
    助かりましたっ!

Messege




現在トラックバックはありません。