CSSでWebナビゲーション効果を実現する方法

Web ページ制作のプロセスにおいて、ナビゲーションは非常に重要なコンポーネントです。ナビゲーションは Web ページの中核機能であるだけでなく、Web ページを美しくし、ユーザー エクスペリエンスを向上させる役割も果たします。 Web ページを美しくデザインするプロセスでは、Web ページのスタイル シートとして CSS を使用して、さまざまなナビゲーション スタイルを実装することもできます。この記事では、CSS が Web ページのナビゲーションをどのように実装するかを紹介します。

CSS スタイル シートの基本構造

CSS スタイル シートは、Web ページのデザインやレイアウトに広く使用されており、その基本構造は次のとおりです。 、セレクター。スタイル設定される要素または要素のコレクションを指します。属性は色、幅、高さなどのスタイルを指し、属性値は属性に対応する値を指します。スタイル シートが HTML ドキュメントに適用されると、内部のスタイル属性が対応する HTML 要素に自動的に適用されます。

CSS ナビゲーション メニューの基本概念

CSS スタイル シートを使用してナビゲーション メニューをデザインする場合は、次の基本概念を習得する必要があります。

メニュー項目: それぞれナビゲーション項目はメニュー項目です。

1. 選択された項目: ユーザーが選択したメニュー項目も、選択されたステータスを反映するためにスタイルを変更する必要があります。
2. ホバー状態: ユーザーがメニュー項目の上にマウスを移動すると、その項目がクリック可能な状態であることをユーザーに通知するために、メニュー項目のスタイルも変更する必要があります。
3. CSS で実装した水平ナビゲーション メニュー

次に、CSS を使用して基本的な水平ナビゲーション メニューを実装する方法を紹介します。このメニュー項目には 5 つの異なるオプションが含まれており、ユーザーがメニュー項目をクリックすると、対応するメニュー項目の背景色が変わります。

选择器{
    属性1:属性值1;
    属性2:属性值2;
    ...
}

上記の HTML と CSS コードを記述することで、基本的な水平ナビゲーション メニューを実装できます。このうち、具体的な実装方法は次のとおりです:

まず、

タグを定義し、ナビゲーション関連のすべての HTML 要素をこのタグに入れる必要があります。

1. タグを定義してメニュー項目を保存します。ここでは、Flex エラスティック レイアウトを使用して、ナビゲーション メニューを「水平」に配置します。
2. Definition style
タグは、色、パディングなどを含むメニュー項目の一般的なスタイルを定義します。
3. ホバー状態でのスタイルの変更を定義します。ユーザーが項目の上にホバーするとき、ユーザーにプロンプ​​トを表示するために項目に背景色を追加する必要があり、対応するテキストの色も同様にする必要があります。変わりました。
4. アクティブな状態でスタイルを定義します。ユーザーが項目をクリックすると、その項目に対応する
タグのスタイルが背景色などで変化し、ユーザーが区別できるようになります。 。
CSS によって実装された垂直ナビゲーション メニュー

水平ナビゲーション メニューの実装に加えて、CSS は垂直ナビゲーション メニューのデザインも実装できます。以下は、基本的な垂直ナビゲーション メニューの HTML コードです。

nbsp;html>


    <title>CSS Horizontal Nav</title>
    <style>
        nav{
            display: inline-block;
            background: #e74c3c;
        }

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

        li{
            margin: 0;
            padding: 0;
        }

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

        a:hover,
        a:focus,
        a:active{
            background: #c0392b;
        }

        .active a{
            background: #ffffff;
            color: #e74c3c;
        }
    </style>


    <nav>
        <ul>
            <li><a>Home</a></li>
            <li><a>About</a></li>
            <li><a>Services</a></li>
            <li><a>Portfolio</a></li>
            <li><a>Contact</a></li>
        </ul>
    </nav>

実装は、水平ナビゲーション メニューとは少し異なります。次の点に注意する必要があります:

メニューがフォーム全体の垂直位置を占めることができるように、

タグの幅を高さの 100% に設定します。

1. 基本的な垂直ナビゲーション メニュー スタイルの実装。サイドバーが垂直に配置されることを除いて、水平ナビゲーション メニューに似ています。
2. ホバー状態でのスタイルの変更は、水平ナビゲーション メニューと一致します。
3. アクティブな状態でスタイルを定義します。これも水平ナビゲーションと同じ方法で実装できます。
4. 概要

この記事では、Web ナビゲーション デザインにおける CSS の適用について、2 つのケースを通して詳しく説明します。水平ナビゲーション メニューであっても垂直ナビゲーション メニューであっても、CSS はそれを実装するための豊富なプロパティとスタイルを提供します。この記事の紹介を通じて、読者の皆様がCSSについての理解をさらに深め、今後のWebデザイン業務の一助になれば幸いです。

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