jQueryでロールオーバー！プリロード対応版 (1/3)
ロールオーバー効果付きメニューバーの完成画面。メニューボタンにマウスカーソルが重なると別の画像を表示する。画像がクリックできることをユーザーに視覚的に伝えられるメリットがある（画像クリックでサンプルページを表示します） ロールオーバーの基本的な仕組みを作ろう 最初に、もっとも単純な方法でロールオーバー効果を作成してみましょう。画像（img要素）の上にマウスカーソルが重なると、スクリプトで指定した別の画像に差し替えるロールオーバーです。 メニューバーのHTML／XHTML（以下、HTML）は以下のように記述しています。メニュー部分はul/li要素で作成し、li要素の内側にa要素を、その内側にimg要素を記述しています。li要素の後とその次のli要素の間を<!-- と -->でコメントアウトしているのは、CSSでli要素を横並びにしたときに発生する余分な空白（すき間）を防ぐためです。コメントを
デザイナーにオススメ！JavaScript滑らかメニュー
サイトの構造を分かりやすく整理したグローバルナビゲーションを設置したい。カテゴリが細分化されているWebサイトで、遠回りせずに直接、目的のページに移動できるようにしたい――。そんなときに使えるJavaScriptライブラリが、Dynamic Driveで公開中の「Smooth Navigation Menu」だ。 Smooth Navigation Menuは、多階層のドロップダウンメニューを簡単に設置できるライブラリ。（X）HTML中のリストタグを読み込み、下の画面のようにドロップダウンメニューとして表示してくれる。しかも、メニューの展開時にはちょっとしたアニメーション付き。ライブラリ名にもなっているとおり、スムーズな動きがなかなか気持ちいい。 このSmooth Navigation Menuは、JavaScriptに詳しくないWebデザイナーでも扱いやすいように、スクリプト部分を一切い
Simply-Buttons v2 : p51 Labs
TESTED IE6 IE7 FF(PC/MAC) Safari SafariMobile Opera(PC/MAC) Background I had some time a while back and read a few interesting articles on buttons: How to make sexy buttons with CSS Rediscovering the Button Element These got me thinking… these techniques are pretty nice, but I think they can meet somewhere in the middle and make something even better. After a little work I came up with the “Simply
UIZE JavaScript Framework | AJAX, RIA, widgets, JSON, OOP, Class Inheritance, XMLHttpRequest, DOM manipulation, and all that stuff
EVER:CLOCK is a fun, themeable, online digital clock that can be loaded straight into your modern Web browser. Several different clock types are available, and there are thousands upon thousands of interesting clock themes to choose from. Each clock type offers its own unique qualities and theming options. The EVER:CLOCK Web app and its supporting Web site is built entirely using the UIZE JavaScri
手軽に導入しやすい特徴的な14のドロップダウンメニューサンプル
なかなか素敵なまとめ記事がありました。 大規模なサイトに最適なリンク案内として、ドロップダウンメニューの導入が使われる事がありますが、今回のエントリーは、こうしたメニューの導入を簡単にしてくれるものとなるでしょう。 CSS、jQuery、MooTools、JavaScript WEBサイトのメニューはシンプルであるべきと考えます。大規模なWEBサイトでは、ドロップダウンメニューを設置することで、ユーザーが容易に移動できるようになる。時にそれらの設置が難しい時は以下を開いてみると良い。 14 Easy to Implement Drop Down Menu Solutions | Web Design Ledger 14ある中で今回触った感触としてお勧めが5つ。 現れ方がカッコいいドロップダウンメニュー ClarkLab ? Animated Drop Down Menu with jQue
第5回 jQuery UIによるユーザインターフェースの改良 | gihyo.jp
今回使用する「Dialog」「Draggables」「Droppables」「Sortables」に必要なファイルは以下の通りです。 themes/ jquery-1.2.3.min.js jquery.dimensions.js ui.mouse.js ui.resizable.js ui.dialog.js ui.draggable.js ui.draggable.ext.js ui.droppable.js ui.droppable.ext.js ui.sortable.ext.js ui.sortable.js jQuery UI 1.5bを使うために、今回は同梱されているjQuery 1.2.3を使うことにします。バージョンが上がりますが、これまでのサンプルの動作に影響はありません。 ライブラリの設定 ライブラリの各ファイルを、head要素の子要素に以下のように指定します（
Yahoo！の流れるパネルをJSライブラリで再現 (1/5)
日本最大のポータルサイト「Yahoo！ JAPAN」のトップページがリニューアルしたのは、2008年1月のこと。従来の2カラムから3カラムのレイアウトに変わり、世界各国のYahoo！に合わせる形でデザインも一新されました。同時に行なわれたのが、ユーザーインターフェイス（UI）のリッチ化です。新しいYahoo！ JAPANのページには、タブ／アコーディオンパネル／フローティングウィンドウなど、ここ数年のトレンドであるAjaxを使ったUIが随所に盛り込まれています。 こうした流れは、トップページだけではありません。リニューアルと前後して、Yahoo！ JAPANではさまざまなサービスのUIの改善が実施されています。今回はその中のひとつ、「Yahoo!知恵袋」に注目してみましょう。今年2月にリニューアルされたばかりのこのQ＆Aサービスの新しいトップページが、今回のお手本です。 今回のお手本サイト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
かっこいいデザインのナビゲーションメニュー40 – creamu