純CSS實現多層導航連動（附圖文範例）-css教學-PHP中文網

前言

基礎

首頁

web前端

css教學

純CSS實現多層導航連動（附圖文範例）

藏色散人

Aug 05, 2022 pm 01:59 PM

css 多級導覽列

前言

#導覽列之前也做過…但都是很簡單的一級導覽列或者用JQ實現的二級導覽列。但是關於頁面展示的東西，還是應該由CSS來實現，JavaScript應該多負責動作。【建議：css影片教學】

基礎

首先是二級導覽欄，例如這樣的：

純CSS實現多層導航連動（附圖文範例） ##之前一直不懂……其實這種東西說穿了很簡單……。

主要的地方在於：

1.整個導航的結構應該是怎麼樣的

2.不用JS的情況下，如何讓滑鼠移到一級導航時，顯示出二級導航。

3.二級導覽列的定位。

分析：

1.較主流的做法應該是使用ul標籤。每個ul標籤為一個導航級，裡面的li為子項目，li裡面又包含a標籤和ul標籤，a標籤用於點擊跳轉，ul為下一級的導航欄，以此類推…

2.滑鼠移動到一級導覽列上，顯示出二級導覽欄，第一個反應是hover偽類，按照先前的理解，hover用於控制自身的改變，怎麼樣才能控制子元素的樣式呢？其實這樣就可以了：

    #nav li:hover ul{
            display: block;
        }

登入後複製

當一級導航的li被滑鼠覆蓋時，子元素中的ul顯示出來。

......

原來還可以這樣，之前的理解錯了。我原先以為

li：hover單單是一個狀態，其實他也是個元素。

這句程式碼把整個li:hover當成一個元素，只是這個元素比較特殊，定義為“當滑鼠覆蓋到li元素的li元素”，他也是一個元素，這樣，當滑鼠覆蓋上li元素時，這時滑鼠所指的元素是li:hover，這時候控制li:hover下的ul元素顯示出來，就達到目的了。

我真機智。

3.那麼如何讓第二級的ul剛好顯示在第一級的li正下方呢？

1）第二級的ul是包裹在第一級的li裡面的，實際上使用相對定位就可以了，而且不止是正下方，這時候已經脫離了文檔流，想定位到哪裡都可以。

2）如果因為某些原因，或是你是強迫症患者，不想脫離文件流呢？

其實把他「擠」下來就可以了，li裡面有a標籤和ul標籤，當a標籤夠大，佔據了所有位置的時候，自然會把ul擠到下面去。

上碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>吃货的导航栏</title>
    </head>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        #nav{
            width: 600px;
            height: 40px;
            background: gray;
            margin: 0 auto;
        }
        #nav li{
            line-height: 40px;
            float: left;
            list-style: none;
            height: 40px;
            position: relative;
        }
        #nav a{
            padding: 0 20px;
            color: black;
            display: block;
            text-decoration: none;
            height: 40px;
        }
        #nav a:hover{
            background: #058;
            color:white;
        }
        #nav li ul{

            display: none;
            position: absolute;
            top: 40px;
            left:0px;
        }
        #nav li ul li{
            float: none;
            margin: 2px;
            width:100px;
            text-align: center;
        }
        #nav li ul li a{
            background: #ccc;
        }
        #nav li ul li a:hover{
            background: deeppink;
        }
        #nav li:hover ul{
            display: block;
        }
    </style>
    <body>
        <ul id="nav">
            <li><a href="#">首页</a></li>
            <li><a href="#">肉类</a>
                <ul>
                    <li><a href="#">牛肉</a></li>
                    <li><a href="#">猪肉</a></li>
                    <li><a href="#">鸡肉</a></li>
                </ul>
            </li>
            <li><a href="#">水果</a>
                <ul>
                    <li><a href="#">西瓜</a></li>
                    <li><a href="#">香蕉</a></li>
                    <li><a href="#">苹果</a></li>
                </ul>
            </li>
            <li><a href="#">零食</a></li>
            <li><a href="#">蔬菜</a>
                <ul>
                    <li><a href="#">白菜</a></li>
                </ul>
            </li>
        </ul>
    </body>
</html>

登入後複製

這是最最最最基礎的二級導航列了，但是有了這個基礎，想要製作多級導航列以及各種效果就有了依據。

多層次導覽列

在以上的原理基礎上，可以輕鬆製作多層次導覽欄，以三級的為例子，學做一個好看點的。

純CSS實現多層導航連動（附圖文範例）同樣是li內嵌ul的結構，使用相對定位和一點過渡效果，還有利用border做的小三角形，原理就是把其他邊框的顏色變成透明色transparent 。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>吃货的动画导航栏</title>
    </head>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .top-nav{
            width: 960px;
            margin: 0 auto;
            list-style: none;
            background-image: linear-gradient(#444, #111);
            border-radius: 6px;
            box-shadow: 0 1px 10px #777;
        }
        .top-nav:before,.top-nav:after{
            content: "";
            display: table;
        }
        .top-nav:after{
            clear: both;
        }
        .top-nav>li{
            float: left;
            border-right: 1px solid saddlebrown;
            position: relative;
            line-height: 40px;
        }
        .top-nav li{
            position: relative;
        }
        .top-nav>li a{
            font: "微软雅黑" 12px;
            text-decoration: none;
            color: goldenrod;
            padding: 12px 30px;
        }
        .top-nav>li a:hover{
            color:#fafafa;
        }
        .top-nav li ul{
            position: absolute;
            border-radius: 6px;
            z-index: 1;
            top: 40px;
            left: 0px;
            list-style: none;
            background-image: linear-gradient(#444, #111);
            box-shadow: 0 -1 0 rgba(255,255,255,0.3);
            visibility: hidden; /*这里只能用hidden 不能display*/
            opacity: 0;
            margin: 20px 0 0 0;
            transition: all .2s ease-in-out;
        }
        .top-nav ul ul{
            margin-left: 20px;
            margin-top: 20px;
        }
        .top-nav ul li:hover>ul{
            margin-left: 0px;
        }

        .top-nav li:hover>ul{
            opacity: 1;
            visibility: visible;
            margin: 0;
        }
        .top-nav ul a{
            padding: 15px;
            width: 70px;
            display: block;
        }
        .top-nav ul a:hover{
            background-image: linear-gradient(#04acec, #0186ba);
        }
        .top-nav ul li:first-child>a{
            border-radius: 6px 6px 0 0;
        }/*第一个跟最后一个a标签设置圆角*/
        .top-nav ul li:last-child>a{
            border-radius: 0 0 6px 6px;
        }
        .top-nav ul li{
            box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        }/*两个阴影叠加产生间隔*/
        .top-nav ul li:first-child>a:before{
            content: "";/*这句不可少，少了没效果*/
            display: block;
            width: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #444;
            position: absolute;
            top: -6px;
            left: 40px;
        }
        .top-nav ul li:first-child>a:hover:before{
            border-bottom: 6px solid #04acec;
        }
        .top-nav ul ul{
            top: 0px;
            left: 100px;
        }
        .top-nav ul ul li:first-child>a:before{ 
            border-top: 6px solid transparent;
            border-right: 6px solid #444;
            border-bottom: 6px solid transparent;
            position: absolute;
            top: 20px;
            left: -12px;
        }
        .top-nav ul ul li:first-child>a:hover:before{
            border-bottom: 6px solid transparent;
            border-right: 6px solid #04acec;
        }

    </style>
    <body>
        <ul class="top-nav">
            <li><a href="#">什么都吃</a></li>
            <li><a href="#">肉类</a>
                <ul>
                    <li><a href="#">铁板牛肉</a>
                        <ul>
                            <li><a href="#">黑椒味</a></li>
                            <li><a href="#">孜然味</a></li>
                            <li><a href="#">酸辣味</a></li>
                        </ul>
                    </li>
                    <li><a href="#">泡椒凤爪</a>
                        <ul>
                            <li><a href="#">大盘装</a></li>
                            <li><a href="#">中盘装</a></li>
                            <li><a href="#">小盘装</a></li>
                        </ul>
                    </li>
                    <li><a href="#">坩埚田鸡</a></li>
                </ul>
            </li>
            <li><a href="#">中餐</a>
                <ul>
                    <li><a href="#">家常菜</a>
                        <ul>
                            <li><a href="#">红烧肉</a></li>
                            <li><a href="#">拔丝地瓜</a></li>
                            <li><a href="#">青椒炒肉</a></li>
                        </ul>
                    </li>
                    <li><a href="#">汤</a>
                        <ul>
                            <li><a href="#">花蛤汤</a></li>
                            <li><a href="#">大骨肉汤</a></li>
                            <li><a href="#">鱼汤</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">水果</a></li>
            <li><a href="#">甜点</a></li>

        </ul>
    </body>
</html>

登入後複製

由於層級較多…使用選擇器的時候一定要注意。。什麼時候該加> 什麼時候用空格。。否則會改個大半天，別問我是怎麼知道的。

以上是純CSS實現多層導航連動（附圖文範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn