CSSでメニューナビゲーションを実装する方法

CSS は、Web ページ要素のスタイルとレイアウトを美しくするために使用できる強力なデザイン言語です。その中でも、メニュー ナビゲーションの実装は CSS の一般的な適用です。この記事では、CSSを使用してメニューナビゲーションを実装する方法を詳しく説明します。

1. HTML の基本構造

CSS スタイルを書き始める前に、HTML の基本構造を理解する必要があります。この例では、メニュー ナビゲーションを作成し、その基本構造を定義する必要があります。以下は基本的な HTML コードです。

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

この HTML 構造では、<nav> タグを使用してメニュー ナビゲーションを定義します。 <ul> タグは順序なしリストの作成に使用され、リスト項目には <li> タグが使用されます。各リスト項目には、<a> タグを使用したリンクが含まれています。メニュー ナビゲーションの基本構造を定義したので、CSS スタイルの記述を開始します

2. 基本スタイル

スタイルの設計を開始する前に、まずメニュー全体にいくつかを追加できます。基本スタイルは次のとおりです。

nav {
  background-color: #333;
  font-size: 18px;
  border-radius: 5px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

これらの基本スタイルでは、メニュー ナビゲーションの背景色、フォント サイズ、境界線の角丸などのスタイルを設定します。順序なしリストの場合、表示スタイルを [なし] に設定し、内側と外側の両方のマージンを 0 に設定します。各リスト項目は、特定のマージンを持つインラインのブロック レベル要素です。リンク スタイルのスタイルには、テキストの色を白に設定する、下線なし、パディングなどを設定するなどが含まれます。

3. マウスオーバーと選択のスタイル

次に、マウスオーバーと選択のスタイル効果を追加できます。たとえば、マウスがリンク上に移動すると、リンクの背景色が変化して、現在のリンクがアクティブであることをユーザーに示したいとします。この効果は、次のコードによって実現できます:

a:hover {
  background-color: #555;
}

a:active {
  background-color: #777;
}

マウスをリンクの上に置くと、リンクの背景色が濃い灰色に変わり、ユーザーがリンクをクリックすると、背景色がさらに変わります。を明るい灰色に変更して、リンクのアクティブなステータスを強調表示します。

4. ドロップダウン メニュー

サブメニューのあるメイン メニュー項目の場合、ユーザーがより便利にサブメニュー項目にアクセスできるように、ドロップダウン メニューの効果を実装する必要がある場合があります。ドロップダウン メニューは、CSS 疑似クラスとそのプロパティを使用して実装できます。ドロップダウン メニューは、次のコードによってメイン メニュー項目に追加できます。

li:hover ul {
  display: block;
}

ul ul {
  display: none;
  position: absolute;
  top: 40px;
  background-color: #555;
}

ul ul li {
  display: block;
  width: 200px;
}

ul ul li a {
  padding: 8px;
}

このコードでは、li:hover 疑似クラスを使用して、マウスがホバーしているかどうかを検出します。アイテムのメインメニュー上で。その場合は、下の子要素にドロップダウン メニューを表示します。ドロップダウン メニューの場合、実際にはメイン メニュー項目の下にあるため、絶対に配置してメイン メニュー項目の下に配置する必要があります。ユーザーがメイン メニュー項目とサブメニュー項目を明確に区別できるように、ドロップダウン メニューのテキストの色と背景色もわずかに異なる場合があります。

5. レスポンシブ デザイン

Web サイトをデザインするときは、さまざまなデバイス間の違いを考慮する必要があります。したがって、メニュー ナビゲーションがモバイル デバイスで適切に表示されるようにするには、いくつかのレスポンシブ デザイン スタイルを追加する必要があります。たとえば、モバイル デバイスではドロップダウン メニューを非表示にし、タッチスクリーン デバイスでは特定のスタイルを追加する必要がある場合があります。これは、次のコードで実現できます。

@media screen and (max-width: 768px) {
  ul {
    display: none;
    position: absolute;
    top: 60px;
    width: 100%;
    background-color: #333;
  }

  li {
    display: block;
    margin: 0;
  }

  li:hover ul {
    display: none;
  }

  a {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #fff;
  }
}

このコードでは、デバイスの画面サイズを検出するための @media メディア クエリを追加しました。画面幅が 768 ピクセル以下の場合、一部のスタイルが変更されます。たとえば、ドロップダウン メニューを無効にし、各メニュー項目を区別するために下枠を追加しながら、メニュー項目を互いに積み重ねます。さらに、タッチスクリーン デバイスでメニューを使いやすくするために、絶対位置を使用してメニュー全体をページの上部に移動しました。

上記は、メニュー ナビゲーションを実装するために必要なスタイル設計です。これらの CSS スタイル コードをコピーして Web ページに追加するだけです。もちろん、実際の開発では、Web サイトの特定の要件に基づいていくつかの変更を加える必要がありますが、Web サイトに美しいメニュー ナビゲーションを追加するための良い出発点となります。

以上がCSSでメニューナビゲーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。