なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」:phpspot開発日誌
Home | JavaScript UI - w2ui Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」。 グリッド、ツールバー、サイドバー、閉じれるタブ、フォームのウィジェットがBootstrapに追加できそう。 グリッド ツールバー サイドバー 閉じれるタブ フォーム IE8でサポート対象外なのに注意ですが、ますますBootstrapが強化されますね 関連エントリ Google風のBootstrapテーマ「GoogleBootstrap」 Bootstrapで矢印を描くのなら「Bootstrap Arrows」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」 TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」 Twitter BootStrap に追加できる５つのコ
超クールなjQueryUIテーマ「Delta」:phpspot開発日誌
Delta - The Free jQuery UI Theme from Kiandra IT 超クールなjQueryUIテーマ「Delta」。 次のようなUIパーツでのWEBページを実現することが可能です。 TwitterBootstrapもカッコいいわけですが、こういうUIもいいですね。 かなりアップル意識している感じですが。 背景がブラックなバージョンもクール こういうものがもっともっと増えていってリッチなWEBサイトがどんどん増えていくといいですね 関連エントリ フリーのハイクオリティでレスポンシブなWordPressテーマ３０ Windows8風のTwitterBootstrapをベースとしたテーマ「BootMetro」 使えそうなレスポンシブ対応のWordPressテーマ３０
Beautiful Slide Out Navigation: A CSS and jQuery Tutorial | Codrops
Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide […] Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect
jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ
■ Draggablesのイベントハンドラが取得できる情報 jQuery UIが提供するドラッグ＆ドロップ関連のイベントハンドラは、第2引数からそのイベントに特化した情報が取得可能です。Draggablesのイベントハンドラには、次のような情報が渡されます（第2引数の変数名を「ui」とした場合）。 ui.instance：draggableのインスタンス ui.options：draggableの初期化時に指定したオプション ui.position：ヘルパの現在位置 ui.absolutePosition：ヘルパの現在の絶対指定による位置 例えば、下記のようにすることで、ドラッグ終了時の座標を取得できます。 <div id='target'>ドラッグ可能</div> <script type="text/javascript"> $('#target').draggable({ stop:
Google Wave風のクールなヒストリースライダー作成サンプル＆チュートリアル:phpspot開発日誌
Google Wave風のクールなヒストリースライダー作成サンプル＆チュートリアルです。 jQueryを使ってGoogle WaveのクールなUIを実現しています。 スライドさせる位置によって表示させるコンテンツ量をスムーズに切り替えることが出来ます。 アニメーションが滑らかな点もGood。 左にスライドでコンテンツ量を抑制。最近のエントリだけを表示、のようなことが可能です。 一昔前では考えられなかったUIですが、こうしたＵＩを使って掲示板なんかを作ったらカッコいいものが出来そうですね。 以下のエントリを参照してください。 Making a Google Wave History Slider ? Tutorialzine
魅力的なUIにするためのjQueryプラグイン20 – creamu
Six Revisionsで、魅力的なUIにするためのjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » SimpleModal シンプルなモーダルウィンドウ » Panel Gallery ユニークなトランジションを持つスライドショー » Easy Image Gallery サムネイル表示型のイメージギャラリー » PikaChoose Belvedere Incに見られるクールなギャラリー » SlideBox たくさんのリンクを表示できるスライドボックス » Single Drop Down Menu シンプルなドロップダウンメニュー » Mouse Over Animation for Text テキストにマウスオーバーすると、明度を変えてくれたりうにょ〜っと拡大してくれるエフェクト あまり見たことのないものやシンプルで使いやすそうなギャラリーなどが揃っていま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
転送中
Resizable - jQuery UI API 1.8.4 日本語リファレンス - StackTrace