ブログやWEBページでメニュー部分がものすごく長くなるのは、使い勝手的にはあまり良い物ではありません。ただ日々運営していれば様々なアイデアが生まれコンテンツは増え続けてくると思います。そんな時に便利なのがコンテンツを格納できるアコーディオン式のメニュー。
様々なタイプのものがリリースされていますが、今回紹介する「Simple Javascript Accordions」は1年前に作られた物ではありますが、シンプルな構造と軽さと動きが気持ちよかったので改めて紹介したいと思います。
名前の通りjavascriptで動作し、サイズも1,149バイトと非常に軽量になっていますし、シンプルなだけにブラウザにも幅広く対応しています。また様々なタイプのアコーディオンが用意されていますので、サイトにあった形で実装できます。動作デモは「Simple Javascript Accordions」からご覧ください。
デザインはCSSで制御され、同一ソース内に書かれてていますので非常に簡単にカスタマイズできます。またソースにもコメントが詳しく書かれていて実装も簡単にできます。
コメント欄を見てみると実際にこちらをベースにしたカスタマイズされたものが「Styling an Accordion with CSS」で公開されています。カスタマイズを考えられている方は参考にどうぞ。
Deziner Folio» Blog Archive » Simple Javascript Accordions
Related Articles:
- WEB制作に役立つ汎用性の高いJavaScriptライブラリ 「MJL（MITSUE-LINKS JavaScript Library）」
- WEBデザイナーのためのリソース集のまとめ「10 Websites with huge list of resources」
- システムアイコンからアプリアイコンまで170のアイコンを収録したアイコンセット「170 dock icons」
- ハイクオリティな厳選CSSデザインテンプレート集「Free CSS Templates」
- hr罫線コンテスト「The <hr>-Contest Results - Download your fresh <hr>-line now!」
(11)
(0)
(6)
Total: 18
