教你做個可愛的css滑動導航條
發(fā)布時間：2021-06-15 15:54:11 作者：小丞同學 
我要評論
我要評論今天來帶大家做一個可愛的滑動導航欄效果，這個demo很基礎，但是使用場景非常廣泛，感興趣的小伙伴們可以參考一下
嘿！大家好哇，今天來帶大家做一個可愛😊的滑動導航欄效果，這個demo很基礎，但是使用場景非常廣泛噢 :happy: ！作為前端大白，今天就手把手一步一步教你實現(xiàn)它吧！❤️
實現(xiàn)效果
看！這個滑動的效果很有趣吧！這樣的滑動效果相信你一定有想過吧！✋
實現(xiàn)過程
1. 前期準備
雖然這個控件很小，功能也不是很多，但我們還是需要先分析一下它的結構，以及實現(xiàn)的功能
鼠標移入對應的列表項，底部的線會滑到相應的位置
點擊相應的列表項，背景滑塊會切換到所選擇的列表項
<div class="slipNav">
<nav>
<a href="javascript:;" class="selected">首頁</a>
<a href="javascript:;">我的</a>
<a href="javascript:;">聯(lián)系</a>
<a href="javascript:;">訂閱</a>
<a href="javascript:;">管理</a>
<a href="javascript:;">相冊</a>
<!-- 底部線條 -->
<div class="line"></div>
<!-- 背景滑塊 -->
<div class="bgc"></div>
</nav>
</div>
通過上面簡單的分析，我們可以寫出html結構，在基本列表項的基礎上添加了一個線條和滑塊:happy:
2. 使用CSS對導航條進行修飾
這部分很簡單沒有涉及什么難得屬性，相信聰明可愛的你一定信手拈來:happy:
首先我們先對整個導航欄進行一些調整，給導航欄添加了背景顏色，同時添加一定的圓角，讓整個導航欄看起來圓嘟嘟😊，由于后面內(nèi)部的標簽使用了浮動和定位，所以這里需要清除浮動噢！
.slipNav nav {
position: relative;
background-color: white;
border-radius: 50px;
}
.slipNav nav::after {
content: '';
display: block;
clear: both;
}
tips：清除浮動的三件套要牢記噢！
接下來我們對每一個列表項進行美化吧！調整字體大小，行高使得文本狀態(tài)最佳 ☘️ ！
.slipNav a {
position: relative;
float: left;
width: 150px;
line-height: 50px;
text-align: center;
font-size: 18px;
color: #000;
z-index: 1;
}
下面來對底部線條以及背景滑塊進行加工吧，通過絕對定位的方式定位到默認選擇文本的下方，背景滑塊也是同理！
.line {
position: absolute;
top: 50px;
left: 35px;
/* 線的長寬 */
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來實現(xiàn)線條滑塊的功能
在上面的美化過程中，我們對線條以及背景滑塊采用了絕對定位，就是為了下面通過控制left值來控制它們的位置變化！下面就來實現(xiàn)吧！
實現(xiàn)功能：鼠標移入對應的列表項，底部的線會滑到相應的位置
由于導航條中的項目過多，在后面查找對應元素索引時會比較麻煩，所以我們先給所有的列表項添加一個自定義屬性data-index來代表他們的索引
let slipAll = document.querySelectorAll('.slipNav nav a');
//給所有的a標簽添加index屬性，方便后面查找
for (let i = 0; i < slipAll.length; i++) {
slipAll[i].setAttribute('data-index', i)
}
接下來我們通過監(jiān)聽鼠標移入的位置來計算線的left值，
這里通過事件委托來實現(xiàn)，通過獲取觸發(fā)事件的index屬性來計算left值，當鼠標移出導航欄時，由于沒有選擇其他的項，所以線條需要回到原先被選中元素的位置
//鼠標移入底下的線跟著移動
slipNav.addEventListener('mouseover', function (e) {
let target = e.target
let len = 150 * target.dataset.index + 35;// 計算當前的left值
line.style.left = len + 'px';
})
//鼠標移出時底下的線回到原來的位置
slipNav.addEventListener('mouseleave', function (e) {
let selected = document.querySelector('.slipNav .selected')//原先被選中的元素
let len = 150 * selected.dataset.index + 35 // 線回到被選擇元素的位置
line.style.left = len + 'px'
})
注意：由于在css代碼中設置了過渡屬性，所以在改變left值時，不會突變而是一個滑動過程噢！😉
實現(xiàn)功能：點擊相應的列表項，背景滑塊會切換到所選擇的列表項
當我們鼠標點擊列表項時，我們需要選中當前元素，背景塊需要定位到當前位置！實現(xiàn)方法相同
//鼠標點擊時背景顏色的滑塊滑倒相應的位置
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');// 通過添加類名實現(xiàn)顏色變化
let len = 150 * target.dataset.index + 25 // 計算背景滑塊left值
bgc.style.left = len + 'px';
})
完整代碼
需要代碼可以直接復制噢！
<!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;
/* 線的長寬 */
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;
}
</style>
</head>
<body>
<div class="slipNav">
<nav>
<a href="javascript:;" class="selected">首頁</a>
<a href="javascript:;">我的</a>
<a href="javascript:;">聯(lián)系</a>
<a href="javascript:;">訂閱</a>
<a href="javascript:;">管理</a>
<a href="javascript:;">相冊</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標簽添加index屬性，方便后面查找
for (let i = 0; i < slipAll.length; i++) {
slipAll[i].setAttribute('data-index', i)
}
//鼠標移入底下的線跟著移動
slipNav.addEventListener('mouseover', function (e) {
let target = e.target
let len = 150 * target.dataset.index + 35;// 計算當前的left值
line.style.left = len + 'px';
})
//鼠標移出時底下的線回到原來的位置
slipNav.addEventListener('mouseleave', function (e) {
let selected = document.querySelector('.slipNav .selected')
let len = 150 * selected.dataset.index + 35 // 線回到被選擇元素的位置
line.style.left = len + 'px'
})
//鼠標點擊時背景顏色的滑塊滑倒相應的位置
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');// 通過添加類名實現(xiàn)顏色變化
let len = 150 * target.dataset.index + 25 // 計算背景滑塊left值
bgc.style.left = len + 'px';
})
</script>
</body>
</html>
噢！完成了！以上就是本次demo的完整代碼噢，感興趣的你可以動手試試噢！相信一定會有所收獲噢！
到此這篇關于教你做個可愛的css滑動導航條的文章就介紹到這了,更多相關css滑動導航條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
本文主要介紹了css旋轉導航的示例代碼，文中通過示例代碼介紹的非常詳細，該導航可用在一些網(wǎng)站首頁導航欄中，需要的朋友們下面隨著小編來一起學習學習吧2023-04-27
這篇文章主要介紹了CSS+HTML 實現(xiàn)頂部導航欄功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-08-24- 這篇文章主要介紹了CSS實現(xiàn)移動端橫向滾動導航條(PC端也適用)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編2021-03-17
這篇文章主要介紹了CSS 帶搜索導航欄的示例代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習2021-02-22
這篇文章主要介紹了純CSS實現(xiàn)導航欄下劃線跟隨效果，本文圖文并茂實例代碼詳解，給大家介紹的非常詳細，需要的朋友參考下吧2019-12-09- 本文通過三種方法給大家介紹css實現(xiàn)流程導航效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下2019-11-13
- 這篇文章主要介紹了基于html+css 實現(xiàn)簡易導航欄功能，主要就是css（級聯(lián)樣式表）對html的內(nèi)容做格式化。具體內(nèi)容詳情大家跟隨小編一起通過本文學習吧2021-04-07
本文通過實例代碼給大家介紹了css實現(xiàn)導航切換效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-08-15
CSS梯形導航圖是一種使用 CSS 布局實現(xiàn)的導航設計,可以根據(jù)需要靈活調整導航菜單的上下位置和大小，本文主要介紹了css實現(xiàn)電梯導航，具有一定的參考價值，感興趣的可以了解2023-05-06
