【コピペOK】jQueryのアコーディオンメニュー実装サンプル10選！
どうも、ジャングルオーシャンのミケです。 今日はjQueryで実装するアコーディオンメニューのご紹介だよ。 簡単すぎてあっという間に実装できてしまうので 「HTMLとCSSはわかるけどjQueryってなんだかとっつきにくいな～」「jQueryってなに？JavaScriptのらいぶらり？は？」 と思ってるそこのあなた！ぜひ見ていってね！ ではいってみよう！ アコーディオンメニューとは アコーディオンメニューってなんだよって人の為に説明するね。 クリックやタップをするとうにょ〜んと中身が出てきて もう一度クリックやタップをするとしゅ〜んと中身が閉じていく機能のことだよ。 Webサイトでよく見かけるアニメーションだよね。 要素が多くてごちゃごちゃしがちなデザインを収納するのによく使われるよね。 アコーディオンメニューのメリット・デメリットはこちらの記事を参考にしてみてね。 具体的なイメージは用意
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込みです。
[JS]パネルをスムーズなアニメーションで開閉するシンプルなスクリプト
Simple Toggle with CSS & jQuery demo デモではバーをクリックすると、パネルがスムーズに開閉します。 それぞれのパネルは個別に開閉するため、同時に開いた状態にすることも可能です。 バーはH2要素、パネルはdiv要素で実装されており、パネル内には画像やテキストなどを自由に配置することができます。 HTMLの基本構造 <textarea name="code" class="html" cols="60" rows="5"> <h2 class="trigger"><a href="#">Toggle Header</a></h2> <div class="toggle_container"> <div class="block"> <h3>Content Header</h3> <!--Content--> </div> </div> </textarea>
[JS]ユーザビリティに配慮したアコーディオンを実装するチュートリアル
ユーザビリティに配慮しつつ、jQueryのバグにも対応したシンプルなアコーディオンを実装するチュートリアルをSoh Tanakaから紹介します。 Simple Accordion w/ CSS and jQuery デモページ アコーディオンのロジックは下記の通りです。 最初にデフォルトの設定します。 一番目のアコーディオンを開いて、アクティブな状態にします。 クリックをすると。 クリックされたアコーディオンのアイテムは開くのか閉じるのか判定します。 「hidden」（閉じた状態）のアイテムをクリックすると、 全てのアイテムから「active」を取り去り、閉じます。 クリックされたアイテムは「active」になり、すぐにスライドダウンして開きます。 ロジックのイメージは、下記のようになります。 <textarea name="code" class="html" cols="60" row
Accordion Widget | jQuery UI API Documentation
Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the header option for information on how to use custom markup structures. The panels can be activated programmatically by setting the active option. Keyboard interaction When focus is on a header, the following key commands are available: UP/LEFT: Move focus to the previous
WordPressのサイドバーにアコーディオンスクリプトを実装できるプラグイン- Accordion
Accordionは、WordPressのサイドバーにjQueryを使用したアコーディオンのインターフェイスを実装できるプラグインです。 Accordion the new wordpress ajax widget to enhance your sidebar functions プラグインのダウンロードは、ページの中程にある「You can download the widget from here」からできます。 Accordionプラグインの設置は、簡単です。 フォルダごとpluginsフォルダにアップロードし、プラグインの「有効化」を行い、「表示」の「ウィジェット」から設定を行います。 インターフェイスは、タブ形式・アコーディオン形式の２つが利用できます。
Prototype.jsとScript.aculo.usで作るクールなアコーディオンＵＩ:phpspot開発日誌
NETTUTS - Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous Prototype.jsとScript.aculo.usで作るクールなアコーディオンＵＩ 次のようなマークアップでシンプルに実装できる模様。 <div id="test-accordion" class="accordion"> <div class="accordion-toggle">トグル1</div> <div class="accordion-content">コンテンツ1</div> <div class="accordion-toggle">トグル2</div> <div class="accordion-content">コンテンツ2</div> <div class="accordion-tog
[JS]わずか1.3KBの軽量で、快適に動作するアコーディオンのスクリプト | コリス
Leigeberのエントリーから、以前紹介した「軽量でシンプルなアコーディオンのスクリプト」より更に軽量（1.3KB）になったアコーディオンのスクリプトを紹介します。 Animated JavaScript Accordion V2 demo Accordion V2はjQueryやPrototypeなどの他のスクリプトに依存することなく、単独で動作するスクリプトで、対応ブラウザはIE6, 7, 8, Fx2, 3, Op, Safari, Chromeとなっています。 ※Op9.6.0, Safari3.1.2 for Winで正常に動作しました。 仕様自体に大きな変更はなく、アコーディオンの開閉のタイミングやスピードを調整することができます。 アコーディオンの各項目はdl要素となっており、CSSオフ時やスクリプトオフ時にも情報入手の差し支えないように表示されます。
RedLine Magazine : Spryの開閉パネルの件
Spryの開閉パネルの件 このサイトの最下部で使ってる開閉パネルについてメールを頂いたので、それについて書いてみます。jQuery以外のライブラリに触れるの久しぶりすぎて記憶が飛んでた・・・。 Sakkさんへ。 メールありがとうございました。お返事です(n'∀')η ダウンロードと必要なファイル まず本体をダウンロードします。 Adobe Labs - Spry framework for Ajax このページの「Downloads」んとこのリンクを辿っていくとダウンロードできます。途中Adobe IDが必要になります。IDをまだお持ちでないなら作ってダウンロードしてくださいまし。 うちで使ってるのと同じようにするなら必要なのは上でダウンロードしたものの中の「widgets/collapsiblepanel/SpryCollapsiblePanel.js」と「widgets/collaps
RedLine Magazine : jQueryでリストを開閉させたい
jQueryでリストを開閉させたい こちらの記事、サンプルを拝見して。 Css Globe - Sitemap Styler: Style your Sitemaps with CSS and Javascript 英文なのだが、上記ページの「Examples」の部分の各サンプルを見れば何がしたいかはすぐに分かると思う。サイトマップだけでなく、いろんな場所で使えそう。動きも気持ちいいし、是非使ってみたいと思ったのだが、実際使ってみるとダダーと下階層のulリストを開くためには左の「+」マークを的確にポチっとしないといけない。またjs無効の際、下階層のulリストはCSS側で「display:none;」になっているので、そのままでは中身が表示されない。 じゃあそれ、jQueryでやってみよう。 もう少し自分好みな感じにできないかなーということで、jQueryでやってみることにした。対象となるペ
jQueryでアコーディオン作成のチュートリアル:phpspot開発日誌
Photoshop Tutorials - HV-Designs.co.uk jQueryでアコーディオン作成のチュートリアルが公開されています。 HTML+CSSでのスタイリング〜jQueryのコードまで。 ちょっとした入門記事としてよさそうです。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ
簡単なjQueryのアコーディオンサンプル | latup - 熊本でホームページ制作をしている人のメモ
ホームページ制作でタブやアコーディオンなどを設置する事があるのですが、そういうケースではjQueryが便利です。 色々と面白いプラグインが多数ありますが、意外と自分でタブ切替やアコーディオン処理をやろうと思うと難しいみたいで、まず簡単なアコーディオン処理のサンプルを作ってみました。 以下、サンプルの解説。 簡単に説明すると、左のアコーディオンが個別に開閉するパターン（sample_1）で、右のアコーディオンが開いているのは常に１つのパターン（sample_2）です。 全体は実際のサンプルページのHTMLソースを参考して下さい。 肝心のjQueryは以下の記述でGoogleからもらい、jQueryの処理は外部ファイルとしてまとめます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javasc
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初心者にも分かる！なアコーディオンの作り方
jQueryでの開閉式のアコーディオンの動きいろいろ | CSS Lecture
http://web.donnatokimo.com/jquery/517
Loading...
Nullyの日記
Horizontal accordion