CSS Web ナビゲーション バーのデザイン: さまざまなナビゲーション バー スタイルの作成

CSS Web ページ ナビゲーション バーのデザイン: さまざまなナビゲーション バー スタイルを作成するには、特定のコード サンプルが必要です

ナビゲーション バーは、Web デザインで最も重要なコンポーネントの 1 つです。ユーザーが Web サイトのさまざまなページを閲覧しやすくするだけでなく、Web サイトの構造についての明確なガイドも提供します。ナビゲーション バーをデザインするときによく直面する問題は、美しく機能的なナビゲーション バーをどのように作成するかということです。この記事では、いくつかの一般的な CSS ナビゲーション バーの設計方法を紹介し、読者がそれをよりよく理解して適用できるように、対応するコード例を示します。

1. 基本ナビゲーション バー
   基本ナビゲーション バーは最も一般的なデザインであり、通常、ナビゲーション バーのメニュー項目を表すために順序なしリスト (ul) が使用されます。 CSS を使用して、背景色、フォント サイズ、余白などのナビゲーション バーのスタイルを設定できます。

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>

CSS コード例:

nav {
  background-color: #333;
  padding: 10px;
}

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

nav li {
  display: inline;
}

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

nav a:hover {
  background-color: #666;
}

2. レスポンシブ ナビゲーション バー
モバイル デバイスの普及により、ますます多くのユーザーは携帯電話やタブレットを介して Web を閲覧します。したがって、さまざまなデバイスで最高のユーザー エクスペリエンスを提供するには、ナビゲーション バーのレスポンシブ スタイルを設計する必要があります。

一般的なレスポンシブ ナビゲーション バーのデザインは、モバイル ドロップダウン メニューです。画面幅が一定の閾値未満の場合、ナビゲーションバーのメニュー項目がボタン形式で表示され、ユーザーがボタンをクリックすると、メニュー項目がドロップダウンリスト形式で表示されます。 。

HTML コード例:

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
  <button class="menu-btn">&#9776;</button>
</nav>

CSS コード例:

nav {
  background-color: #333;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

nav li {
  display: inline;
}

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

nav a:hover {
  background-color: #666;
}

.menu-btn {
  display: none;
}

@media only screen and (max-width: 768px) {
  nav ul {
    display: none;
  }
  
  .menu-btn {
    display: block;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 10px;
  }
  
  .menu-btn:hover {
    background-color: #666;
  }
  
  .menu-btn:focus {
    outline: none;
  }
  
  .menu-dropdown {
    display: none;
    background-color: #333;
    padding: 10px;
  }
  
  .show {
    display: block;
  }
}

3. ドロップダウン ナビゲーション バー
ドロップダウン ナビゲーション バーを使用すると、ウェブサイトのサブページ。より多くのナビゲーション オプションを提供します。 CSS pseudo-class:hover を使用して、ドロップダウン効果を実現できます。

HTML コード例:

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a>
      <ul class="submenu">
        <li><a href="#">公司简介</a></li>
        <li><a href="#">团队介绍</a></li>
      </ul>
    </li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS コード例:

nav {
  background-color: #333;
  padding: 10px;
}

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

nav li {
  display: inline-block;
}

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

nav a:hover {
  background-color: #666;
}

.submenu {
  display: none;
  background-color: #666;
  position: absolute;
  top: 100%;
  left: 0;
}

nav li:hover .submenu {
  display: block;
}

この記事では、基本的なナビゲーション バー、レスポンシブ ナビゲーション バー、ドロップダウン ナビゲーション バーの設計方法と、対応するコード例が提供されます。読者は、自分の Web サイトのニーズに合わせてこれらのサンプル コードを変更およびカスタマイズできます。合理的な CSS 設計を通じて、さまざまなスタイルのナビゲーション バーを作成し、ユーザーにより良い Web サイト閲覧体験を提供できます。もちろん、これはナビゲーション バーのデザインに関して言えば氷山の一角にすぎず、さらに多くのデザイン テクニックや詳細が私たちが探索して適用するのを待っています。この記事が読者にとって役立つことを願っています。

以上がCSS Web ナビゲーション バーのデザイン: さまざまなナビゲーション バー スタイルの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。