jQuery

スマホに使える!3階層のアコーディオンメニューを作りました!


仕事でスマホサイトを作っているのですが、
その際にモックアップとして作ったアコーディオンメニューがありますので、
コードをシェアします。
解説しながら、お伝えできればと思います。
JQueryが少しでも読めると、カスタマイズするのに便利なことを実感しました!
JQueryはかじった程度なのですが、
これがわかると、ちょっとした挙動を変えることができます。
オススメです。

スポンサードリンク

MFI対応とは。
Moblie First Indexの略で、Googleがスマートフォンページのインデックスを主とした方式に変更を行うことをモバイルファーストインデックスと呼びます。 
GOOGLE公式ブログ

アコーディオンメニューの作り方

まずは、デモをご覧ください。
DEMO

挙動を動画にしてみました

カスタマイズさせていただいたサイトはこちらです。
http://php.o0o0.jp/article/jquery-multiaccordion
これにCSS、アコーディオンJSを書き加えた形です。

使用するJQueryコード

GoogleのJqueryスクリプトをHead内に記述します。それから、スマホに対応するためにメディアクエリを記述します。

HTML

JQueryで機能しCSSで形を整えるために、各要素にクラスを割り振ります。

CSS

ここは、形を整えるためですので、アコーディオンの動きと直接関係があるわけではありません。

JQuery

<head>内に書きます。

clickすると、slideUpし、
toggleClassは、指定したclassのオン(設定)、オフ(削除)の切り替えを行います。
ここではアコーディオンを開きながら、クラスをふり、閉じるとクラスが消えるという便利なコードです。
openまたは.openAcdというクラスは、開閉する矢印を機能させるために使います。

JQueryの勉強にオススメ

オススメの書籍はこちら

やさしくはじめるWebデザイナーのためのjQueryの学校

最後に

いかがでしたか?コードが多めですが、ぜひお試しください。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. jQuery

    画像も文字もスライド可能!Swiper.jsでコンテンツスライダーを簡単に!

    皆さんこんにちは、mayukouです。先日、スライダーに便利で簡単な…

  2. Web Design

    デザインが成功するテンプレがここに。「なるほどデザイン」を読みました

    みなさんこんにちは、mayukouです。今回は、デザイン関連のお勧め…

  3. jQuery

    カードレイアウトにもオススメ!Masonryプラグインの使い方

    みなさんこんにちは、mayukouです。今回は、今流行りのカードレイ…

  4. Web Design

    クライアントに喜ばれる!集客用ホームページを作る手順

    もっとあなたに作って欲しい!とどんどん注文がくるwebデザイナーになり…

  5. CSS

    一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法

    みなさんこんにちは、mayukouです。ランディングページやネットシ…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Photoshop

    イラストをスタンプにしよう!描いたイラストをphotoshopのカスタムシェイプ…
  2. 日記

    2015年の振り返りと今年の抱負
  3. Illustrator

    スキャンした画像をIllustratorでベクターにする方法2 (追記)
  4. Tutorial

    自分らしさがアップ!WordPressのサイドバーにInstagramウィジェッ…
  5. Mac

    仕事が早く終わる!集中力を持続して生産性アップできるPomodoroのアプリがオ…
PAGE TOP