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. Web Design

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

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

  3. Web Design

    スキルアップ!Webデザイナーになるための勉強をしたい人にオススメ書籍まとめ

    みなさんこんにちは、mayukouです。webの業界は、日々進歩して…

  4. Photoshop

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

    みなさんこんにちは、mayukouです。「このフォント何を使っている…

  5. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介

    みなさんこんにちは、mayukou です。肌寒いような暖かくなった…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. CSSフレームワーク

    サイト制作が早くなる!Bootstrapの特徴
  2. 写真

    食べ物やブツ撮りにおすすめ♩PENTAXの単焦点レンズ買いました。撮ったものなど…
  3. Photoshop

    スキャンで取り込んだイラストの線をPhotoshopで抽出するSeparate …
  4. jQuery

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

    色々宣言!?2016年の振り返りと来年の抱負
PAGE TOP