便利！スマホサイトにアコーディオンメニューをjQueryで実装する方法

スマホからのアクセスが70%以上の本ブログではスマホでの読みやすさ、使いやすさを追求している最中です。読み手がスマホで閲覧するシーンを想定したときに第一に気になるのがPCに比べてスペースが少ない事です。そのためファーストビューに何を見てもらうかを選別することは最強に重要なのです。PCと違ってスマホではスペースが限られているため、何かを捨てなければなりません。

カテゴリも見てほしいし、ブログTOPページも見てほしい、検索ボックスも見てほしいしと盛り込んでいくとユーザーにとって使いにくいUIになってしまいます。しかし、そんなときに便利なのがアコーディオンメニューです。初めて聞いた言葉かもしれませんが、多くのスマホサイトで目にするものです。

今回はスマホUIを考えるときに便利なアコーディオンメニューを実装する方法を紹介していきます。

アコーディオンメニューとは何か？

アコーディオンメニューとは、スマホサイトでよくある「ニュっ」と出てくるメニューの事です。動画を見れば一目瞭然です。

ご理解いただけましたか？きっと目にした事があるはずです。

これからアコーディオンメニューの実装方法をコード込みで説明していきます。

アコーディオンメニューの実装方法

それでは実装に移りましょう。
今回はLIGの超簡単jQuery！”toggle系メソッド”を使ってアコーディオンメニューやタブをさくっと実装する方法を参考にさせて頂きました。
こちらで紹介されているコードをアレンジすれば実装できてしまいます。LIGさんマジでありがとうございます。

コードはこんな感じ。

<span id="open_list" style="float:right;">
<img src="メニューアイコンのパス" width="32" height="32">
</span>

画像はICONFINDERで探すといいのが見つかります。無料の作品もありますよ。

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
<!-- メニューリスト -->
<div id="acMenu">
<ul style="list-style:none;"><!-- ループを使う -->
  <li class="menu-item">
    <a href="<?php echo get_category_link('カテゴリID');?>"><?php echo get_cat_name('カテゴリID'); ?></a>
  </li>
</ul>
</div>
<?php endif; ?>

#acMenuの部分が画像での黒い部分にあたります。

<script>
  (function($){
    $(function(){
        $("#open_list").on("click", function() {
            $("#acMenu").slideToggle(100); //数値は好みに応じて変える
        });
    });
  })(jQuery);
</script>

#open_list{
    display:block;
    width:50px;
    height:50px;
    line-height:50px;
    text-align:center;
    cursor:pointer;
}
#acMenu{
    background:#f2f2f2;
    width:200px;
    height:50px;
    line-height:50px;
    text-align:center;
    border:#666 1px solid;
    display:none;
    float:right;
}
li.menu-item{
    background-color: #666666; 
    position: relative;
    border-bottom: solid 1px white;
}
li.menu-item a{
	color: #FFFFFF;
	text-decoration: none;
}

以上でアコーディオンメニューが実装できてしまいます！便利ですね。
これでスマホサイトに必要な情報を、スペースを有効活用しながら組み込む事ができます！