[CSS]パネルの幅をテキストの成り行きに合わせたドロップダウン型のナビゲーションJavaScriptは使用しないで、パネルの幅をテキストの成り行きに合わせたドロップダウン型のナビゲーションを実装するスタイルシートをCSSplayから紹介します。 Any width dropdown/flyout menu demo 対応ブラウザはIE5.5, IE6, IE7, Firefox, Opera, Safari(PC) and Google Chromeとのことで、IE用には条件付コメントが使用されています。
アニメーションするドロップダウンメニュー作成ＪＳ「Sliding JavaScript Dropdown Menu」:phpspot開発日誌
アニメーションするドロップダウンメニュー作成ＪＳ「Sliding JavaScript Dropdown Menu」 2008年04月30日- Sliding JavaScript Dropdown Menu - Web Development Blog This lightweight drop down menu script (~1.8kb) allows you to easily add smooth transitioning dropdowns to your website. This can be used for navigation, dropdown lists, info panels, etc.アニメーションするドロップダウンメニュー作成ＪＳ「Sliding JavaScript Dropdown Menu」 デモページはこちら メニューの中身は単なるul li
階層ナビゲーション実装ライブラリ集:phpspot開発日誌
Multilevel Drop Down Navigation Menus: Examples and Tutorials Navigation menus are the most important element one should pay attention when designing a website. 階層ナビゲーション実装ライブラリ集をまとめたエントリが公開されていたので気になったものをいくつか紹介。 JavaScriptなどを活用して、マウスホバー/クリック時に開閉するおなじみのＵＩがいっぱいです。 Drop Down Tabs (5 styles) Professional Dropdown FastFind Menu- Mootools Unlimited Drop Menu Creating an Outlook Navigation Bar 全部見る デザイン
CSSでdigg風のナビゲーションを実装サンプル:phpspot開発日誌
woork: Digg-like navigation bar using CSS This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links. CSSでdigg風のナビゲーションを実装サンプル 次のようなクールなdigg風のメニュー部分のサンプルをダウンロードできます。 同ブログの「woork: Simple CSS vertical menu Digg-like」では、次のようなコンボボックスのサンプルも公開されています。 （ＩＥではうまく動作しないみたい） シンプルですが考え込まれたクールなＵＩになってますね。 HTMLマークアップも綺麗に実装できてます。 関連エントリ 使えるCSSメニューいろいろ CSSでお店
使えるCSSメニューいろいろ:phpspot開発日誌
使えるCSSメニューいろいろ 1. Advanced CSS Navigation Menu Example まず、ホバー時以外は文字をぼやかせるCSSメニュー。 次のようにマウスホバー時は文字がクッキリするメニューのサンプルです。 JavaScript レスで実装できるので JavaScript なしがいいという方にはオススメ。 ただし、動かないブラウザもあるようなので注意が必要ですね。 2. Suckerfish Dropdowns - Perciformes! 次にCSSとJSで階層メニュー。やはりこのＵＩは直感的に操作できますね。 類似：CSSのみでクールな階層メニュー作成サンプル、CSSベースの階層メニュー作成ライブラリ 他にも色々と掲載されています メニュー関連エントリ PHP＆CSSで動的にドロップダウンメニュー作成 ドラッグ＆ドロップで描画して好きなHTMLレイアウトを作成
CSSだけでメニューにツールチップヒントを付けるテクニック:phpspot開発日誌
CSS: Menu Descriptions | Mike’s Experiments | MikeCherim.com This is a CSS technique that could be useful if you want to give users accessible added content such as tool-tips, notifications, or alerts, without adding unnecessary clutter to your page. CSSだけでメニューにツールチップヒントを付けるテクニック。 次のようにメニューにカーソルを合わせるとヒントが表示できます。JavaScript不使用なので、JavaScriptが苦手な方も実装可能です。 JavaScriptは使わずにやりたい場合は覚えておきたいテクニックですね。 関連エントリ
CSSとJavaScriptで作るサイトメニュー - rytich's diary
探したついでにまとめのまとめ。 知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE でかなり使えそうなhttp://www.hereticanthem.com/webdesign/275/を含め、一通りは紹介されてる。 以下それ以外の。 横型メニュー Flashのような動き javascriptで伸縮するメニューができる - webデザイナーのナナメガキ これもFlashっぽい http://devthought.com/cssjavascript-true-power-fancy-menu/ サンプル8種類 Powerpoint Alternatives For Windows 10, Mac & Linux サブメニュー付 http://www.aplus.co.yu/adxmenu/examples/ シンプル Dynamic Drive
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Breadcrumb CSS - Appleに習うパンくずデザインCSS - youmos