利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。
jQueryを使って実装する、かっこいいナビゲーションのまとめ | コリス
利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。
ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集:phpspot開発日誌
25 jQuery Plugins for Navigation ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集。 階層メニュー、タブ、ツリーやページャにいたるまで、ナビゲーション部分に使えるjQueryプラグイン集25種がまとまっていました。 jQuery (mb)Menu クールなアイコン付階層メニュー BDC Drilldown Menu (iPod Style) iPod風ドリルダウンメニュー jBreadCrumb 動くパンくずリスト Treeview そのまんまツリービュー jQuery Full Width Navigation Widthを指定のサイズにあわせる jQuery Nested Tabs タブ内タブというネストが可能なプラグイン FastFind Menu クールなメニュー実装 jQuery Pagination Pagerを実装 全部見る 最近
ドロップダウンするcssメニューいろいろ
cssやプログラミングdrop down menu サイトによっては必要ないかも 知れませんが、メニュー項目が 増えてくるとゴチャ付くので、 ドロップダウンするようにして 隠しておくと見やすくなりますね。 サイトによっては必要ないかも 知れませんが、メニュー項目が 増えてくるとゴチャ付くので、 ドロップダウンするようにして 隠しておくと見やすくなりますね。 チュートリアルやジェネレーター、フレームワークなど。多すぎるので絞っています。 CSS Navigation Techniques 様々なタイプのメニューのサンプルの中にドロップダウンがいくつか。 CSS Navigation Techniques CSS Drive / Multiple Levels サンプルいっぱい。 CSS Drive / Multiple Levels Free CSS Drop-Down Menu Frame
[CSS]ごくシンプルな水平型のナビゲーションを実装するチュートリアル
A Super Simple Horizontal Navigation Bar demo デモの水平型のナビゲーションはリスト要素で実装されており、アンカー箇所は大きく、ホバー時に背景色が変わるようになっています。 下記、そのポイントをピックアップして紹介します。 HTML シンプルなリスト要素で実装します。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="nav"> <li><a href="#">About Us</a></li> <li><a href="#">Our Products</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Login</a></li> </ul> </
[JS]滑らかにスライドするナビゲーションを実装するチュートリアル
滑らかにスライドするアニメーションが軽快なナビゲーションを実装するチュートリアルをSoh Tanakaから紹介します。 Animated Navigation with CSS & jQuery demo デモでは背景の有無の2パターンで、どちらも滑らかにスライドするアニメーションが面白い効果を生み出しています。 ナビゲーションはリスト要素で実装されており、「overflow:hidden;」でマスクし、マウスのホバーでスライド表示させています。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="topnav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li
[JS]多彩なカスタマイズが可能なアコーディオンのスクリプト -BySlideMenu
BySlideMenu パネルが水平方向に伸び縮みする通常のタイプから、トリガーをマウスオーバーからクリックに変更したものや、伸び縮みのアニメーションのエフェクト変更など多彩なカスタマイズが可能です。 デモでは水平タイプのほかに、垂直タイプやテキストタイプなど12種類あります。
オンラインで高性能なナビゲーションが作成できる -My CSS Menu
My CSS Menuは、多段階層に対応したドロップダウン型やアコーディオン型や面白いエフェクトがある高性能なナビゲーションを作成できるオンラインサービスです。 My CSS Menu ナビゲーションはブラウザでの表示を確認しながらラベルや項目数、デザインなどのカスタマイズが可能で、HTMLやCSSの知識が無くても簡単にできると思います。 下のパネルには変更履歴が表示され、undo機能も備えています。 カスタマイズ画面のキャプチャ ラベルを日本語にするのも簡単で、クリックで変更箇所を指定しテキストボックスに日本語を入力するだけで適用されます。 ダウンロードはファイルの保存を選択すると、HTML, JavaScript, CSSが表示されるのでコピーして使用することができます。 ナビゲーションのデザインは現在２２種類あり、下記にいくつか紹介します。
[CSS]大胆なドロップダウン型のナビゲーションを実装するスタイルシート
CSSplayのエントリーから、透過PNG画像を使用した大胆なドロップダウン型のナビゲーションを実装するスタイルシートの紹介です。 Professional drop-down #13 with png transparency デザイン的に面白いだけでなく、通常のドロップダウンに比べ領域が広いため、マウス操作を誤ってドロップダウンが非表示になってしまうということも少ないと思います。 対応ブラウザは、IE6, IE7, Firefox, Opera, Safari(PC) and Google Chrome Betaとなっています。 IE6対策には、ドロップダウンの箇所にtable、背景画像にfilter(AlphaImageLoader)が使用されています。
階層ナビゲーション実装ライブラリ集: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 全部見る デザイン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マウスオーバーをデザインする | DesignWalker
http://www.designwalker.com/2009/02/jquery-dropdown.html