导航样式记录-滑块效果(原生+JQ)

效果展示

代码如下：
html

<div>
    <ul id="nav">
    	<li class="silder1"></li>
        <li class="silder2"></li>
        <li><a href="javascript: void(0)">Index</a></li>
        <li><a href="javascript: void(0)">News</a></li>
        <li><a href="javascript: void(0)">Program</a></li>
        <li><a href="javascript: void(0)">Case</a></li>
        <li><a href="javascript: void(0)">About</a></li>
	</ul>
</div>

style-css

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: aqua;
}

body>div>#nav {
    margin: 0 auto;
}

body>div {
    width: 1200px;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
}

#nav {
    width: 1200px;
    height: 46px;
    line-height: 46px;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    list-style: none;
    background-color: aliceblue;
    position: relative;
}

#nav li a {
    color: rgb(247, 0, 255);
    padding: 0 25px;
    text-decoration: none;
    display: inline-block;
    position: relative;
    /* 使导航文字置于最上层 */
    z-index: 3;
}

.silder1,
.silder2 {
    position: absolute;
    display: inline-block;
    height: 46px;
    transform: scale(0.85);
    /* 使用贝塞尔曲线过渡动画 */
    transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    /* 使用线性过渡动画 */
    /* transition: all 0.1s linear; */
}

.silder1 {
    /* 使选中li置于第二层 */
    z-index: 2;
    background-color: blueviolet;
}

.silder2 {
    opacity: 0;
    /* 使鼠标移上li置于最下层 */
    z-index: 1;
    background-color: rgb(184, 114, 250);
}

javascript
javascript需要先引入jq库作为前置：
这里使用版本（jquery-3.7.1.min.js）

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

jquery方式

$(document).ready(() => {
    // 鼠标点击效果
    $("#nav a").click(function () {
        // 获取当前点击a标签的父级li标签的定位（默认是left与top）和父级li标签的宽度
        let position = $(this).parent().position()
        let width = $(this).parent().width()
        // 定义宽度，左侧定位便于进行过渡
        $('#nav .silder1').css({ opacity: 1, left: +position.left, width: width })
    })
    // 鼠标移入效果
    $("#nav a").mouseover(function () {
        let position = $(this).parent().position()
        let width = $(this).parent().width()
        $('#nav .silder2').css({ opacity: 1, left: +position.left, width: width })
    })
    // 鼠标移出效果
    $("#nav a").mouseout(function () {
        $('#nav .silder2').css({ opacity: 0 })
    })

    // 默认第一个，li:nth-child(3) 这个标签获取取决于导航数组第一个数据所在位置
    let indexWidth = $("#nav li:nth-child(3) a").parent('li').width()
    let indexPos = $("#nav li:nth-child(3) a").parent('li').position()
    // 默认选择第一个导航菜单
    $('#nav .silder1').css({ opacity: 1, left: +indexPos.left, width: indexWidth })
    // 设置默认鼠标移上第一个导航菜单再移出
    $('#nav .silder2').css({ opacity: 1, left: +indexPos.left, width: indexWidth })
    $('#nav .silder2').css({ opacity: 0 })
})

javascript原生

{
    let aList = document.getElementsByTagName('a') // 获取所有有效展示的导航菜单
    let silder1 = document.getElementsByClassName('silder1') // 获取选中菜单时高亮滑块
    let silder2 = document.getElementsByClassName('silder2') // 获取鼠标移入时浅色滑块
    // 对所有导航菜单进行遍历，添加监听事件（点击、移入、移出）  
    for (let i = 0; i < aList.length; i++) {
        // 鼠标点击效果
        aList[i].addEventListener('click', function () {
            // 获取当前点击a标签的父级li标签的左侧定位和父级li标签的宽度
            let position = +this.parentNode.offsetLeft
            let width = this.parentNode.offsetWidth
            // 定义宽度，左侧定位便于进行过渡
            silder1[0].style.cssText = `opacity: 1; left: ${position}px; width: ${width}px;`
        })
        // 鼠标移入效果
        aList[i].addEventListener('mouseover', function () {
            // 获取当前点击a标签的父级li标签的定位（默认是left与top）和父级li标签的宽度
            let position = +this.parentNode.offsetLeft
            let width = this.parentNode.offsetWidth
            // 定义宽度，左侧定位便于进行过渡
            silder2[0].style.cssText = `opacity: 1; left: ${position}px; width: ${width}px;`
        })
        // 鼠标移出效果
        aList[i].addEventListener('mouseout', function () {
            // 不沿用cssText 以便于鼠标移出时浅色滑块还保留left属性
            silder2[0].style.opacity = 0
        })
    }
    // 设置默认选中第一个
    let position = +aList[0].parentNode.offsetLeft
    let width = aList[0].parentNode.offsetWidth
    silder1[0].style.cssText = `opacity: 1; left: ${position}px; width: ${width}px;`
    silder2[0].style.cssText = `opacity: 1; left: ${position}px; width: ${width}px;`
    silder2[0].style.opacity = 0
}

可以根据样式修改滑块的形状，不一定是矩形，改为下边框，圆角，圆形，背景图均可；
滑块移动可以根据过渡动画（transition）选择移动的速度、类型等。