あなたのナビゲーションメニューが上の横の行か縦の行のどちらであっても、これは単なるリストです。 Webナビゲーションを設計するときには、ナビゲーションメニューがほんの華麗なリンクグループであることを忘れてしまうことはよくあります。しかし、XHTML + CSSを使ってナビゲーションをプログラミングする場合、ダウンロードするのが簡単で（XHTML）、カスタマイズしやすいメニュー（CSS）を作成することができます。
入門
ナビゲーションのリストを設計するには、リストを使用する必要があります。これはナビゲーションとして識別された標準の順序付けられていないリストです。
HTMLを詳しく見ると、「ホーム」リンクのIDも
あなたはここにいる。これにより、読者の現在地を特定するメニューを作成することができます。このタイプの視覚的な手がかりを現時点で計画していない場合でも、その情報を含めることができます。後でキューを追加することに決めた場合は、サイトを準備するためのコーディングが少なくなります。
CSSスタイルなしでは、このXHTMLメニューは標準的な順序付けられていないリストのように見えます。箇条書きがあり、リスト項目は少しインデントされています。プレースホルダリンクを使用しているため、ほとんどのブラウザはリンクをクリック可能（下線付きと青色）で表示しません。上記のHTMLをWebページに貼り付けると、ナビゲーションは次のようになります。
- ホーム
- 製品
- サービス
- お問い合わせ
これはかなり退屈で、メニューのようには見えません。しかし、いくつかのCSSスタイルをリストに追加するだけで、誇りに思うようなメニューを作成することができます。
垂直ナビゲーションメニュー
垂直ナビゲーションメニューは、普通のリストと同じように上下に表示されるため、書きやすいです。リスト項目は、ページの下に垂直に表示されます。
私がメニューをスタイリングしているとき、私は外で始めて仕事をしたいのですが、これは私が最初に
ul＃navigation その後、
リ 要素をクリックし、リンクをクリックします。このメニューでは、まずメニューの幅を定義します。これにより、メニュー項目が長い場合であっても、レイアウトの残りの部分を押し上げたり、水平スクロールさせたりすることはありません。
ul＃navigation {width：12em; }
一度幅が設定されると、リスト項目を再生できます。これにより、（箇条書きを取り除く）、背景色、枠線、テキストの配置、余白などを設定できます。
ul＃navigation li {リストスタイル：なし;背景色：＃039;border-top：solid 1px＃039;text-align：left;マージン：0;} リスト項目の基本を設定したら、リンク領域でメニューがどのように表示されるかを再生することができます。最初のスタイルは UL＃ナビゲーションLI Aそして、 リンク, A：訪問済み, A：ホバー、および A：アクティブ （もし望むなら）。リンクについては、リンクをブロック要素（デフォルトのインラインではなく）にしたいと思っています。これは、彼らが LI彼らは段落のように機能し、メニューボタンとしてのスタイルを簡単にします。私がいつもやっているもう一つのことは、下線を削除することです テキスト装飾：なし;）これは、ボタンが私のようなボタンのように見えるようになります。もちろん、あなたのデザインは異なるかもしれません。 ul＃navigation li a {表示ブロック;テキスト装飾：なし;パディング：.25em;border-bottom：ソリッド1px＃39f;ボーダー右：ソリッド1px＃39f;} 注意してください 表示ブロック; リンク上に設定すると、メニュー項目のボックス全体が、文字だけでなくクリック可能になります。これは使いやすさにも良いことです。デフォルトの青、赤、紫と異なる場合は、リンクの色（リンク、訪問、ホバー、アクティブ）を設定してください。 a：リンク、a：訪問済み{color：#fff; }a：ホバー、a：アクティブ{color：＃000; } また、背景色を変更することで、ホバー状態をもう少し注意を払うのも好きです。 a：ホバー{背景色：#fff; } 垂直メニューの例がさらに必要な場合は、以下のリストを参照してください。 水平ナビゲーションメニューを作成することは、HTMLリストが垂直方向に表示することを好むという事実を相殺しなければならないので、垂直ナビゲーションメニューよりもやや難しくなります。水平メニューと同様に、まずナビゲーションメニューリストを作成します。
水平メニューを作成するには、垂直メニューの場合と同じ操作を行います。外から始まって作業してください。ナビゲーションを左隅から開始したいので、左余白とパディングを0に設定し、左に浮動させます。また、あなたのメニューが意図したよりも多かれ少なかれスペースを取らないように幅を設定する習慣を身につけるべきです。水平メニューの場合、これは通常デザインの全幅です。また、読みやすくするために、リスト全体に背景色を追加しました。 ul＃navigation {float：left;マージン：0;パディング：0;幅：100％;背景色：＃039;} しかし、水平ナビゲーションメニューの秘密はリスト項目にあります。リスト項目は通常はブロック要素です。つまり、それぞれの前後に改行があります。ディスプレイを ブロック に 列をなしてリスト要素を互いに横に並べるように強制します。 ul＃navigation li {ディスプレイ：インライン; } 私は同じ色とテキストの装飾で、垂直ナビゲーションメニューでそれらを扱ったのとまったく同じようにリンクを扱いました。ボタンを上に置いたときにボタンの輪郭を描くために、上の境界線を追加しました。削除されたのは 表示ブロック; 改行を元に戻し、水平メニューを破棄します。 ul＃navigation li a {テキスト装飾：なし;パディング：.25em 1em;border-bottom：ソリッド1px＃39f;border-top：ソリッド1px＃39f;ボーダー右：ソリッド1px＃39f;}a：リンク、a：訪問済み{color：#fff; }ul＃navigation li a：ホバー{背景色：#fff;色：＃000;} HTMLのもう一つの側面は識別子 あなたはここにいる。ユーザーの現在地を示すメニューを変更する場合は、 ID 別の背景色や別のスタイルを定義します。その属性を移動する ID 現在のページが常に強調表示されるように、他のページの正しいメニュー項目に移動します。 ul＃navigation li＃あなたは{背景色：＃09f; } これらのスタイルをページにまとめると、サイトに対応した水平または垂直のメニューバーを作成できますが、ダウンロードは簡単で、後で更新するのは簡単です。 XHTML + CSSを使用すると、あなたのリストがデザインのための非常に強力なツールに変わります。 水平メニューの例がもっと必要な場合は、以下を参照してください。
水平ナビゲーションメニュー
あなたはここにいる場所情報
