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