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

スマホサイトのメニューを実装するのに人気のあるJQueryプラグイン『Sidr』。リンクをタップすると横からにゅっとメニュー画面が出てきて、操作性のよいものです。しかし、メニューを出した後は、もう一度メニューのリンク先をタップしないと元に戻りません。

サイトに初めて訪れてくださった方や操作の不慣れな方は、そのことがわからず、メニューを閉じることができないのではないでしょうか？ワタシ、閉じ方わからず焦りましたｗ
メニューの項目に『閉じる（戻る）』ボタンがあればもっと操作性が良くなるのではないかと思ったので、当ブログに設置した方法をご紹介します。

こちらの記事は公開時より年月が経過しており内容が古くなっている可能性があります。この記事で紹介しているソースコードの使用や、phpコードの書き換えは自己責任でお願いします。

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

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

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

JQuery『Sidr』をWordPressのカスタムメニューに対応させ設置する方法 – Shufulife

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』ネタでした。けっこう横から出てくるメニューを使っていらっしゃる方多いですね。スマホだとタップしやすいメニューなのでなかなか良さそう！ユーザビリティー、大切にしたいです。