jquery+css实现侧边导航栏效果
程序员文章站
2022-07-05 20:38:14
最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期。与其修改别人的代码,不如自己来写一个了。废话不多说先上图,感兴趣的请继续看下去。...
最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期。与其修改别人的代码,不如自己来写一个了。废话不多说先上图,感兴趣的请继续看下去。
1、效果图
当有顶部导航栏的时候侧边导航栏会消失。
响应式方面,同样的顶部导航栏消失后右下角的图标才出现。点击出现导航,选中后消失;
这里是个demo ,没有做平滑滚动,需要的可以自己加上。
大体就介绍这么多吧,下面上代码。
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 { /* 小屏显示的图标 */ display: inline-block; overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; } /* -------------------------------- 小屏时的图标样式,和小图标响应式的显示与隐藏 -------------------------------- */ .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; } } /* -------------------------------- 导航条的背景等属性 -------------------------------- */ /*移动优先原则 这里是小屏时的导航*/ .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 { /* 给点击后的按钮做叉号(×)样式 */ 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弹性盒子,让内容的主轴线编程垂直的。 然后通过修改主轴的元素排列方式让他们居中*/ display: flex; flex-direction: column; justify-content: center; } /*下面通过调节内容的缩放比和padding,margin等属性来调节个选项间的距离,实现动画效果*/ .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">这是顶部的导航</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">关于</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">工作经验</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代码。注释很详细,就不多说了。
<script src="js/jquery-1.10.2.min.js"></script><!--导入jquery库--> <script> $(function(){ var a =$("section"); //获取每个大块的元素 var b = []; for (i=0;i< a.length;i++){ b[i]=a[i].offsettop; //把每个大块距离页面最顶部的距离,赋给b数组 } var c = $(window).scrolltop();//页面刷新是获取滚动条的位置 if(c>=80){ //顶部导航栏高80;顶部导航消失的时候让侧边导航出来 $(".cd-vertical-nav").show(); if(window.innerwidth<768){ //小屏的情况下让按钮隐藏/出现 $(".cd-nav-trigger").show();} }else { //否则让它隐藏 $(".cd-vertical-nav").hide(); if(window.innerwidth<768) { $(".cd-nav-trigger").hide(); } } $(window).scroll(function(){ //监听滚动条的滚动事件 c = $(window).scrolltop(); //实时监听滚动条位置 if(c>=80){ //页面滚动时,判断滚动条位置,控制侧边导航的隐显 $(".cd-vertical-nav").show(); if(window.innerwidth<768){ $(".cd-nav-trigger").show();} }else { $(".cd-vertical-nav").hide(); $(".cd-nav-trigger").hide(); } //下面是判断页面所处位置,实时更新导航条,是导航栏选项跟页面同步 for (i=0;i< a.length;i++){ var d =c-b[i]; //c是滚动条位置,b是元素到页面顶部的距离,d表示当前浏览器顶部所处的位置。 var e = a[i].offsetheight; //获取元素的高度 var f = a[i].id; //获取元素的id var g = $(".cd-vertical-nav a[href='#"+f+"']"); //拼接字符串,通过属性选择器找到当前所处页面对应的超链接 if (d>=0&&d<e){ if(g.hasclass("active")){ //如果当前元素本就处于激活状态直接break break; } //如果当前页面没有处于激活状态,就将正在激活的移出激活的样式表 $(".cd-vertical-nav .active").removeclass("active"); g.addclass("active"); //给当前需要激活的属性添加激活样式表 break; } } }); }) //下面为小屏时通过点击按钮开关导航栏, $(".cd-nav-trigger").on("click",function(){ //处于open状态,就关闭 if($(".cd-vertical-nav").hasclass("open")) $(".cd-vertical-nav").removeclass("open"); //反之打开 else $(".cd-vertical-nav").addclass("open"); }) //选中导航某一项后,关闭导航栏 $(".cd-vertical-nav a").on("click",function(){ $(".cd-vertical-nav").removeclass("open"); }) </script>
今天的分享就到这里了,大家有什么意见尽管提,希望能对大家有所帮助。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: CentOS 安装NodeJS V8.0.0的方法
下一篇: Vue中render方法的使用详解