CSS Web ナビゲーションバーのデザイン: さまざまなナビゲーションバースタイルの作成-CSSチュートリアル-php.cn

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

WBOY

リリース： 2023-11-18 16:41:06

オリジナル

1598 人が閲覧しました

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

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

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

基本ナビゲーションバー
基本ナビゲーションバーは最も一般的なデザインであり、通常、ナビゲーションバーのメニュー項目を表すために順序なしリスト (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 サイトの他の関連記事を参照してください。