CSS3でグレースフルブレッドクラムナビゲーションメニューをコーディングする
ナビゲーションメニューとリンクは、おそらくWebレイアウトにとって最も重要なインターフェース要素です。これらはユーザーがするための唯一のアウトレットです。 ページ間を移動する 作成したすべてのコンテンツとやり取りします。ブレッドクラムも同様の機能を提供します。 あなたの現在の位置を追跡する. できるよ 以前のリンクパスをすべて表示する ユーザーがあなたのサイト階層を横断するにつれて.
このチュートリアルでは、いくつかのCSS3効果を備えた素晴らしいブレッドクラムナビゲーションメニューを作成します。これはすべての主要なCSS3準拠のブラウザで動作することがテストされています。CSS3をサポートしていない古いブラウザでもほとんどの場合は正しく表示されます。.
私たちがコードに飛び込む前に、私たちのブレッドクラムの機能性について少し話をしましょう。!
トレイルを提供する
パンくずリストは他のどのメニューよりも複雑ではありません。私たちのスタイルはほとんどの例よりはるかに複雑なCSSプロパティを利用するでしょう、それでも私たちの必要最低限のテンプレートはあるページから別のページへユーザーを導くためにまだ整っています.
この例では、Googleのサポートメニューと同じスタイルを再作成します。 Gmailサポートページで彼らのメニューを見て、私たちがどこに向かっているのかを知ることができます。最終的に私たちはしたい すべてのユーザーに最高のユーザーエクスペリエンスを提供する, オペレーティングシステムやブラウザソフトウェアに関係なく、私は構築した 古いブラウザ間での適切な品質低下をサポートする2つの異なるコード例.
最初のものはを使用して構築されています カスタム背景画像 そして 適切なCSSの配置. すべてのホバーイベントとアクティブイベントは、ほんのいくつかのCSSスタイルであらかじめ構築されていますが、画像をオフにしているユーザーはこれらの効果を体験できません。これが私がCSSグラデーション、丸みのある角、そしてボックスの影で似たような見た目のメニューも作った理由です。.
両方のスタイルをサポートすることに不安がある場合は、自分のサイト用にどちらかを選択できます。ほとんどの訪問者はデフォルトで画像を使用しますが、より正確な訪問者データが必要な場合はWebサイト分析ツールを調べてください。.
十分な言葉, プロジェクトに飛び込もう! 基本的なHTMLフレームワークを構築することから始めて、さまざまなスタイル効果に移行します。まず第一に 画像をダウンロードする必要があります プロジェクトに必要.
素骨HTML
私は自分のドキュメントを 標準HTML5ページテンプレート. これには、デフォルトのDoctype、リンクされたCSS、そしてすべての基本要素が含まれます。あなたがこのようにあなた自身の文書を始めたいならば、私は下記のコードを加えました。ブレッドクラムの表示方法には影響しませんので、ご希望の場合は、独自のページテンプレートを使用してください。.
デフォルトページ
コードを2つの異なるブロックに分割します。画像付きの最初のブロックは、少し異なる方法で作成され、その後に画像なしのメニューが続きます。各セットには独自のものがあります ID そのため、コンテンツを簡単に識別できます。あなたがjQueryのファンでもあるのなら、 #IDセレクタ すべての内部DOM要素を操作する.
まず私たちは divを含む ID付き “パン粉“. デモファイルでは、これを使用してコードを分離し、余白を追加してページ全体に移動しました。この外側のdivを削除することもできますが、新しいテンプレートに合わせてすべてのスタイルを変更する必要があります。あなたははるかに簡単に配置を制御することができるでしょうので、それは本当にコンテナを残すことは害はありません.
内部的には、番号なしリストを使用してブレッドクラムを作成しました。スタイル付きHTMLリストをカスタマイズするための非常に多くの独自の方法があり、ブレッドクラムはそのうちの1つです。最初のリスト項目を クラス の “最初“. これは、メニュー項目をインラインに保つための追加のパディングに必要です。さらに小さい スパンブロック 背景画像と重ならない適切な左ボーダーがあるように追加されます.
さらに、各アンカーリンクには、 Zインデックス 財産。必要な画像を使って それぞれのリンクが重なっている ブレッドクラム矢印を正しく表示するため。これを達成するための最も簡単な方法は Zインデックスを調整する したがって、各リンクは次のリンクに重なっています。私は始めました 9 そしてそこから下に働きました、しかし、あなたがあなたのメニューの中にもっとリンクがあるならば、単により高い整数で始めてください。.
画像のないメニュー
に 優雅に私たちのブレッドクラムを低下させる HTMLリストアイテムの二次セットが必要です。単一のナビゲーションにフォールバックしようとしている場合は、jQueryを使用してブラウザエージェントを検出し、それに応じてIDを適用することができます。残念ながら、これは常に信頼できるわけではありません（たとえば、特定のモバイルユーザーにとって）。別の解決策は IE固有のスタイルシートを含める そして どのメニューが最適かを表示または非表示にします。 - もちろん、このオプションはInternet Explorer専用です。.
ブレッドクラム2 画像なしでメニューをターゲティングするために使用される新しいIDです。私が使ったこのパターンを維持する パン粉2 番号なしリストのクラスとして。私たちが使っている理由に注意してください クラス そのためです これらのメニューを複製する簡単さ, そのため、ページにいくつかの異なるブレッドクラムが必要な場合は、これらのクラスを使用しても問題にはなりません。.
私たちは .最初 クラスが追加で追加 .最終最後のリスト項目へのクラス。画像がなければ、ナビゲーションメニューの各項目の矢印を複製することはできません。 丸い角 二次メニューを盛り上げる. .最初 クラスと .最終 メニューの一番端の境界線の半径を操作して、Web 2.0のように格好いいスタイルにする.
CSSスライド背景画像
より単純な効果のいくつかについては、プロパティを構築するときに両方のブレッドクラムを結合しました。スペースを節約するだけでなく、スタイルの編集に戻るときに便利です。 カスタマイズが簡単 あなた自身の外観.
両方のための #breadcrumb そして ＃breadcrumb2 設定しました リストスタイル：なし。 したがって、すべての内部アイテムにマーカーはありません。あなたが効果が好きならこれらを残すことができます、しかし私はHTMLが回避するのが面倒になることを発見しました、そしてそれは新しいアイコンを作成することがずっと簡単です。それでは始めましょう .パン粉 クラス.
.パン粉表示：ブロック; li display：inline;; .crumbs li display：inline;; first li.first padding-left：8px; .crumbs li a、.crumbs li a：link、.crumbs li a：visited 色：＃666;表示ブロック;フロート：左。フォントサイズ：12px。左余白：-13px。パディング：7px 17px 11px 25px。位置：相対;テキスト装飾：なし。 background-image：url（ '…/img/bg-crumbs.png'）;。 background-repeat：繰り返しなし。背景位置：１００％０。位置：相対; a l hover color：＃333;背景位置：100％-48ピクセル。カーソル：ポインタ。アクティブな色：＃333;アクティブになります。背景位置：100％-96ピクセル。最初のスパンをli.crumbs 高さ：29px;幅：3ピクセル。左ボーダー：1ピクセルソリッド＃d9d9d9。位置：絶対トップ：0px。左：0px。
我々 番号なしリストをに設定します。 ブロック そのため、この地域には他に何も忍び寄らない。リスト項目が インライン表示 各アンカーリンクには、さらに広がる余地があります。メニュー内のすべてのスペースをクリック可能にするには、これが必要です。 ブロック要素としてのアンカーの構築.
という画像を使用しました bg-crumbs.png 背景のために。これは、CSSでは単純なスプライトシートとして知られています。 引き戸 技術。これは、ユーザーがリンクをホバーするかクリックすると背景の位置を移動して更新されたスタイルを表示することを意味します。この単一の画像には、ブレッドクラムの背景をさまざまな位置に作成するために必要な3つのデザインがすべて含まれています。 背景位置 ユーザーの操作に基づいて移動するプロパティ.
CSS3によるカスタム効果
元のブレッドクラムデザインは作成がはるかに簡単です。 CSSのプロパティの多くは想像以上に基本的なものなので、これは注目に値しますが、今度はCSS3だけでこれらの効果を複製することに焦点を合わせ始めます。!
個々のスタイルは多くのスペースを占有するので、それらを2つのコードブロックに分割します。.
.crumbs2 表示：ブロック;左余白：27ピクセル。パディング：０。パディングトップ：10px。 .crumbs2 li display：inline;; .crumbs2 li a、.crumbs2 li a：link、.crumbs2 li a：visited 色：＃666;表示ブロック;フロート：左。フォントサイズ：12px。パディング：7px 16px 7px 19px。位置：相対;テキスト装飾：なし。ボーダー：1ピクセルソリッド＃d9d9d9。右横幅：0ピクセル。 crumbs2 li a background-image：-webkit-gradient（線形、左下、左上、カラーストップ（0.45、rgb（241、241、241））、カラーストップ（0.73、rgb（245、245、245）））;背景画像：−ｍｏｚ−線形勾配（中央下、ｒｇｂ（２４１、２４１、２４１）４５％、ｒｇｂ（２４５、２４５、２４５）７３％）。 / * Internet Explorer 5.5 - 7の場合* / filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＃f1f1f1、endColorstr =＃f5f5f5）; / * Internet Explorer 8の場合* / -ms-filter： "progid：DXImageTransform.Microsoft.gradient（startColorstr =＃f1f1f1、endColorstr =＃f5f5f5）";最初のborder-top-left-radius：5px;。 -moz-border-radius-topleft：5ピクセル。 -webkit-border-top-left-radius：5ピクセル。 .crumbs2 li.last a border-right-width：1px;。 border-bottom-right-radius：5ピクセル。 -moz-border-radius-bottomright：5ピクセル。 -webkit-border-bottom-right-radius：5px。
の .パン粉2 メニューが使用しています CSSグラデーション 背景効果を複製します。これらに慣れていないのであれば、CSS3グラデーションに関するCSSトリックのガイドを強くお勧めします。これにより、CSS3グラデーションを効率的に使用できるようになります。 MicrosoftおよびOperaブラウザ用のプロパティがいくつか追加されていますが、これらはすべてのケースで完全にはサポートされていません。私はここでデモコードにそれらを含めていません - しかし、すべてのオプションを理解するのは良いことです。.
-ウェブキットグラデーション そして -モズ線形勾配 ほとんどの作業を行うコアソリューションです。以前のバージョンのInternet Explorer用のレガシコードを含めましたが、 保証されていません 常に正しく表示するために（結局のところ、強力な画像レンダリング技術を使用しています）。 backgroundプロパティの間にRGBとhexの両方のカラーコードを設定したことに注意してください。あなたがより快適なら、あなたはどちらか一方の方法に固執することができます.
の ボーダー半径 コードは、2番目のブレッドクラムナビゲーションにのみ適用されます。これは、ブレッドクラムメニュー全体の左上と右下にきちんとした効果を与えます。バーはほとんどページから飛び出して見える - スタイルをサポートしているブラウザでは本当に素晴らしい効果だが、これらはリンクのデフォルトの状態をカバーするだけである。それでは、上で使用した画像に似たホバー効果を作成しましょう。.
CSS3の枠線と影
ユーザーがリンク上にホバーするたびに、いくつかのことを更新します。最初にする必要があります アクティブな要素の上下の境界線の色を暗くする. これは、ホバー状態とアクティブ状態の両方で画像にも見られます。.
.crumbs2 li a：hover border-top-color：＃c4c4c4; border-bottom-color：＃c4c4c4; background-image：-webkit-gradient（線形、左下、左上、カラーストップ（0.45、rgb（241、241、241））、カラーストップ（0.73、rgb（248、248、248））;背景画像：−ｍｏｚ線形勾配（中央下、ｒｇｂ（２４１、２４１、２４１）４５％、ｒｇｂ（２４８、２４８、２４８）７３％）。 / * Internet Explorer 5.5 - 7の場合* / filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＃f8f8f8、endColorstr =＃f1f1f1）; / * Internet Explorer 8の場合* / -ms-filter： "progid：DXImageTransform.Microsoft.gradient（startColorstr =＃f8f8f8、endColorstr =＃f1f1f1）";カラー：＃333。 -moz-box-shadow：0px 2px 2px＃e8e8e8; -webkit-box-shadow：0px 2px 2px＃e8e8e8;ボックスシャドウ：0px 2px 2px＃e8e8e8; .crumbs2 li a：アクティブborder-top-color：＃c4c4c4; border-bottom-color：＃c4c4c4; background-image：-webkit-gradient（線形、左下、左上、カラーストップ（0.45、rgb（224、224、224））、カラーストップ（0.73、rgb（235、235、235）））;背景画像：−ｍｏｚ線形勾配（中央底、ｒｇｂ（２２４、２２４、２２４）４５％、ｒｇｂ（２３５、２３５、２３５）７３％）。 / * Internet Explorer 5.5 - 7の場合* / filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＃ebebeb、endColorstr =＃e0e0e0）; / * Internet Explorer 8の場合* / -ms-filter： "progid：DXImageTransform.Microsoft.gradient（startColorstr =＃ebebeb、endColorstr =＃e0e0e0）"; box-shadow：-1px 1px 1px 0px #dadadaインセット。 -webkit-box-shadow：-1px 1px 1px 0px #dadadaインセット。 -moz-box-shadow：-1px 1px 1px 0px #dadadaインセット。カラー：＃333。
私は上で使用したのとまったく同じグラデーションコードを使用していますが、今回はRGB値に気付いた場合、色は大きく異なります。各州は、テキストの色を暗くします。 ＃333, それでも他の記述子はユーザコマンドに対応するためにわずかに変更されました.
ホバーすると 光沢のあるエンボス効果 これと結合 濃い枠 ページのポップアップスタイルを指定します。クリックしたままにしておくと、アクティブ状態になります。 暗い背景のグラデーション. この効果により、ボタンは実際に見えるようになります。 “押された” ページ内.
私達はまた適用しています ボックスシャドウ 新しいCSS3仕様のプロパティ. -ウェブキット, -モズ, また、デフォルトスタイルは同じ設定で使用されます。ホバリングは 光の影 選択したリンクの下から出てきます。アクティブにすると、影が上下左右の境界に形成されます。この効果は、 差し込み 各box-shadowプロパティ行の末尾にキーワードが追加されました。ここでもCSS Tricksは、box-shadowに関する素晴らしい記事が載っているあなたの親友です。CSS 3での構文とその適切な使用法について説明しています。.
ボーナス：より多くのスタイル
チュートリアルコードに加えて、私は適応した配色を持つ追加の背景画像を含めました。私はオリジナルの背景からサンプリングし、あなたがあなた自身のウェブサイトに適用することができるいくつかのバリエーションを作成するためにAdobe Photoshopを使用しました.
これら ボーナスファイルはソースファイルに含まれています 以下のセクションで.zipアーカイブ形式でダウンロードできます。.
上の画像をチェックして、私が話していることを理解することができます。特定の配色が必要な場合はポップを開く Photoshop>画像>調整>色相/彩度 自分のテンプレートに合わせて配色を変更するには、次のことを忘れないでください。 Colorizeオプションをチェックしてください 色がまったく変わらなかった場合は、色相/彩度ペインで.
結論
このチュートリアルは、あなたが新しいCSS3技術のいくつかに慣れているはずです。同様の方法でスタイル設定された2つの素晴らしいブレッドクラムメニューを作成し、それを古いブラウザで適切に劣化するように構築しました。また、デモコードといくつかのボーナス画像を提供しています。.
ここで作ったスタイルは特に好きですか？チュートリアルコードを改善する方法について質問やアイデアがあるかもしれませんか。下のディスカッションエリアで私たちとあなたの考えを共有してください、そしてあなたがデモで遊ぶことができるようにソースファイルをダウンロードすることを忘れないでください!
その他のCSS3チュートリアル
もっとCSS3を欲しい？以下は、CSS3を理論的および実用的に理解するための記事です。!
- CSS3：RSSフィードのロゴを作成する
- CSS3：検索フィールドを作成する
- CSS3：AJAX連絡フォームを作成する
- CSS3：HTML5 / CSS3ウェブページの構築
