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フレームワーク

    サイト制作が早くなる!Bootstrapの特徴

    サイト制作のスピードを上げたい、そんな方に。6、7年くらい前にこのB…

  2. CSS

    グローバルメニューに最適♫メニュー幅を均一にしてくれるtable cellが便利!

    みなさんこんにちは、mayukouです。「コーポレートサイト作るけど…

  3. CSSフレームワーク

    押さえておきたい!代表的なCSSフレームワークまとめ

    みなさんCSSフレームワークをご存知ですか?最近CSSフレームワー…

  4. Illustrator

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

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

  5. Web Design

    今すぐできる!HTMLメールの作り方

    みなさんこんにちは、mayukouです。ECサイトを運営していると…

  6. Web Design

    【有料記事】スキルアップしよう。デザイン力が育つ方法とは。

    みなさんこんにちは、mayukouです。デザイナー5年目の私が、仕事…

コメント

  • コメント (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. お仕事紹介

    お仕事紹介:保育園のお祭りパンフレットを作りました!
  2. Photoshop

    画像からフォントを探してくれる!Photoshopのマッチフォントが素敵。
  3. free font

    デザイン

    デザインの質が上がる!私が利用しているフリーフォントサイト
  4. Mac

    アプリケーションをすぐに起動できる!Alfredの使い方
  5. illustration

    混色できる水彩画テイストの表現が可能なipad proアプリ!Tayasui S…
PAGE TOP