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

公開日: : 最終更新日:2015/08/10 WordPressテーマのカスタマイズ, ブログについて

このエントリーをはてなブックマークに追加

スマホサイトを使いやすくするアコーディオンメニューの実装方法.png
スマホからのアクセスが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;
}

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

スポンサーリンク

まとめ

・スマホサイトでは限られたスペースの中にどんな情報を詰め込むか選別しなければならない
・PCの要素を捨てなければならない
・そんなときはアコーディオンメニューが便利
・LIGさんのおかげで簡単にアコーディオンメニューが実装できた

マジでLIGさんに感謝です。

超簡単jQuery!"toggle系メソッド"を使ってアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG超簡単jQuery!"toggle系メソッド"を使ってアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG

スマホサイト最適化のヒントを

仕事で悩む人から人気の記事

筆者Twitterアカウント

フォローいただければ、最新記事や、ブログで稼ぐ、アクセスを集める方法などをタイムラインにお届けします。

ブログ「らふらく」を購読する→follow us in feedly

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

ブログで稼ぐ方法をまとめてます

関連記事はこちらからどうぞ!

いつもシェア感謝です!今回もぜひ

このエントリーをはてなブックマークに追加
※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!
SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。

SNSでフォローしてお金を稼ぐための情報を受け取ろう
LINE@で友達追加(スマホでLINEを起動 > その他 > 友だち追加 > QRコード読み取り)
ブログで生活しているタクスズキと申します。「好きなことを仕事に」を当たり前にする活動をしています。よく「真面目」と言われる89世代の意識高い系です。 スズキについて詳しく知りたい方はこちらからどうぞ
仕事のご依頼(広告掲載、記事寄稿など)はiwgp545@yahoo.co.jpからお願いします!