CSS3をはじめとする、スタイルシートのさまざまなテクニックを使って実装するナビゲーションを紹介します。 ※一部、jQueryを併用するものもあります。
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」。 階層ナビゲーション実装ライブラリ集 サイトを美しく魅せるゴージャスナビゲーション集 パート2 Windows7風ナビゲーション作成チュートリアル
26 Useful jQuery Navigation Menu Tutorials - Web Design Blog ? DesignM.ag ナビゲーションメニューに関する有用なjQueryチュートリアル集のご紹介。 26にもわたるチュートリアルになっていて、プラグインではありませんが、参考にすることで実装は容易でしょう。 クールな見た目が多いのもいいですね。 沢山の種類があるのでイメージにマッチしたものも見つかりそうです。 関連エントリ 長い文書ページでもナビゲーションを付けて分かりやすくできる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から紹介します。
Tutorials 11 Useful jQuery Tab Navigation Solutions Henry JonesSeptember 29, 201024 Comments07.9k Sometimes using tabs just makes a lot of sense. For instance, if you have a limited amount of screen real estate, tabs can allow you to save room by giving the user a way to toggle between several items in a small space. And to take your tabs a step further, you can throw jQuery into the mix for some
長い文書ページでもナビゲーションを付けて分かりやすくできる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
次々にボックスがスライドする三つのアニメーションを組み合わたナビゲーションを実装するチュートリアルを紹介します。 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チュートリアル55。 多数あるので、メニューやボタン実装に迷った際のショーケース的に使うことができそうです。 ナビゲーションといっても様々なアプローチがあって見ているだけでも面白いです。 関連エントリ ドロップダウンメニューのデザインネタ帳 1枚の画像でハイライトする画像メニュー作成が可能な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
1枚の画像でハイライトする画像メニュー作成が可能なjQueryプラグイン「imagineMenu」 2010年07月05日- imagineMenu() jQuery plugin Tutorials Devoth.Design Edinburgh 1枚の画像でハイライトする画像メニュー作成が可能なjQueryプラグイン「imagineMenu」。 サイトのナビゲーションメニュー等を画像で構築していて、カーソルがあたった際にハイライトさせたいという場合がたまにあります。 onmousemoveなどで画像を切り替える方法もありますが、imagineMenuを使えば、次のような1枚の画像からメニューを構築出来ます。 カーソルを合わせるとハイライトされるメニューが出来ました。 CSSで色々と修飾できるようになったとはいえ、画像でメニューを構築したほうが自由度は増すので選択する場合もあると思います
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く