アイコン付きのドロップダウンメニュー-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

アイコン付きのドロップダウンメニュー

Barbara Streisand

Dec 31, 2024 am 01:13 AM

今日のデジタルエコシステムでは、Web サイトのナビゲーションは単なるリンクのリストをはるかに超えています。これはユーザーエクスペリエンスへの入り口であり、ブランドのコンテンツと視覚的個性を通じて訪問者をガイドするマップです。最新のナビゲーションメニューは機能的なだけでなく、デザイン、対話性、使いやすさを表現しています。
このチュートリアルでは、従来のナビゲーションを超えた革新的なナビゲーションメニューの作成について詳しく説明します。最新の Web テクノロジーを組み合わせて、次のようなメニューを作成します。

表情豊かなアイコンで注目を集めます
即座に視覚的なフィードバックを提供します
直感的なナビゲーションを提供します
デザインに洗練のレイヤーを追加

何を学ぶのですか？

セマンティック HTML を使用したメニューの構造
動的なホバー効果を作成する
アイコンを使用して視覚的なコミュニケーションを改善します
CSS を使用してスムーズな遷移を実装する
魅力的なユーザーインターフェイスをデザインする

普通のメニューを特別な体験に変える準備はできましたか?始めましょう!

フロントエンド開発者、Web デザイナー、または単に優れたデジタルエクスペリエンスを作成することに情熱を持っている人であっても、このチュートリアルはナビゲーションデザインスキルを高めるためのツールを提供します。

導入

このチュートリアルでは、HTML5、CSS3、アイコンに Font Awesome を使用して洗練されたナビゲーションメニューを作成する方法を検討します。私たちのメニューには、ホバー効果、説明的なアイコン、レスポンシブデザインなどの独自の機能があります。

menu desplegable con icono

主な特長

黒い背景の水平メニュー
各ナビゲーション要素のアイコン
インタラクティブなホバー効果
ドロップダウンサブメニュー
セクションごとの色の変更

HTML構造

    <header>
        <nav>
            <ul>
                <li>
                    <a href="#">
                        <span>

<h2>
  
  
  Estilos CSS Destacados
</h2>
<h3>
  
  
  Diseño Base
</h3>


<pre class="brush:php;toolbar:false">    nav > ul {
        display: table;
        width: 100%;
        background: #000;
        position: relative;
    }

    nav > ul li {
        display: table-cell;
    }

ホバー効果

    nav > ul > li > a:hover > span {
        top: 0;
    }

    nav > ul > li > ul > li a:hover {
        background: #5da5a2;
    }

スムーズな移行

    nav > ul > li > a {
        transition: all 0.3s ease;
    }

セクションごとの色

各セクションには固有の背景色があります:

ホーム: #0e5061
カテゴリ: #5da5a2
サービス: #f25724
概要: #174459
連絡先: #37a4d9

依存関係

このメニューには以下が必要です:

Font Awesome (CDN 経由で含まれます)
最新の CSS
Flexbox 互換ブラウザ

改善の可能性

メニューをレスポンシブにします
より複雑なアニメーションを追加します
複数レベルのサブメニューを実装する
モバイルデバイス向けに最適化

完全なコード

元のコード

プロジェクトへの実装

このメニューを実装するには、次の HTML と CSS を組み合わせます:

HTML

    <header>
        <nav>
            <ul>
                <li>
                    <a href="#">
                        <span>

<h2>
  
  
  Estilos CSS Destacados
</h2>
<h3>
  
  
  Diseño Base
</h3>


<pre class="brush:php;toolbar:false">    nav > ul {
        display: table;
        width: 100%;
        background: #000;
        position: relative;
    }

    nav > ul li {
        display: table-cell;
    }