jquery+css實(shí)現(xiàn)側(cè)邊導(dǎo)航欄效果
更新時(shí)間：2021年07月26日 14:11:06 作者：lms_碼農(nóng)
這篇文章主要為大家詳細(xì)介紹了jquery+css實(shí)現(xiàn)側(cè)邊導(dǎo)航欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
最近做項(xiàng)目的時(shí)候，突然想用一個(gè)側(cè)邊導(dǎo)航欄，網(wǎng)上找了幾個(gè)插件，有的太丑而且不太符合我的預(yù)期。與其修改別人的代碼，不如自己來寫一個(gè)了。廢話不多說先上圖，感興趣的請繼續(xù)看下去。
1、效果圖
當(dāng)有頂部導(dǎo)航欄的時(shí)候側(cè)邊導(dǎo)航欄會(huì)消失。
響應(yīng)式方面，同樣的頂部導(dǎo)航欄消失后右下角的圖標(biāo)才出現(xiàn)。點(diǎn)擊出現(xiàn)導(dǎo)航，選中后消失；
這里是個(gè)demo ，沒有做平滑滾動(dòng)，需要的可以自己加上。
大體就介紹這么多吧，下面上代碼。
2、css代碼
這里是css代碼，詳情請看注釋
<style>
/*重置一些樣式*/
*, *::after, *::before {
box-sizing: border-box;
/*padding: 0;*/
margin: 0;
font-size: 14px;
}
.cd-vertical-nav ul{
list-style: none;
}
a {
color: #c0a672;
text-decoration: none;
}
.nav{
height: 80px;
}
.cd-image-replace {
/* 小屏顯示的圖標(biāo) */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
color: transparent;
}
/* --------------------------------
小屏?xí)r的圖標(biāo)樣式，和小圖標(biāo)響應(yīng)式的顯示與隱藏
-------------------------------- */
.cd-nav-trigger {
display: block;
position: fixed;
z-index: 2;
bottom: 30px;
right: 5%;
height: 44px;
width: 44px;
border-radius: 0.25em;
background: rgba(9, 150,90, 0.9);
/* reset button style */
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
border: none;
outline: none;
}
.cd-nav-trigger span {
position: absolute;
height: 4px;
width: 4px;
background-color: #3a2c41;
border-radius: 50%;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
transform: translateX(-50%) translateY(-50%);
}
.cd-nav-trigger span::before, .cd-nav-trigger span::after {
content: '';
position: absolute;
left: 0;
height: 100%;
width: 100%;
background-color: #3a2c41;
border-radius: inherit;
}
.cd-nav-trigger span::before {
top: -9px;
}
.cd-nav-trigger span::after {
bottom: -9px;
}
@media only screen and (min-width: 768px) {
.cd-nav-trigger {
display: none;
}
}
/* --------------------------------
導(dǎo)航條的背景等屬性
-------------------------------- */
/*移動(dòng)優(yōu)先原則 這里是小屏?xí)r的導(dǎo)航*/
.cd-vertical-nav {
position: fixed;
z-index: 1;
right: 5%;
bottom: 30px;
width: 90%;
max-width: 400px;
max-height: 90%;
overflow-y: auto;
transform: scale(0);
transform-origin: right bottom;
transition: transform 0.2s;
border-radius: 0.25em;
background-color: rgba(9, 9, 9, 0.9);
}
.cd-vertical-nav li{
height:auto;
}
.cd-vertical-nav a {
display: block;
padding: 1em;
color: #3a2c41;
font-weight: bold;
border-bottom: 1px solid rgba(58, 44, 65, 0.1);
}
.cd-vertical-nav a.active {
color: #c0a672;
}
.cd-vertical-nav.open {
transform: scale(1);
z-index: 10;
-webkit-overflow-scrolling: touch;
}
.cd-vertical-nav.open + .cd-nav-trigger {
background-color: transparent;
}
.cd-vertical-nav.open + .cd-nav-trigger span {
background-color: rgba(58, 44, 65, 0);
}
.cd-vertical-nav.open + .cd-nav-trigger span::before, .cd-vertical-nav.open + .cd-nav-trigger span::after {
/* 給點(diǎn)擊后的按鈕做叉號(hào)（×）樣式 */
height: 3px;
width: 20px;
border-radius: 0;
left: -8px;
}
.cd-vertical-nav.open + .cd-nav-trigger span::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 1px;
}
.cd-vertical-nav.open + .cd-nav-trigger span::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
bottom: 0;
}
@media only screen and (min-width: 768px) {
.cd-vertical-nav {
/* pc端展示的效果，首先重置一下樣式 */
right: 0;
top: 0;
bottom: auto;
text-align: center;
/*這里的vh是相對可視屏幕的高度，100vh表示高度始終等于瀏覽器可是高度*/
height: 100vh;
width: 90px;
max-width: none;
max-height: none;
transform: scale(1);
background-color: transparent;
overflow: hidden;
/* 下面通過flex彈性盒子，讓內(nèi)容的主軸線編程垂直的。
然后通過修改主軸的元素排列方式讓他們居中*/
display: flex;
flex-direction: column;
justify-content: center;
}
/*下面通過調(diào)節(jié)內(nèi)容的縮放比和padding，margin等屬性來調(diào)節(jié)個(gè)選項(xiàng)間的距離，實(shí)現(xiàn)動(dòng)畫效果*/
.cd-vertical-nav::before {
/* 背景色 */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
transform: translateX(100%);
transition: transform 0.4s;
}
.cd-vertical-nav:hover::before {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.cd-vertical-nav ul {
vertical-align: middle;
text-align: center;
padding-left: 15px;
}
.cd-vertical-nav a {
position: relative;
padding: 0.5em 0 0;
margin:0 auto;
border-bottom: none;
font-size: 1.2rem;
color: #eaf2e3;
transition: all .5s;
}
.cd-vertical-nav a.active i{
background-color: #00a58c;
color: #ffffff;
}
.cd-vertical-nav a.active span{
color: #00a58c;
}
.cd-vertical-nav a.active::before, .cd-vertical-nav a:hover::before {
background-color: #c0a672;
}
.cd-vertical-nav .label {
display: block;
opacity: 0;
transform: translateX(150%);
height: 0;
transition: all 0.5s;
}
.cd-vertical-nav:hover .label {
height:auto;
opacity: 1;
transform: translateX(0);
padding-top: 5px;
}
.cd-vertical-nav:hover a {
padding: 1em 0 0;
margin-top: 0.8em;
margin-right: 15px;
}
.cd-vertical-nav i{
display: inline-block;
width: 32px;
height: 32px;
font-size: 18px;
line-height: 30px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #0a9dc7;
background-color: #fff;
transform: scale(0.3);
transition: all 0.3s;
}
.cd-vertical-nav:hover i{
transform: scale(1);
}
}
/*配合頁面css*/
section{
height: 100vh;
}
section:nth-of-type(2n){
background-color: #ff0000;
}
section:nth-of-type(2n+1){
background-color: #ffff00;
}
</style>
3、html代碼
這里是html代碼，很簡單沒什么好說的。
<div class="nav">這是頂部的導(dǎo)航</div> <nav class="cd-vertical-nav navbar collapse"> <ul> <li><a data-scroll href="#tab1" class="active"><i class="iconfont icon-shouyeshouye"></i><span class="label">首頁</span></a></li> <li><a data-scroll href="#tab2"><i class="iconfont icon-guanyu"></i><span class="label">關(guān)于</span></a></li> <li><a data-scroll href="#tab3"><i class="iconfont icon-jineng"></i><span class="label">技能</span></a></li> <li><a data-scroll href="#tab4"><i class="iconfont icon-gongzuojingyan"></i><span class="label">工作經(jīng)驗(yàn)</span></a></li> </ul> </nav> <button class="cd-nav-trigger cd-image-replace">Open navigation<span aria-hidden="true"></span></button> <section id="tab1"></section> <section id="tab2"></section> <section id="tab3"></section> <section id="tab4"></section>
4、js代碼
下面我們看下js代碼。注釋很詳細(xì)，就不多說了。
<script src="js/jquery-1.10.2.min.js"></script><!--導(dǎo)入jquery庫-->
<script>
$(function(){
var a =$("section"); //獲取每個(gè)大塊的元素
var b = [];
for (i=0;i< a.length;i++){
b[i]=a[i].offsetTop; //把每個(gè)大塊距離頁面最頂部的距離，賦給b數(shù)組
}
var c = $(window).scrollTop();//頁面刷新是獲取滾動(dòng)條的位置
if(c>=80){ //頂部導(dǎo)航欄高80；頂部導(dǎo)航消失的時(shí)候讓側(cè)邊導(dǎo)航出來
$(".cd-vertical-nav").show();
if(window.innerWidth<768){ //小屏的情況下讓按鈕隱藏/出現(xiàn)
$(".cd-nav-trigger").show();}
}else { //否則讓它隱藏
$(".cd-vertical-nav").hide();
if(window.innerWidth<768) {
$(".cd-nav-trigger").hide();
}
}
$(window).scroll(function(){ //監(jiān)聽滾動(dòng)條的滾動(dòng)事件
c = $(window).scrollTop(); //實(shí)時(shí)監(jiān)聽滾動(dòng)條位置
if(c>=80){ //頁面滾動(dòng)時(shí)，判斷滾動(dòng)條位置，控制側(cè)邊導(dǎo)航的隱顯
$(".cd-vertical-nav").show();
if(window.innerWidth<768){
$(".cd-nav-trigger").show();}
}else {
$(".cd-vertical-nav").hide();
$(".cd-nav-trigger").hide();
}
//下面是判斷頁面所處位置，實(shí)時(shí)更新導(dǎo)航條，是導(dǎo)航欄選項(xiàng)跟頁面同步
for (i=0;i< a.length;i++){
var d =c-b[i]; //c是滾動(dòng)條位置，b是元素到頁面頂部的距離，d表示當(dāng)前瀏覽器頂部所處的位置。
var e = a[i].offsetHeight; //獲取元素的高度
var f = a[i].id; //獲取元素的id
var g = $(".cd-vertical-nav a[href='#"+f+"']"); //拼接字符串，通過屬性選擇器找到當(dāng)前所處頁面對應(yīng)的超鏈接
if (d>=0&&d<e){
if(g.hasClass("active")){ //如果當(dāng)前元素本就處于激活狀態(tài)直接break
break;
}
//如果當(dāng)前頁面沒有處于激活狀態(tài)，就將正在激活的移出激活的樣式表
$(".cd-vertical-nav .active").removeClass("active");
g.addClass("active"); //給當(dāng)前需要激活的屬性添加激活樣式表
break;
}
}
});
})
//下面為小屏?xí)r通過點(diǎn)擊按鈕開關(guān)導(dǎo)航欄，
$(".cd-nav-trigger").on("click",function(){
//處于open狀態(tài)，就關(guān)閉
if($(".cd-vertical-nav").hasClass("open")) $(".cd-vertical-nav").removeClass("open");
//反之打開
else $(".cd-vertical-nav").addClass("open");
})
//選中導(dǎo)航某一項(xiàng)后，關(guān)閉導(dǎo)航欄
$(".cd-vertical-nav a").on("click",function(){
$(".cd-vertical-nav").removeClass("open");
})
</script>
今天的分享就到這里了，大家有什么意見盡管提，希望能對大家有所幫助。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 簡單的jquery左側(cè)導(dǎo)航欄和頁面選中效果
- JQuery 浮動(dòng)導(dǎo)航欄實(shí)現(xiàn)代碼
- 用jquery的方法制作一個(gè)簡單的導(dǎo)航欄
- Jquery給當(dāng)前頁或者跳轉(zhuǎn)后頁面的導(dǎo)航欄添加選中后樣式的實(shí)例
- jQuery實(shí)現(xiàn)導(dǎo)航欄頭部菜單項(xiàng)點(diǎn)擊后變換顏色的方法
- jquery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后展開列表內(nèi)容的導(dǎo)航欄效果
- jQuery Mobile 導(dǎo)航欄代碼
- jQuery點(diǎn)擊導(dǎo)航欄選中更換樣式的實(shí)現(xiàn)代碼
- jquery實(shí)現(xiàn)垂直和水平菜單導(dǎo)航欄
- jQuery實(shí)現(xiàn)帶展開動(dòng)畫的導(dǎo)航欄效果
學(xué)習(xí)jquery必備 api中英文對照的chm手冊 下載
學(xué)習(xí)jquery必備 api中英文對照的chm手冊 下載...
2007-05-05 
深入解析jQuery中Deferred的deferred.promise()方法
這篇文章主要介紹了jQuery中Deferred的deferred.promise()方法,提醒千萬要注意deferred.promise()與jQuery的.promise()
實(shí)例方法的區(qū)別,需要的朋友可以參考下
2016-05-05 
jQuery插件開發(fā)的兩種方法及$.fn.extend的詳解
jQuery插件開發(fā)分為兩種：1 類級別、2 對象級別，下面為大家詳細(xì)介紹下
2014-01-01 
jQuery ajax實(shí)現(xiàn)省市縣三級聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了jQuery ajax實(shí)現(xiàn)省市縣三級聯(lián)動(dòng)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03 
select標(biāo)簽?zāi)M/美化方法采用JS插件
select標(biāo)簽的外觀問題很惱人，各個(gè)瀏覽器都不一致，單單就IE，一個(gè)版本就一個(gè)長相，還不能用CSS修飾，接下來將本人對select的美化方法共享出來，感興趣的朋友可以參考下
2013-04-04 
現(xiàn)在很多網(wǎng)站都流行這種彈出式的對話框或是信息顯示框，很想將這個(gè)流行元素加入到自己的項(xiàng)目中。使用jQuery可以不費(fèi)大力氣實(shí)現(xiàn)這種效果。將其記錄到我的Blog中，與業(yè)界朋友們起分享。
2009-07-07 
javascript異步處理與Jquery deferred對象用法總結(jié)
這篇文章主要介紹了javascript異步處理與Jquery deferred對象用法,結(jié)合實(shí)例形式總結(jié)分析了jQuery異步請求處理相關(guān)操作技巧,需要的朋友可以參考下
2019-06-06 
這篇文章介紹了用jquery生成二級菜單的代碼，需要的朋友可以參考一下
2013-06-06 
jQuery結(jié)合AJAX之在頁面滾動(dòng)時(shí)從服務(wù)器加載數(shù)據(jù)
這篇文章主要介紹了jQuery結(jié)合AJAX之在頁面滾動(dòng)時(shí)從服務(wù)器加載數(shù)據(jù),文中示例服務(wù)器端為C#程序,需要的朋友可以參考下
2015-06-06