lms_码农 通过本文主要向大家介绍了jquery,css侧边导航栏,jquery侧边导航栏,jquery导航栏等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
最近做项目的时候，突然想用一个侧边导航栏，网上找了几个插件，有的太丑而且不太符合我的预期。与其修改别人的代码，不如自己来写一个了。废话不多说先上图，感兴趣的请继续看下去。
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> &