ホームページ > 記事 > ウェブフロントエンド > CSS Web ナビゲーション バーのデザイン: さまざまなナビゲーション バー スタイルの作成
CSS Web ページ ナビゲーション バーのデザイン: さまざまなナビゲーション バー スタイルを作成するには、特定のコード サンプルが必要です
ナビゲーション バーは、Web デザインで最も重要なコンポーネントの 1 つです。ユーザーが Web サイトのさまざまなページを閲覧しやすくするだけでなく、Web サイトの構造についての明確なガイドも提供します。ナビゲーション バーをデザインするときによく直面する問題は、美しく機能的なナビゲーション バーをどのように作成するかということです。この記事では、いくつかの一般的な 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">☰</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 サイトの他の関連記事を参照してください。