教你做個(gè)可愛(ài)的css滑動(dòng)導(dǎo)航條

發(fā)布時(shí)間：2021-06-15 15:54:11 作者：小丞同學(xué)

今天來(lái)帶大家做一個(gè)可愛(ài)的滑動(dòng)導(dǎo)航欄效果，這個(gè)demo很基礎(chǔ)，但是使用場(chǎng)景非常廣泛，感興趣的小伙伴們可以參考一下

嘿！大家好哇，今天來(lái)帶大家做一個(gè)可愛(ài)😊的滑動(dòng)導(dǎo)航欄效果，這個(gè)demo很基礎(chǔ)，但是使用場(chǎng)景非常廣泛噢 :happy: ！作為前端大白，今天就手把手一步一步教你實(shí)現(xiàn)它吧！❤️

實(shí)現(xiàn)效果

看！這個(gè)滑動(dòng)的效果很有趣吧！這樣的滑動(dòng)效果相信你一定有想過(guò)吧！✋

實(shí)現(xiàn)過(guò)程

1. 前期準(zhǔn)備

雖然這個(gè)控件很小，功能也不是很多，但我們還是需要先分析一下它的結(jié)構(gòu)，以及實(shí)現(xiàn)的功能

鼠標(biāo)移入對(duì)應(yīng)的列表項(xiàng)，底部的線會(huì)滑到相應(yīng)的位置

點(diǎn)擊相應(yīng)的列表項(xiàng)，背景滑塊會(huì)切換到所選擇的列表項(xiàng)

<div class="slipNav">
    <nav>
        <a href="javascript:;" class="selected">首頁(yè)</a>
        <a href="javascript:;">我的</a>
        <a href="javascript:;">聯(lián)系</a>
        <a href="javascript:;">訂閱</a>
        <a href="javascript:;">管理</a>
        <a href="javascript:;">相冊(cè)</a>
        <!-- 底部線條 -->
        <div class="line"></div>
        <!-- 背景滑塊 -->
        <div class="bgc"></div>
    </nav>
</div>

通過(guò)上面簡(jiǎn)單的分析，我們可以寫(xiě)出html結(jié)構(gòu)，在基本列表項(xiàng)的基礎(chǔ)上添加了一個(gè)線條和滑塊:happy:

2. 使用CSS對(duì)導(dǎo)航條進(jìn)行修飾

這部分很簡(jiǎn)單沒(méi)有涉及什么難得屬性，相信聰明可愛(ài)的你一定信手拈來(lái):happy:

首先我們先對(duì)整個(gè)導(dǎo)航欄進(jìn)行一些調(diào)整，給導(dǎo)航欄添加了背景顏色，同時(shí)添加一定的圓角，讓整個(gè)導(dǎo)航欄看起來(lái)圓嘟嘟😊，由于后面內(nèi)部的標(biāo)簽使用了浮動(dòng)和定位，所以這里需要清除浮動(dòng)噢！

.slipNav nav {
    position: relative;
    background-color: white;
    border-radius: 50px;
}

.slipNav nav::after {
    content: '';
    display: block;
    clear: both;
}

tips：清除浮動(dòng)的三件套要牢記噢！

接下來(lái)我們對(duì)每一個(gè)列表項(xiàng)進(jìn)行美化吧！調(diào)整字體大小，行高使得文本狀態(tài)最佳 ☘️ ！

.slipNav a {
    position: relative;
    float: left;
    width: 150px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    color: #000;
    z-index: 1;
}

下面來(lái)對(duì)底部線條以及背景滑塊進(jìn)行加工吧，通過(guò)絕對(duì)定位的方式定位到默認(rèn)選擇文本的下方，背景滑塊也是同理！

.line {
    position: absolute;
    top: 50px;
    left: 35px;
    /* 線的長(zhǎng)寬 */
    height: 3px;
    width: 80px;
    background-color: #54a0ff;
    transition: all .3s;
}

.bgc {
    position: absolute;
    top: 0px;
    left: 25px;
    height: 50px;
    width: 100px;
    border-radius: 50px;
    background-color: rgb(84, 126, 233);
    transition: all .3s;
}

3. 使用JS來(lái)實(shí)現(xiàn)線條滑塊的功能

在上面的美化過(guò)程中，我們對(duì)線條以及背景滑塊采用了絕對(duì)定位，就是為了下面通過(guò)控制left值來(lái)控制它們的位置變化！下面就來(lái)實(shí)現(xiàn)吧！

實(shí)現(xiàn)功能：鼠標(biāo)移入對(duì)應(yīng)的列表項(xiàng)，底部的線會(huì)滑到相應(yīng)的位置

由于導(dǎo)航條中的項(xiàng)目過(guò)多，在后面查找對(duì)應(yīng)元素索引時(shí)會(huì)比較麻煩，所以我們先給所有的列表項(xiàng)添加一個(gè)自定義屬性data-index來(lái)代表他們的索引

let slipAll = document.querySelectorAll('.slipNav nav a');
//給所有的a標(biāo)簽添加index屬性，方便后面查找
for (let i = 0; i < slipAll.length; i++) {
    slipAll[i].setAttribute('data-index', i)
}

接下來(lái)我們通過(guò)監(jiān)聽(tīng)鼠標(biāo)移入的位置來(lái)計(jì)算線的left值，

這里通過(guò)事件委托來(lái)實(shí)現(xiàn)，通過(guò)獲取觸發(fā)事件的index屬性來(lái)計(jì)算left值，當(dāng)鼠標(biāo)移出導(dǎo)航欄時(shí)，由于沒(méi)有選擇其他的項(xiàng)，所以線條需要回到原先被選中元素的位置

//鼠標(biāo)移入底下的線跟著移動(dòng)
slipNav.addEventListener('mouseover', function (e) {
    let target = e.target
    let len = 150 * target.dataset.index + 35;// 計(jì)算當(dāng)前的left值
    line.style.left = len + 'px';
})
//鼠標(biāo)移出時(shí)底下的線回到原來(lái)的位置
slipNav.addEventListener('mouseleave', function (e) {
    let selected = document.querySelector('.slipNav .selected')//原先被選中的元素
    let len = 150 * selected.dataset.index + 35 // 線回到被選擇元素的位置
    line.style.left = len + 'px'
})

注意：由于在css代碼中設(shè)置了過(guò)渡屬性，所以在改變left值時(shí)，不會(huì)突變而是一個(gè)滑動(dòng)過(guò)程噢！😉

實(shí)現(xiàn)功能：點(diǎn)擊相應(yīng)的列表項(xiàng)，背景滑塊會(huì)切換到所選擇的列表項(xiàng)

當(dāng)我們鼠標(biāo)點(diǎn)擊列表項(xiàng)時(shí)，我們需要選中當(dāng)前元素，背景塊需要定位到當(dāng)前位置！實(shí)現(xiàn)方法相同

//鼠標(biāo)點(diǎn)擊時(shí)背景顏色的滑塊滑倒相應(yīng)的位置
slipNav.addEventListener('click', function (e) {
    let target = e.target;
    let bgc = document.querySelector('.bgc')
    //排他思想
    for (let i = 0; i < slipAll.length; i++) {
        slipAll[i].classList.remove('selected')
    }
    target.classList.add('selected');// 通過(guò)添加類名實(shí)現(xiàn)顏色變化
    let len = 150 * target.dataset.index + 25 // 計(jì)算背景滑塊left值
    bgc.style.left = len + 'px';
})

完整代碼

需要代碼可以直接復(fù)制噢！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: rgb(221, 230, 245);
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .slipNav {
            width: 920px;
            margin: 100px auto;
        }

        .slipNav a {
            position: relative;
            float: left;
            width: 150px;
            line-height: 50px;
            text-align: center;
            font-size: 18px;
            color: #000;
            z-index: 1;
        }

        .slipNav nav {
            position: relative;
            background-color: white;
            border-radius: 50px;
        }

        .slipNav nav::after {
            content: '';
            display: block;
            clear: both;
        }

        .slipNav nav :hover {
            color: #54a0ff;
        }

        .selected {
            color: white !important;
        }

        .line {
            position: absolute;
            top: 50px;
            left: 35px;
            /* 線的長(zhǎng)寬 */
            height: 3px;
            width: 80px;
            background-color: #54a0ff;
            transition: all .3s;
        }

        .bgc {
            position: absolute;
            top: 0px;
            left: 25px;
            /* 線的長(zhǎng)寬 */
            height: 50px;
            width: 100px;
            border-radius: 50px;
            background-color: rgb(84, 126, 233);
            transition: all .3s;
        }
    </style>
</head>

<body>
    <div class="slipNav">
        <nav>
            <a href="javascript:;" class="selected">首頁(yè)</a>
            <a href="javascript:;">我的</a>
            <a href="javascript:;">聯(lián)系</a>
            <a href="javascript:;">訂閱</a>
            <a href="javascript:;">管理</a>
            <a href="javascript:;">相冊(cè)</a>
            <!-- 底部線條 -->
            <div class="line"></div>
            <!-- 背景滑塊 -->
            <div class="bgc"></div>
        </nav>
    </div>
    <script>
        let line = document.querySelector('.line');
        let slipNav = document.querySelector('.slipNav nav');
        let slipAll = document.querySelectorAll('.slipNav nav a');
        //給所有的a標(biāo)簽添加index屬性，方便后面查找
        for (let i = 0; i < slipAll.length; i++) {
            slipAll[i].setAttribute('data-index', i)
        }
        //鼠標(biāo)移入底下的線跟著移動(dòng)
        slipNav.addEventListener('mouseover', function (e) {
            let target = e.target
            let len = 150 * target.dataset.index + 35;// 計(jì)算當(dāng)前的left值
            line.style.left = len + 'px';
        })
        //鼠標(biāo)移出時(shí)底下的線回到原來(lái)的位置
        slipNav.addEventListener('mouseleave', function (e) {
            let selected = document.querySelector('.slipNav .selected')
            let len = 150 * selected.dataset.index + 35 // 線回到被選擇元素的位置
            line.style.left = len + 'px'
        })
        //鼠標(biāo)點(diǎn)擊時(shí)背景顏色的滑塊滑倒相應(yīng)的位置
        slipNav.addEventListener('click', function (e) {
            let target = e.target;
            let bgc = document.querySelector('.bgc')
            //排他思想
            for (let i = 0; i < slipAll.length; i++) {
                slipAll[i].classList.remove('selected')
            }
            target.classList.add('selected');// 通過(guò)添加類名實(shí)現(xiàn)顏色變化
            let len = 150 * target.dataset.index + 25 // 計(jì)算背景滑塊left值
            bgc.style.left = len + 'px';
        })
    </script>
</body>

</html>

噢！完成了！以上就是本次demo的完整代碼噢，感興趣的你可以動(dòng)手試試噢！相信一定會(huì)有所收獲噢！

到此這篇關(guān)于教你做個(gè)可愛(ài)的css滑動(dòng)導(dǎo)航條的文章就介紹到這了,更多相關(guān)css滑動(dòng)導(dǎo)航條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！