タブ形式のドロップダウンの子要素にサムネイル画像を表示するナビゲーションのスタイルシートをCSSplayから紹介します。
[CSS]サムネイル画像を表示するドロップダウン型ナビゲーション
タブ形式のドロップダウンの子要素にサムネイル画像を表示するナビゲーションのスタイルシートをCSSplayから紹介します。
ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集:phpspot開発日誌
25 jQuery Tutorials for Improved Navigation Menus ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集が紹介されています。 How to Make a Smooth Animated Menu with jQuery アニメーションする、おしゃれなメニュー Create an Apple Style Menu and Improve it via jQuery Apple風のクールなメニュー。アニメーションしつつ、アイコンも表示してくれなかなかクール Create a Slick Tabbed Content Area Using CSS and jQuery 少ないスペースにタブを設置してメニューにしている例。アニメーションもあり。 Using jQuery for Background Image Animat
すぐ使える！なめらかアコーディオンで“魅せる”UIに (1/5)
たくさんの画像を美しく、かつ効果的に見せたい。その1つのアイデアとして、サムネイル画像をマウスオーバーとハイライト表示で演出する方法を前回紹介しました。今回はまた違ったアイデアを仕入れるべく、オランダのWebデザイナー、Marius Roosendaalさんのポートフォリオサイトに注目してみましょう。 昨年、「Best Web Gallery」のベスト50にも選ばれたこのサイトは一見、シンプルでスマートなデザインですが、閲覧する時間帯によってスタイルシートを切り替えてデザインを変えたり、なかなか凝ったつくりになっています。中でも注目は、サイトのメインコンテンツである過去の作品紹介。JavaScriptを使って楽しく作品画像を見せる――そんなMarius Roosendaalさんの“技”が今回のお手本です。 今回のお手本サイト： 『Marius Roosendaal -Design port
[CSS]パネルがスライドするデザインのドロップダウン型のナビゲーション
CSSplayから、ナビゲーションのサブカテゴリのパネルがスライドするデザインのドロップダウン型のナビゲーションを紹介します。 Dropdown with horizontal sliding sub menu titles 慣れないせいか違和感をちょっと感じましたが、アイデアとしては面白いと思いました。 子が開くときは、親がグレーアウトするといいのかな、うーん、ちょっとおかしいか。 対応ブラウザは、IE6, 7, Fx, Safari(PC), Op,Chromeとなっています。 ナビゲーションの各項目はリスト要素でテキストデータになっており、IE6対策にドロップダウンの箇所にtableを使用しています。
[JS]ナビゲーションの背景画像をアニメーションさせるスクリプト
Snook.caのエントリーから、「ナビゲーション画像にアニメーションのエフェクトをつける -CSS Sprite2」のように、ナビゲーションの背景画像にさまざまなアニメーション効果つけるスクリプトを紹介します。 Using jQuery for Background Image Animations デモ デモでは、上下のアニメーション、左右のアニメーション、フェードのアニメーションがあります。 スクリプトにはjQueryがメインに使用されており、それぞれのアニメーションは下記のように記述されています。 「#a」は上下、「#b」は左右、「#c, #d」はフェード。 <textarea name="code" class="js" cols="60" rows="5"> $(function(){ $('#a a') .css( {backgroundPosition: "-20px 35
[CSS]大胆なドロップダウン型のナビゲーションを実装するスタイルシート
CSSplayのエントリーから、透過PNG画像を使用した大胆なドロップダウン型のナビゲーションを実装するスタイルシートの紹介です。 Professional drop-down #13 with png transparency デザイン的に面白いだけでなく、通常のドロップダウンに比べ領域が広いため、マウス操作を誤ってドロップダウンが非表示になってしまうということも少ないと思います。 対応ブラウザは、IE6, IE7, Firefox, Opera, Safari(PC) and Google Chrome Betaとなっています。 IE6対策には、ドロップダウンの箇所にtable、背景画像にfilter(AlphaImageLoader)が使用されています。
[JS]スムーズにスライドするドロップダウン型のナビゲーション -MenuMatic | コリス
ドロップダウンの箇所がスムーズにスライドする水平・垂直型のナビゲーションを実装するスクリプト「MenuMatic」を紹介します。 MenuMatic デモ：水平タイプ デモ：垂直タイプ ナビゲーション箇所はリストの入れ子で実装されおり、ラベル名はテキスト要素のため日本語に変更することも可能です。 オプションでは、水平・垂直型の選択、横幅、不透明度などを変更することができます。 MenuMaticはMooToolsのプラグインのため、動作にはMooTools 1.2 Coreが必要です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]ボタンやナビゲーションを実装するスタイルシートのチュートリアル集
[CSS]補足情報などの表示に便利なアコーディオン型ナビゲーション
http://101lab.net/javascript/2007/07/post-1.html
jQuery UI アコーディオン - ［JavaScript］All About
[JS]アニメーションで開閉するドロップダウン型ナビゲーションの軽量スクリプト
[JS]スムーズに開閉する多段型のドロップダウンのナビゲーション | コリス
[CSS]カスタマイズも可能なドロップダウン型のナビゲーションのテンプレート -CSS Candy Menu | コリス
角丸や矩形だけではない、タブ型ナビゲーションのデザイン集 | コリス