jquery和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>

<p class="nav">这是顶部的导航</p>

<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>