アコーディオンとグローバルメニューを併せたコンテンツを実装出来るjQueryプラグイン・facets - かちびと.net
ユニークだったのでご紹介。グローバル メニューに連動してアコーディオンが 連動して開閉するコンテンツを実装する jQueryプラグイン。使いどころはあまり 無さそうですけど、もしかしたら、とい うことで・・ IE6や7でも動いてくれます・・・が、tableに置き換える事でなんとか実装してるようです。少しチカチカするので使いどころに悩みますが・・ グローバルメニューにマウスを乗せると、下部のアコーディオンが開閉します。なかなかインパクトありますねー。 下層メニューも作れる。 IETesterによるIE6のキャプチャです。 こういうのも出来るそうな。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js'></script> <script
面白いフローティングナビゲーションを実装できる「jQuery Floater」:phpspot開発日誌
jQuery Floater Plugin ? Examples Design Chemical Lab 面白いフローティングナビゲーションを実装できる「jQuery Floater」 特定のブロックをページの特定の位置に配置し、スクロールさせてもアニメーションしながら位置を記憶することができます。 要素をバウンドさせながらもとの位置に戻す効果などもあって使いようによってはなかなか面白い使い方ができそう ちょっと文章では説明しづらいのでサンプルページを見てみてください サンプルページにサンプルと一緒にコードが載っているので実装は簡単にできそうです。 関連エントリ テーブルをちょっとだけ使いやすくしてくれるjQueryプラグイン「rbTable」 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」 Yahoo!Incのお天気ウィジェット実装jQueryプラグ
リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」:phpspot開発日誌
リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 2011年09月27日- jQuery Mega Drop Down Menu Plugin ? Downloads Design Chemical Lab リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」。 次のような商用サイトでそのまんま使ってもかなり便利になりそうなドロップダウンメニューが作れます メニューバーのカラーは色々選べるようになっているのでサイトのイメージにマッチしたものを使うことが出来ます 垂直バージョンもあるみたいです 画像も組み合わせることで分かりやすいメニューが作れますね 関連エントリ スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」 Googleスタイルのシンプ
簡単なjQueryコードでリストメニューにフィルタリング機能を加える - かちびと.net
縦長になってしまったリストメニューは非常に 見にくく、使いづらいものです。ECサイトなんか でも頻繁に見かける光景ですが、カテゴリで 分けてもそれはそれで探しにくくなってしまった りと、あっちたてればこっち立たずみたいな経験 は無いでしょうか？あ、無いですか・・ そんな縦長のリストメニューの使いにくさを解消する一つの手としてフィルタリング機能があります。フィルタリングは簡単なjQueryのコードで実現することが可能です。 デモ 縦長のメニューです。テキスト入力でフィルタリングできます。 北海道（ほっかいどう） 青森県（あおもり） 岩手県（いわて） 宮城県（みやぎ） 秋田県（あきた） 山形県（やまがた） 福島県（ふくしま） 茨城県（いばらき） 栃木県（とちぎ） 群馬県（ぐんま） 埼玉県（さいたま） 千葉県（ちば） 東京都（とうきょう） 神奈川県（かながわ） 新潟県（にいがた） 富山県（とやま
全体のプレビューをページサイトに出してドキュメントのどこにいるかを分かりやすくできる「jQuery.fracs」:phpspot開発日誌
全体のプレビューをページサイトに出してドキュメントのどこにいるかを分かりやすくできる「jQuery.fracs」 2011年08月05日- jQuery.fracs larsjung.de 全体のプレビューをページサイトに出してドキュメントのどこにいるかを分かりやすくできる「jQuery.fracs」 縦に長ーいサイトだと今どこ読んでいるのか？わからなくなってしまうことがありますね. このライブラリを使えばページのサムネイルが動的に生成され、とってもわかりやすいだけでなく、サムネイル上をドラッグ＆ドロップでページ移動できちゃいます 右横にページ全体像のサムネイル 拡大するとこんな感じです ドラッグ＆ドロップでページ内を瞬間移動可能。 これはナイスですね 関連エントリ ページ内ハイライト検索が実装できるjQueryプラグイン「Plain Text Keyword Search」 今までなかっ
今までなかったスマートなページ内ナビゲーションを実装するjQueryプラグイン「Flexible Nav」:phpspot開発日誌
今までなかったスマートなページ内ナビゲーションを実装するjQueryプラグイン「Flexible Nav」 2011年08月04日- Flexible Nav jQuery library 今までなかったスマートなページ内ナビゲーションを実装するjQueryプラグイン「Flexible Nav」 <a name="hoge"></a> と <a href="#hoge"></a> を使って実現するページ内ナビゲーションをスマートに実現できます。 h1〜h3のエレメントでドキュメントの見出しを定義しておいて、プラグインで初期化すると、ページの右側に見出しが現れます。 文書の長さに応じて見出し間の距離が表されて、文書の構造が非常にわかりやすく、辿りやすくなります。 見出しをクリックすると、指定位置に移動できるのはもちろん、ドキュメント位置に応じて現在参照している見出し部分がハイライトされるので
[JS]ページの全体像を分かりやすくビジュアル化するスクリプト -jQuery.fracs
デモページ jQuery.fracsの実装 分けるエレメントの定義 エレメントはjQueryのセレクタを利用して定義できます。 var fracs = $( selector ).fracs(); 全体マップ 全体マップは空のcanvas要素を使用します。 <canvas id="outline" width="200" height="400"></canvas> 全体マップはJavaScriptで設定します。 $( "#outline" ).fracs( "outline", { crop: true, styles: [ { selector: 'header,footer,section,article', fillStyle: 'rgb(230,230,230)' }, { selector: 'h1', fillStyle: 'rgb(240,140,060)' } ] } )
折り畳み可能なシンプルツリーメニュー実装jQueryプラグイン「Simple Tree Menu」:phpspot開発日誌
折り畳み可能なシンプルツリーメニュー実装jQueryプラグイン「Simple Tree Menu」 2011年07月29日- Simple Tree Menu | jQuery Plugins 折り畳み可能なシンプルツリーメニュー実装jQueryプラグイン「Simple Tree Menu」。 階層的なリストを単純に開いたり閉じたりできるというシンプルなメニューです。 メニューは最初からズラッと並べるより少なくしたほうが選び易いので、段階的にひらいていくインタフェースは使いやすい場面もおおそうですね。 全部開くと以下のようになります。 サイドメニューなんかにあるといいかもしれませんね。 関連エントリ ページメニューにツールチップを表示して分かりやすくするjQueryチュートリアル カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flower Navigation」 かなり
横に飛び出すメガメニューを実装するjQueryプラグイン・JQUERY VERTICAL MEGA MENU - かちびと.net
最近かなり見かけるようになった印象の、 大量のコンテンツを格納するメガメニュー の横に飛び出すタイプ。jQueryで実装して います。メガメニューはECサイトやポータル サイトなどなど、階層の深いWebサイトにて ユーザビリティ向上に貢献してくれます。 何度もクリックしないと目的の場所に到達できない、という設計はユーザーに取って不便ですし、離脱率も上げてしまいがちですので、大量のコンテンツを保有するWebサイトではこういったメガメニューの導入を検討するのも良いかも知れません。 メガメニューはドロップダウン形式が多いのですが、今日ご紹介するスクリプトはサイドメニュータイプです。 見た目はよくあるサイドナビゲーションメニューですが、マウスを乗せると横に関連ページなどが整理された状態で飛び出しますので視覚的にもコンテンツを探しやすそうです。 画像を含めてあげるのもなかなか効果高そうですな。 コー
[CSS]ビューポートのサイズに合わせてナビゲーションの形状を変更するテクニック
ビューポートのサイズに合わせてスタイルシートを適用するMediaQueriesを利用して、ナビゲーションの形状を変更するテクニックを紹介します。 デモページ：スクリーンサイズが960pxより小さい時の表示 以下は各ポイントを意訳したものです。 実装 これら2つのナビゲーションを実装するには、ul要素とselect要素の2つが必要です。 HTML：Step 1 まずは、nav要素内にul要素とselect要素の2つを記述します。 ※最終形は、異なります。 <nav> <ul> <li><a href="/" class="active">Home</a></li> <li><a href="/collections/all">Books</a></li> <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> <li><a href
ベーシックで汎用性のありそうなjQueryイメージスライダー・The Lof JSiderNews - かちびと.net
クロスブラウザに対応したベーシック で汎用性のありそうなスライダーを 実装出来るjQueryプラグインのご紹介。 The Lof JSiderNewsは派手な装飾も 無く、シンプルで欲しい機能は揃え てくれている印象です。 なかなか使いやすそうなので備忘録。派手なスライダーが結構多い印象ですが、結局普通のものが一番使いやすいですよね。派手なのもインパクトあって好きですけどｗ 今日のプラグインもクロスブラウザ対応でベーシックな、汎用性のあるスライダーです。コーポレートサイトと相性いいかもですね。 サムネイルがナビゲーションとして付きます。画像のスライドと共にサムネイルもアニメーションスライドします。デモサイトでは1つしかありませんけど、実装出来る形は6種類から選択できます。IE6でもIE7でも問題なく動作しました。※IE6の透過処理は別途必要です。 デザインは6種 例として2つキャプチャ撮り
かなりクールなjQueryのメニュープラグインやチュートリアル集:phpspot開発日誌
15 Fresh jQuery Menu Plugins and Tutorials かなりクールなjQueryのメニュープラグインやチュートリアル集 メニューというと便利なものが多かったりしますがデザイン性も秀逸なものといえば、その中から限られたものになります。 「むむぅ、これは」というデザインのものが多数紹介されていましたのでご紹介です。 １からリデザインしなくても少しの手間で実用的なものが実装できそうです これはつかえますね 関連エントリ WindowsのメニューバーっぽいUIを実現できるjQueryプラグイン「Win Menu」 Googleスタイルのシンプルなドロップダウンメニュー実装jQueryプラグイン 画像がダイナミックにスライドするメニューバー実装jQueryプラグイン「pictureMenu」 カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flowe
WindowsのメニューバーっぽいUIを実現できるjQueryプラグイン「Win Menu」:phpspot開発日誌
Win Menu | jQuery Plugins WindowsのメニューバーっぽいUIを実現できるjQueryプラグイン「Win Menu」 WindowsというかMacにもある誰もが使い慣れたメニューをサイト上で実現できます。 誰もが使い慣れているということで使い方やサイトの性質次第では大きくサイトの使い勝手をあげられそうです メニューの定義はmenuタグで階層的に表現するため、あとから見てもとても分かりやすいものになります。 menu自体は非推奨の要素らしいですが、多くのブラウザが対応しているみたいです。ここら辺こだわりがあるかたはULなどに修正してもよいでしょう。 jQueryがあれば何でもできちゃいますね 関連エントリ フォーム要素をクールにするためのjQueryプラグイン集 上下左右どこでも設置できるスライドコンテンツ実装jQueryプラグイン「jQuery Slick」 簡
jQueryを使って実装する、かっこいいナビゲーションのまとめ | コリス
利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。
Facebookライクなサイドバーが簡単に実現可能なjQueryプラグイン「MyFacebookStyleSidebar」:phpspot開発日誌
Facebookライクなサイドバーが簡単に実現可能なjQueryプラグイン「MyFacebookStyleSidebar」 2011年06月09日- Official Demo page for MyFacebookStyleSidebar jquery plugin Facebookライクなサイドバーが簡単に実現可能なjQueryプラグイン「MyFacebookStyleSidebar」 このプラグインを使えば左側にメニュー、右側にコンテンツがあり、メニュークリックでAjaxなどによって画面を切り替えるUIが実現できます。 ajaxでページ読み込みはもちろんiframeも利用可能みたいです。 ローディング画像を表示できたり、SEOフレンドリなAjaxコール、そしてクロスブラウザ動作という特徴を持ちます。 実際に数億人が使うUIを真似ることで、世界中の人々が使いやすいUIというものを構築で
[JS]リスト要素の一部をアニメーションで表示・非表示させるスクリプト -aPartHide | コリス
長いリストを省スペースに設置するのに便利なリストの一部を非表示にし、隠したアイテムをアニメーションでスライド表示させるjQueryのプラグインを紹介します。 aPartHide デモ [ad#ad-2] 非表示にするアイテムの数は設定が可能で、デモでは七つのアイテムを配置したリスト要素の初期状態では3アイテムだけ表示し、「more」をクリックするとすべてのアイテムが表示されます。 また、全アイテムを表示した状態で、「less」をクリックすると3アイテムのみ表示されます。 aPartHideの実装 HTML リスト要素をdiv要素で内包し、表示・非表示用のdiv要素を配置します。 <div id="box1" class="demo"> <h3>Demo</h3> <ul> <li>Demo list item 1</li> <li>Another list item</li> <li>Th
[JS]自動でページ内の見出し要素を抽出しアンカーを生成するスクリプト -AutoAnchors
指定した範囲内から特定のエレメント（h2要素など）を自動的に抽出し、ページ内アンカーの一覧を自動で生成するjQueryのプラグインを紹介します。 AutoAnchors デモ [ad#ad-2] デモでは、div要素内にh3要素を三つ配置しており、コンテンツの右側に各見出しのページ内アンカーのナビゲーションを自動で生成しています。 AutoAnchorsの実装 HTML HTMLはシンプルで、各見出しとパラグラフをdiv要素で内包するだけです。 各見出しにidなどを設定する必要はありません。 <div class="content demo"> <h3>見出し</h3> <p>パラグラフ</p> <h3>見出し</h3> <p>パラグラフ</p> <h3>見出し</h3> <p>パラグラフ</p> </div> JavaScript 「jquery.js」と当スクリプトを外部ファイルとし、
[JS]スムーズなアニメーションで横スクロールコンテンツを作成するスクリプト -X-Rhyme.js
水平方向に長いコンテンツをスムーズなアニメーションで横スクロールさせるjQueryのプラグインを紹介します。 X-Rhyme.js [ad#ad-2] デモページが少し分かりにくいのですが、左に配置された四つの矩形がナビゲーションで、そこをクリックすると、コンテンツを横スクロールで表示します。 デモページ：「Work」をクリックしたキャプチャ 横スクロールの操作は、マウスホイールにも対応しています。 JavaSciprt スクリプトのオプションでは、ナビゲーションのセレクタ、スクロール時のスピード・アニメーションを変更することができます。 $('.horizontal_items_container').xrhyme({ navigationSelector : '.anchor a', anchorMode : true, wheelSpeed : 0.7, animationTime
[JS]スロットマシンのようなアニメーションが楽しいナビゲーションを実装するチュートリアル
jQuery quickie: Slot machine navigation デモページ [ad#ad-2] デモではナビゲーションの各ラベルをマウスでホバーすると、スロットマシンのアニメーションを楽しめます。 ナビゲーションの実装 HTML シンプルなリスト要素で実装します。 <ul id="jquerynav" class="navigation"> <li><a href="#" class="marcofolio">Marcofolio.net</a></li> <li><a href="#" class="rss">RSS</a></li> <li><a href="#" class="twitter">Twitter</a></li> <li><a href="#" class="jquery">jQuery</a></li> </ul> CSS 一枚の画像を使ってCSS S
Googleスタイルのシンプルなドロップダウンメニュー実装jQueryプラグイン:phpspot開発日誌
jQuery Dropdown menu with google style | jqueryload.com Googleスタイルのシンプルなドロップダウンメニュー実装jQueryプラグイン。 比較的最近出始めたGoogleのヘッダー部分にあるドロップダウンメニューですが、これと似たメニューを実現するためのjQueryプラグインが公開されています。 黒バージョンにもできるようです。 ブラウザによっては少しレイアウトが崩れるので若干手直しが必要かも。 関連エントリ クールにアニメーションする水平ドロップダウンメニュー実装jQueryライブラリ jQueryで幅の大きなドロップダウンメニュー作成チュートリアル ビローンと伸びるドロップダウンメニュー実装jQueryサンプル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
