忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[148] [147] [146] [145] [144] [143] [142] [141] [140] [139] [138

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

jQueryでつくるアコーディオンメニューCookie機能付き

繁忙期真っ只中です。

シルバーウィークやらプラチナウィークやらが9月にあるそうですが、
仕事をするものからすれば嬉しくもあり、煩わしくもあり。

この5連休のために、連休前にどかっと仕事を終わらせなければならない、という反面、
連休明けのお仕事を連休中に(出勤して)終わらせてしまえる(笑)、という考え方もできるし。

どうなることやら。


ということで、(全然関係ない前置きでしたが、)
jQueryでつくるアコーディオンメニュー(Cookie機能付き)
のご紹介です。
デモを見る

参考にさせてもらったサイトは下記です。
jQueryを使用したCookie開閉保持メニューをよりjQueryっぽく書き直す


「アコーディオンメニュー」とは書いていますが、
実際にはメニューではなく、開閉式のコンテンツとして実装しました。
デフォルトでは詳細が隠れていて、ボタンを押すと詳細情報が表示される仕組みです。

あまり汎用性を考えず、
「このページにだけ組み込むためのスクリプト」として書いたため、(しかもそれを汎用的にする気力がないため、)
ちょっと扱いづらいかもしれません。

ブラウザを閉じた時点でcookieは消えるようにしています。
また、最初のアクセス時に一番上の項目が開いている状態になるようにしています。


JSルールとしては、

「ひらく」ボタン⇒ファイル名が○○_cl.拡張子
「ひらく」ボタンロールオーバー後⇒○○_cl_o.拡張子
「とじる」ボタン⇒○○_op.拡張子
「とじる」ボタンロールオーバー後⇒○○_op_o.拡張子

全部ひらく・とじるボタン⇒命名ルールは上に同じ。imgのidにallviewを指定。

開閉コンテンツ⇒div.detailの中に入れる

cookieの配列は現状ではa,b,c,d,e,f,gまではいっています。
aが最初の.section、bが2番目の.section。という感じで、cookieと同期しています。
項目を増やしたい場合は、アルファベットを増やせばOK。

※ただし、エクセルの列表示みたいにBa、Bbとかはできないハズ。なので、26項目が限界かなと思います。
※1と9は別のトリガーに使っているので、cookie配列の中に入れないで下さい。


本当はjQuery以外のライブラリは使いたくなかったけれど、
JSの技量が足りないために導入いたしました。
何度かもう実装できんかもと思ったけれど、無事できてよかったです。
PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
11« 2017/12 »01
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
ブログ内検索
忍者ブログ [PR]