帶有圖標的下拉式選單-css教學-PHP中文網

首頁

web前端

css教學

帶有圖標的下拉式選單

Barbara Streisand

Dec 31, 2024 am 01:13 AM

在當今的數位生態系統中，網站導航不僅僅是簡單的連結清單。它是用戶體驗的門戶，是引導訪客了解品牌內容和視覺個性的地圖。現代導航選單不僅僅是功能性的，它們還是設計、互動性和可用性的體現。
本教學深入探討如何創造超越傳統的創新導航選單。我們將結合最新的網路技術來建立一個選單：

用富有表現力的圖示吸引註意力
提供即時視覺回饋
提供直覺的導航
為設計增添一層精緻感

你會學到什麼？

使用語意 HTML 建立選單
建立動態懸停效果
使用圖示來改善視覺傳達
使用 CSS 實現平滑過渡
設計吸引人的使用者介面

準備好將普通的菜單變成非凡的體驗了嗎？讓我們開始吧！

無論您是前端開發人員、網頁設計師，還是只是熱衷於創造卓越數位體驗的人，本教學都將為您提供提高導航設計技能的工具。

介紹

在本教學課程中，我們將探索如何使用 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：

網頁

    <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;
    }