CSS3をはじめとする、スタイルシートのさまざまなテクニックを使って実装するナビゲーションを紹介します。 ※一部、jQueryを併用するものもあります。

利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。

jQuery Dropdown menu with google style | jqueryload.com Googleスタイルのシンプルなドロップダウンメニュー実装jQueryプラグイン。 比較的最近出始めたGoogleのヘッダー部分にあるドロップダウンメニューですが、これと似たメニューを実現するためのjQueryプラグインが公開されています。 黒バージョンにもできるようです。 ブラウザによっては少しレイアウトが崩れるので若干手直しが必要かも。 関連エントリ クールにアニメーションする水平ドロップダウンメニュー実装jQueryライブラリ jQueryで幅の大きなドロップダウンメニュー作成チュートリアル ビローンと伸びるドロップダウンメニュー実装jQueryサンプル

ナビゲーションはウェブサイトにとって重要なエレメントであり、基盤となるものです。素晴らしいナビゲーションは豊かなユーザエクスペリエンスを与えます。 ユーザーは使いにくくない困惑されないナビゲーションを望み、シンプルなナビゲーションはたいていの場合、ダイナミックなものよりユーザフレンドリーなものです。ここではダイナミックでクリエイティブなナビゲーションの素晴らしいインタラクションと若干の欠点をSmashing Magazineから紹介します。

CSS3 Minimalistic Navigation Menu | Tutorialzine ミニマムで場所を取らないCSSメニューの実装例。 次のように、アイコンだけ並んでいて、マウスオーバーするとメニューの文字がアニメーションしながら表示されるというナビゲーションの実装方法が解説されています。 邪魔にならないのでサイトをシンプルにしたい場合に役立ちそうです。 デモはこちら アニメーションにはcss3のtransitionを使ってる模様。 関連エントリ 長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 階層ナビゲーション実装ライブラリ集 サイトを美しく魅せるゴージャスナビゲーション集 パート２ Windows7風ナビゲーション作成チュートリアル

26 Useful jQuery Navigation Menu Tutorials - Web Design Blog ? DesignM.ag ナビゲーションメニューに関する有用なjQueryチュートリアル集のご紹介。 ２６にもわたるチュートリアルになっていて、プラグインではありませんが、参考にすることで実装は容易でしょう。 クールな見た目が多いのもいいですね。 沢山の種類があるのでイメージにマッチしたものも見つかりそうです。 関連エントリ 長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 階層ナビゲーション実装ライブラリ集 背景画像をクールにかえつつナビゲーションを行うjQueryでのメニュー実装例

パンくずは何要素で実装していますか？　ul要素？　ol要素？　p要素？ パンくずをどのように実装するのがよいかの考察を紹介します。 Exploring Markup for Breadcrumbs [ad#ad-2] 先日紹介したCSS-Tricksの「画像を使用しないでApple風のパンくずを作成するチュートリアル」に寄せられたコメントから考察されたもので、各ポイントを意訳したものです。 パンくずのマークアップの考察のきっかけ -ul要素で同列配置 パンくずのマークアップの考察 -ul要素で親子 パンくずのマークアップの考察 -ol要素で順序づけ パンくずのマークアップの考察 -セパレーターの使用 パンくずのマークアップの考察 -Googleを参考に パンくずのマークアップの考察 -HTML5の使用 パンくずのマークアップの考察 -おわりに パンくずのマークアップの考察のきっかけ -ul

階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></

1ピクセルのライン、細かいエレメント、美しいグラデ、繊細なテクスチャなどを使用してディテールにこだわりつつ、主張しすぎない素晴らしいナビゲーションをDribbbleから紹介します。

長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 2010年09月30日- jQuery One Page Navigation Plugin | Trevor Davis 長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 このプラグインを使うと、次のように左カラムにページ番号のように表示して、今どこら辺か？というのを分かりやすく表示し、かつ1ページなのに複数ページに分割することが可能。 使いどころは様々ですが、使い方次第で簡単にページの使い勝手を高めることができそうです。 ナビゲーションをクリックすると、指定したページの位置にアニメーションしながらスクロールされます。 更に、単純にスクロールしているだけで、左カ

Breadcrumb NavXT, the successor to the popular WordPress plugin Breadcrumb Navigation XT, was written from the ground up to be better than its ancestor. Table of Contents Purpose Features Screenshots Download Installation Basic Usage Advanced Usage Add On Extensions Donate Version History and Changelog License Purpose Breadcrumb NavXT is a WordPress plugin compatible with WordPress versions 4.9 an

クロスブラウザ対応、CSS3をベースにして作成したナビゲーションのテンプレート集を紹介します。 HTML/CSSの初心者の人でも簡単に利用できると思います。

グリッドあるいはマトリックスに配置したサムネイルを使用して、ダイナミックにウェブサイトをナビゲートするスクリプトを紹介します。 デモ：個別パネル 別パネルへ遷移する際には、右下「SITEMAP」をクリックするとサムネイル一覧になります。 順番にクリックすると気がつかないのですが、飛び飛びでサムネイルをクリックすると、アニメーションの道順（？）がその通りになります。 対応ブラウザはFirefox3, IE6/7/8, Safari4とのことで、実装にはjQueryが必要です。

次々にボックスがスライドする三つのアニメーションを組み合わたナビゲーションを実装するチュートリアルを紹介します。 Slide Down Box Menu with jQuery and CSS3 デモページ デモではナビゲーションの各項目をマウスホバーすると、アニメーションでラベルが下にストンと落ち、サムネイル画像が拡大表示されます。更に、下位階層のある項目は左右にスライド表示されます。 実装は割とシンプルです。 ナビゲーションはリスト要素で配置されています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <ul id="sdt_menu" class="sdt_menu"> <li> <a href="#"> <img src="images/1.jpg" alt=""/> <span class="sdt_act

jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Down Menu Fly-out Menu with jQuery and CSS3 カッコいいですねー。反対側からスライドするフライアウトメニュー。css3を使っています。 Fly-out Menu with jQuery and CSS3 Rocking and Rol

アイコンを使用してビジュアル的な効果を加えたナビゲーションを使用しているサイトをSpyreStudiosからいくつか紹介します。

Complete Toolbox: 55 CSS Menu And Button Coding Tutorials クールなメニューやボタンを実装するCSSチュートリアル５５。 多数あるので、メニューやボタン実装に迷った際のショーケース的に使うことができそうです。 ナビゲーションといっても様々なアプローチがあって見ているだけでも面白いです。 関連エントリ ドロップダウンメニューのデザインネタ帳 １枚の画像でハイライトする画像メニュー作成が可能なjQueryプラグイン「imagineMenu」 セクシーなドロップダウンメニュー実装サンプル ビローンと伸びるドロップダウンメニュー実装jQueryサンプル

画像を一切使用せずに実装する、軽快なアニメーションを伴ったナビゲーションのチュートリアルを紹介します。 Awesome Cufonized Fly-out Menu with jQuery and CSS3 デモページ デモでは右に配置されたナビゲーションの各ラベルにマウスホバーするとアニメーションでハイライトが移動し、それに伴う説明文が右からスライド表示されます。 HTML HTMLは非常にシンプルです。 <textarea name="code" class="html" cols="60" rows="5"> <div id="slidingMenuDesc" class="slidingMenuDesc"> <div><span>Maybe that's what life is... a wink of the eye and winking stars.</span></div

１枚の画像でハイライトする画像メニュー作成が可能なjQueryプラグイン「imagineMenu」 2010年07月05日- imagineMenu() jQuery plugin Tutorials Devoth.Design Edinburgh １枚の画像でハイライトする画像メニュー作成が可能なjQueryプラグイン「imagineMenu」。 サイトのナビゲーションメニュー等を画像で構築していて、カーソルがあたった際にハイライトさせたいという場合がたまにあります。 onmousemoveなどで画像を切り替える方法もありますが、imagineMenuを使えば、次のような１枚の画像からメニューを構築出来ます。 カーソルを合わせるとハイライトされるメニューが出来ました。 CSSで色々と修飾できるようになったとはいえ、画像でメニューを構築したほうが自由度は増すので選択する場合もあると思います