搜尋
首頁web前端css教學透過範例簡單了解基礎CSS導覽列、CSS下拉選單

透過範例簡單了解基礎CSS導覽列、CSS下拉選單

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Aug 02, 2022 pm 05:53 PM
css

這篇文章為大家帶來了關於css的相關知識，其中主要介紹了關於基礎css導航列和下拉式選單的實作屬性等相關問題，使用CSS你可以轉換成好看的導覽列而不是枯燥的HTML選單，下面一起來看一下，希望對大家有幫助。

透過範例簡單了解基礎CSS導覽列、CSS下拉選單

（學習影片分享：css影片教學、html影片教學）

導覽列

熟練使用導覽欄，對於任何網站都非常重要。

使用CSS你可以轉換成好看的導覽列而不是枯燥的HTML選單。

導覽列=連結清單

作為標準的HTML基礎一個導覽列是必須的。
在我們的範例中我們將建立一個標準的HTML清單導覽列。

導航條基本上是一個連結列表，所以使用 <ul></ul> 和 <li> 元素非常有意義，公共HTML：


 
現在，讓我們從清單中刪除邊距和填充：


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


透過範例簡單了解基礎CSS導覽列、CSS下拉選單


#範例解析：
list-style-type:none – 移除清單前小標誌，一個導覽列並不需要清單標記。 
 移除瀏覽器的預設設定將邊距和填滿設為0。 


上面的範例中的程式碼是垂直和水平導覽列使用的標準代碼。 


nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
    </style>









垂直導覽列


上面的程式碼，我們只需要<a></a> 元素的樣式，建立一個垂直的導覽列：


li a {
  display: block;
  width: 60px;
  background-color: #dddddd;}


範例說明：


display:block 顯示區塊元素的鏈接，讓整體變為可點擊連結區域（不只是文字），它允許我們指定寬度width:60px 。 


區塊元素預設為最大寬度。我們要指定一個60像素的寬度。 


注意： 請務必指定  <a></a> 元素在垂直導覽列的寬度。如果省略寬度，IE6可能會產生意想不到的效果。 


透過範例簡單了解基礎CSS導覽列、CSS下拉選單


nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        li a {
            display: block;
            width: 60px;
            background-color: #dddddd;
        }
    </style>









垂直導航條實例


建立一個簡單的垂直導航條實例，在滑鼠移動到選項時，修改背景顏色：


透過範例簡單了解基礎CSS導覽列、CSS下拉選單


nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: #f1f1f1;
        }
        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }
        /* 鼠标移动到选项上修改背景颜色 */
        li a:hover {
            background-color: #555;
            color: white;
        }
    </style>









啟動/目前導航條實例


在點擊了選項後，我們可以新增「active」 類別來標準哪個選項被選取： 
透過範例簡單了解基礎CSS導覽列、CSS下拉選單


li a.active {
    background-color: #4CAF50;
    color: white;}li a:hover:not(.active) {
    background-color: #555;
    color: white;}


範例程式碼：


nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: #f1f1f1;
        }
        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }
        /* 鼠标移动到选项上修改背景颜色 */
        li a:hover {
            background-color: #555;
            color: white;
        }
        li a.active {
            background-color: #4CAF50;
            color: white;
        }
        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>







<script>
function removeActiveClass(node) {
    node.className = &#39;&#39;;
}

let menus = document.querySelectorAll(&#39;#nav&#39;);

menus.forEach(function (value, index) {
    value.addEventListener(&#39;click&#39;, function (e) {
        var target = e.target;
        Array.prototype.forEach.call(document.querySelectorAll(&#39;#nav li a&#39;), removeActiveClass);
        target.className = &#39;active&#39;;
    })
});
</script>



創造連結並加入邊框


可以在<li> or <a> </a>
</li> 上新增text-align:center 樣式來讓連結居中。 


可以在 border <ul></ul> 上新增 border 屬性來讓導覽列有邊框。 
 如果要在每個選項上新增邊框，可以在每個<li> 元素上新增border-bottom :


透過範例簡單了解基礎CSS導覽列、CSS下拉選單


nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: #f1f1f1;
            border: 1px solid #555;
        }

        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }

        li {
            text-align: center;
            border-bottom: 1px solid #555;
        }

        li:last-child {
            border-bottom: none;
        }

        li a.active {
            background-color: #4CAF50;
            color: white;
        }

        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>







<script>
function removeActiveClass(node) {
    node.className = &#39;&#39;;
}

let menus = document.querySelectorAll(&#39;#nav&#39;);

menus.forEach(function (value, index) {
    value.addEventListener(&#39;click&#39;, function (e) {
        var target = e.target;
        Array.prototype.forEach.call(document.querySelectorAll(&#39;#nav li a&#39;), removeActiveClass);
        target.className = &#39;active&#39;;
    })
});
</script>



全螢幕高度的固定導航條


接下來我們建立一個左邊是全螢幕高度的固定導航條，右邊是可捲動的內容。 


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* 全屏高度 */
    position: fixed; 
    overflow: auto; /* 如果导航栏选项多，允许滚动 */}


注意: 此實例可以在行動裝置上使用。 


透過範例簡單了解基礎CSS導覽列、CSS下拉選單
 原始碼


nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 25%;
            background-color: #f1f1f1;
            height: 100%; /* 全屏高度 */
            position: fixed; 
            overflow: auto; /* 如果导航栏选项多，允许滚动 */
        }

        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }

        li {
            text-align: center;
            border-bottom: 1px solid #555;
        }

        li:last-child {
            border-bottom: none;
        }

        li a.active {
            background-color: #4CAF50;
            color: white;
        }

        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>







<script>
function removeActiveClass(node) {
    node.className = &#39;&#39;;
}

let menus = document.querySelectorAll(&#39;#nav&#39;);

menus.forEach(function (value, index) {
    value.addEventListener(&#39;click&#39;, function (e) {
        var target = e.target;
        Array.prototype.forEach.call(document.querySelectorAll(&#39;#nav li a&#39;), removeActiveClass);
        target.className = &#39;active&#39;;
    })
});
</script>



水平導覽列


#有兩種方法建立橫向導覽列。使用 內嵌 (inline)  或 浮動 (float)  的清單項目。 


這兩種方法都很好，但如果你想連結到具有相同的大小，你必須使用浮動的方法。 


內嵌清單項目


建立一個橫向導覽列的方法之一是指定元素， 上述程式碼是標準的內聯:


ul {
    list-style-type:none;
    margin:0;
    padding:0;}li {
    display:inline;}


實例解析：
 
display:inline; -預設情況下，<li> 元素是區塊元素。 
 在這裡，我們刪除換行符之前和之後每個清單項，以顯示一行。 


浮動列表項目


在上面的範例中連結有不同的寬度。 


對於所有的連結寬度相等，浮動<li> 元素，並指定為 <a></a> 元素的寬度：


ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;}li {
    float:left;}li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;}


實例解析：


   float:left – 使用浮动块元素的幻灯片彼此相邻。
display:block – 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度。
   width:60px – 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度。


水平導航條實例


建立一個水平導航條，在滑鼠移動到選項後修改背景顏色。 


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;}
 li {
    float: left;}
 li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;}
 /*鼠标移动到选项上修改背景颜色 */li a:hover {
    background-color: #111;}


链接右对齐


将导航条最右边的选项设置右对齐 (float:right;)：
透過範例簡單了解基礎CSS導覽列、CSS下拉選單



<li>关于

添加分割线


<li>  通过 border-right 样式来添加分割线:


/* 除了最后一个选项(last-child) 其他的都添加分割线 */
li {
    border-right: 1px solid #bbb;
}
 
li:last-child {
    border-right: none;
}



透過範例簡單了解基礎CSS導覽列、CSS下拉選單


固定导航条


可以设置页面的导航条固定在头部或者底部。


固定在头部：


ul {
    position: fixed;
    top: 0;
    width: 100%;}


固定在底部：


ul {
    position: fixed;
    bottom: 0;
    width: 100%;}


注意: 该实例可以在移动设备上使用。


源码


透過範例簡單了解基礎CSS導覽列、CSS下拉選單


nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        li {
            float: left;
            border-right: 1px solid #bbb;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        /*鼠标移动到选项上修改背景颜色 */
        li a:hover {
            background-color: #111;
        }
        li a.active {
            background-color: #4CAF50;
            color: white;
        }
        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>







<script>
function removeActiveClass(node) {
    node.className = &#39;&#39;;
}

let menus = document.querySelectorAll(&#39;#nav&#39;);

menus.forEach(function (value, index) {
    value.addEventListener(&#39;click&#39;, function (e) {
        var target = e.target;
        Array.prototype.forEach.call(document.querySelectorAll(&#39;#nav li a&#39;), removeActiveClass);
        target.className = &#39;active&#39;;
    })
});
</script>



示例 1


透過範例簡單了解基礎CSS導覽列、CSS下拉選單


nbsp;html>


    <meta>
    <title>原生js实现菜单动态添加active类</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            list-style: none;
            box-shadow: 0 2px 4px #eeeeee;
        }
        ul > li {
            padding: 6px 16px;
            margin: 0 5px;
            border-right: 1px solid #f7f7f7;
            border-bottom: 1px solid transparent;
            cursor: pointer;
        }
        ul > li:last-child{
            border-right: none;
        }
        li:hover, li:focus, .active {
            color: #ff6615;
            border-bottom: 1px solid #ff6615;
        }
    </style>






    
    <li>首页
    <li>产品中心
    <li>新闻资讯
    <li>文档下载
    <li>联系我们



<script>
    function removeActiveClass(node) {
        node.className = &#39;&#39;;
    }

    let menus = document.querySelectorAll(&#39;#nav&#39;);
    menus.forEach(function (value, index) {
        value.addEventListener(&#39;click&#39;, function (e) {
            var target = e.target;
            Array.prototype.forEach.call(document.querySelectorAll(&#39;#nav li&#39;), removeActiveClass);
            target.className = &#39;active&#39;;
        })
    });
</script>


CSS 下拉菜单


使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。


基本下拉菜单


当鼠标移动到指定元素上时，会出现下拉菜单。


透過範例簡單了解基礎CSS導覽列、CSS下拉選單


nbsp;html>


    <meta>
    <title>下拉菜单</title>
    <style>
        /*鼠标下拉菜单*/
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            padding: 12px 16px;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>



<div>
    <span>鼠标移动到我这看到下拉菜单！</span>
    <div>
        <p>CSDN博客</p>
        <p>wgchen.blog.csdn.net</p>
    </div>
</div>





实例解析


HTML 部分


我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span></span> , 或 a  <button></button> 元素。


使用容器元素 (如： <p></p> ) 来创建下拉菜单的内容，并放在任何你想放的位置上。


使用 <p> </p> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。


CSS 部分


.dropdown 类使用 position:relative：
 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute ) 的右下角位置。


.dropdown-content 类中是实际的下拉菜单。
 默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。


注意：如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100%
 ( overflow:auto 设置可以在小尺寸屏幕上滚动)。


我们使用 box-shadow 属性让下拉菜单看起来像一个”卡片”。


:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。


下拉菜单


创建下拉菜单，并允许用户选取列表中的某一项：


透過範例簡單了解基礎CSS導覽列、CSS下拉選單


nbsp;html>


    <meta>
    <title>下拉菜单</title>
    <style>
        /* 下拉按钮样式 */
        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        /* 容器 <div> - 需要定位下拉内容 */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        /* 下拉内容 (默认隐藏) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        /* 下拉菜单的链接 */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* 鼠标移上去后修改下拉菜单链接颜色 */
        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

        /* 在鼠标移上去后显示下拉菜单 */
        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* 当下拉内容显示后修改下拉按钮的背景颜色 */
        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
    </style>



    <div>
        <button>下拉菜单</button>
        <div>
            <a>CSDN博客 1</a>
            <a>CSDN博客 2</a>
            <a>CSDN博客 3</a>
        </div>
    </div>





（学习视频分享：css视频教程、html视频教程）
以上是透過範例簡單了解基礎CSS導覽列、CSS下拉選單的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述
本文轉載於：CSDN。如有侵權，請聯絡admin@php.cn刪除
相關文章
這麼多顏色鏈接這麼多顏色鏈接Apr 13, 2025 am	 11:36 AM
最近有一系列有關顏色的工具，文章和資源。請允許我通過將它們四捨五之後關閉幾個標籤，以供您享受。
自動利潤在Flexbox中的工作方式自動利潤在Flexbox中的工作方式Apr 13, 2025 am	 11:35 AM
羅賓以前已經介紹過這一點，但是我在過去的幾周里聽到了一些關於它的困惑，看到另一個人在解釋它，我想
移動彩虹移動彩虹Apr 13, 2025 am	 11:27 AM
我絕對喜歡三明治網站的設計。在許多美麗的功能中，這些標題是滾動時帶有彩虹的下線。它不是
新年，新工作？讓我們做一個網格驅動的簡歷！新年，新工作？讓我們做一個網格驅動的簡歷！Apr 13, 2025 am	 11:26 AM
許多流行的簡歷設計通過以網格形狀鋪設部分來充分利用可用的頁面空間。讓我們使用CSS網格創建一個佈局
將用戶擺脫過多習慣的一種方法將用戶擺脫過多習慣的一種方法Apr 13, 2025 am	 11:25 AM
頁面重新加載是一回事。有時，當我們認為它沒有響應或認為新內容可用時，我們會刷新頁面。有時我們只是生氣
域驅動的設計與React域驅動的設計與ReactApr 13, 2025 am	 11:22 AM
關於如何在React世界中組織前端應用的指導很少。 （只需移動文件，直到“感覺正確”，大聲笑）。真相
檢測非活動用戶檢測非活動用戶Apr 13, 2025 am	 11:08 AM
大多數情況下，您並不真正在乎用戶是否積極參與或暫時非活動。不活躍，意思，也許他們
Wufoo ZapierWufoo ZapierApr 13, 2025 am	 11:02 AM
Wufoo一直在集成方面非常出色。他們與特定應用程序（例如廣告系列顯示器，MailChimp和Typekit）進行集成，但他們也
See all articles
熱AI工具
Undresser.AI Undress
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
Undress AI Tool
免費脫衣圖片
Clothoff.io
Clothoff.io
AI脫衣器
AI Hentai Generator
AI Hentai Generator
免費產生 AI 無盡。
顯示更多
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
2 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌
顯示更多
熱工具
SublimeText3 Linux新版
SublimeText3 Linux新版
SublimeText3 Linux最新版
Dreamweaver Mac版
Dreamweaver Mac版
視覺化網頁開發工具
禪工作室 13.0.1
禪工作室 13.0.1
強大的PHP整合開發環境
mPDF
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
VSCode Windows 64位元 下載
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
顯示更多
熱門話題
gmail信箱登陸入口在哪裡
7491
15
CakePHP 教程
1377
52
steam的賬戶名稱是什麼格式
77
11
win11激活密鑰永久
52
19
NYT連接提示和答案
19
41
顯示更多