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. CSS

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

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

  2. jQuery

    ボックス要素を横並びにしたときに高さが揃えられるJQuery、jquery.matchheight.…

    みなさんこんにちは、mayukouです。今回はwebデザインするとき…

  3. jQuery

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

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

  4. Illustrator

    面倒じゃない!簡単なIllustratorでシームレスなパターンの作り方

    みなさんこんにちは、mayukouです。デザインを作る上で、背景がシ…

  5. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える

    みなさんこんにちは、mayukouです。最近では、webデザイナーと…

  6. Web Design

    コピペでOK!wordpressに設置するシンプルな検索ボックス

    こんにちは。mayukouです。最近は、wordpressのカスタマ…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

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

  1. デザイン

    Adobe CCを導入しました。使ってみて感じたメリットとデメリットとは?
  2. Mac

    macbook “12 goldが届きました。使用感、メリット・デメ…
  3. ブログリニューアル

    wordpress

    ブログリニューアルしました。そのときやったことなど。
  4. Web Design

    コピペでOK!wordpressに設置するシンプルな検索ボックス
  5. illustration

    対面打ち合わせ一切なし!イラスト制作の仕事の流れ
PAGE TOP