[B! accordion] blanc2005のブックマーク

WordPress ショートコードを追加できる「Shortcodes Ultimate」プラグイン

「Shortcodes Ultimate」プラグインのインストール「Shortcodes Ultimate」プラグインのホームページでプラグイングの利用方法が詳細に紹介されている。プラグインのダウンロードは、WordPressの「Shortcodes Ultimate」プラグインサイトから行う。もちろんWordPressダッシュボード＞プラグイン＞新規追加から「Shortcodes Ultimate」で検索してインストールできる。2014年1月13日現在のversionは、4.5.3。「Shortcodes Ultimate」プラグインの利用方法初期設定インストールするとWordPressダッシュボードに「ショートコード」が追加されている。ここで「Shortcodes Ultimate」の設定を行う。ショートコード＞設定＞about画面でチュートリアルを確認できる。ショートコー

blanc2005 2014/07/17

リンク

10 jQuery plugins for better website navigation

It can easily be proved that jQuery is the dominant player in the javascript libraries market. It is bundled with WordPress, the most used blogging system, and Google provides a cached version of the script. This library is most often used to add effects on your website easily, and navigation is an element that can be drastically improved by adding effects, whether it’s to hide part of the text or

blanc2005 2013/04/21

リンク

スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」:phpspot開発日誌

Slidorion, A jQuery Plugin | jQuery Image Slider and jQuery Accordion | Random Demo スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」。左側をスライダー、右側をテキストを入れたアコーディオンな感じのウィジェットが実装できます。ほどよくアニメーションして良い感じです。マークアップも綺麗に記述可能。関連エントリ iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」ファイルアップロード関連のjQueryプラグイン１０組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」 jQueryでページ送りのインタフェースが簡単に作れる「jqPagination」 jQue

blanc2005 2011/12/24

リンク

[JS]ユーザビリティに配慮したアコーディオンを実装するチュートリアル

ユーザビリティに配慮しつつ、jQueryのバグにも対応したシンプルなアコーディオンを実装するチュートリアルをSoh Tanakaから紹介します。 Simple Accordion w/ CSS and jQuery デモページアコーディオンのロジックは下記の通りです。最初にデフォルトの設定します。一番目のアコーディオンを開いて、アクティブな状態にします。クリックをすると。クリックされたアコーディオンのアイテムは開くのか閉じるのか判定します。「hidden」（閉じた状態）のアイテムをクリックすると、全てのアイテムから「active」を取り去り、閉じます。クリックされたアイテムは「active」になり、すぐにスライドダウンして開きます。ロジックのイメージは、下記のようになります。 <textarea name="code" class="html" cols="60" row

blanc2005 2010/05/30

リンク

[JS]タイル状のパネルをダイナミックに伸縮させるスクリプト -InfoGrid

グリッドに沿って配置されたパネルをダイナミックなアニメーションで伸縮させるスクリプトをCSS-Tricksから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="info-col"> <h2>Batman</h2> <a class="image batman" href="http://jprart.deviantart.com/">View Image</a> <dl> <dt>Super Power</dt> <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exe

blanc2005 2010/03/28

リンク

Advanced CSS Accordion Effect - CSS Reset

A while back, I wrote an article demonstrating how the popular “accordion” effect (as in the image above) could be replicated with nothing more than CSS. There was one caveat, however: the technique didn’t work in Internet Explorer 6 due to the browser’s extremely limited support of the :hover pseudo-element. Now, IE6’s market share is decreasing day by day – and we’re all undoubtedly thankful. Bu