CSSでメニューナビゲーションを実装する方法-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-21 13:49:21

オリジナル

1027 人が閲覧しました

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 サイトの他の関連記事を参照してください。