【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏
最近做项目的时候，突然想用一个侧边导航栏，网上找了几个插件，有的太丑而且不太符合我的预期。与其修改别人的代码，不如自己来写一个了。废话不多说先上图，感兴趣的请继续看下去。
1效果图
当有顶部导航栏的时候侧边导航栏会消失。
响应式方面，同样的顶部导航栏消失后右下角的图标才出现。点击出现导航，选中后消失；
这里是个demo ，没有做平滑滚动，需要的可以自己加上。
大体就介绍这么多吧，下面上代码。
2css代码
这里是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>
3html代码
<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>
4js代码
下面我们看下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>
今天的分享就到这里了，大家有什么意见尽管提，希望能对大家有所帮助。
本次分享就到这里
谢谢大家的观看
希望能对大家有所启发
有更好的方法或不同的意见请在留言区跟我交流
PS：转载请注明出处！！
【源码分享】jquery+css实现侧边导航栏的更多相关文章
- 推荐！Html5精品效果源码分享
一直在看别人的汇总,看到了一些不错的关于 HTML5内容的源码,我也汇总下分享出来,好东西需要共享!希望可以帮到需要的朋友. 1.劲爆分享:HTML5动感的火焰燃烧动画特效 这又是一款基于HTML5的 ...
- jQuery实例—选项卡（js源码和jQuery）【一些常见方法（1）-练习】
分别利用javascript的源码和jQuery来实现一个简单的选项卡,对比各自的步骤. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
- 微信小程序——智能小秘“遥知之”源码分享（语义理解基于olami）
微信小程序智能生活小秘书开发详解 >>>>>>>>>>>>>>>>>>>>> ...
- 支持语音识别、自然语言理解的微信小程序（“遥知之”智能小秘）完整源码分享
记录自己搭建https的silk录音文件语音识别服务的调用过程,所有代码可在文中找链接打包下载 >>>>>>>>>>>>> ...
- [DeviceOne开发]-土地销售项目源码分享
一.简介 这个是一个真实项目开源,虽然不是很花哨,但是中规中矩,小细节处理的也很好,非常值得参考和借鉴.里面的数据都缓存到本地,可以离线运行,但是调整一下代码,马上就可以和服务端完全对接.后续会有详细 ...
- WP8.1&Win10幸运大转盘源码分享
先AD一下我的群:Win10开发者群:53078485 最近在写一个APP,其中需要一个转盘动画的源码,找了很多但是都没有找到,无奈只好自己来写,写完效果自己还是比较满意的,分享出来,有需要的童鞋可以 ...
- 3D语音天气球（源码分享）——完结篇
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 开篇废话: 由于这篇文章是本系列最后一篇,有必要进行简单的回顾和思路整理. 这个程序是由两 ...
- 3D语音天气球（源码分享）——在Unity中使用Android语音服务
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 开篇废话: 这个项目准备分四部分介绍: 一:创建可旋转的"3D球":3 ...
- 3D语音天气球（源码分享）——通过天气服务动态创建3D球
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 开篇废话: 这个项目准备分四部分介绍: 一:创建可旋转的"3D球":3 ...
随机推荐
- Android 性能优化——之控件的优化
Android 性能优化——之控件的优化 前面讲了图像的优化,接下来分享一下控件的性能优化,这里主要是面向自定义View的优化. 1.首先先说一下我们在自定义View中可能会犯的3个错误: 1)Use ...
- JS理解之闭包
首先,闭包是什么?这个问题,百度上一大堆,然后我也是,现在学的有点累,来回顾一下吧算是,懂的自动略过,小弟不才,道行入不了你们法眼. 我认为的闭包是,就是取到,不是在自己作用域内或者按照js的规则,娶 ...
- HTTP笔记
"你知道当我们在网页浏览器(Web browser)的地址栏中输入 URL 时,Web 页面是如何呈现的吗?" HTTP协议 HTTP协议(HyperText Transfer P ...
- JS基础，你需要掌握的要点！
[循环控制语句]1.break:终止本层循环,继续执行循环后面的语句: 当循环有多层时,break只会跳过一层循环:2.continue:跳过本次循环,继续执行下一次循环: 对于for,continu ...
- SVN常见问题总结一
注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/6828776.html ) 作者:wangwen896 SVN是Subversion的简称,是一个开放 ...
- ListView控件详解
ListView是个较为复杂的控件 1.定义 把它拽进来,系统会自动在Designer.cs里添加一个 this.listView1 = new System.Windows.Forms.Lis ...
- linux下fdisk分区管理、文件系统管理、挂载文件系统等
分区管理工具有:fdisk, parted, sfdisk fdisk:对于一块硬盘来讲,最多只能管理15分区: # fdisk -l [-u] [device...] 查看硬盘设备分区信息 # f ...
- [刷题]算法竞赛入门经典 3-10/UVa1587 3-11/UVa1588
书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 题目:算法竞赛入门经典 3-10/UVa1587:Box 代码: //UVa1587 - Box #include&l ...
- 【WPF】学习笔记（三）——这个家伙跟电子签名板有个约定
这篇博客依旧是以电子签名板为基础而展开的,主要是对前文([WPF]学习笔记(一)--做一个简单的电子签名板)存在的部分问题进行解释,以及部分小功能的添加.由于这篇博客是建立在学习笔记一的基础上的,所以 ...
- 【Java SE】利用Java的for循环加random制作小学试卷
前期介绍:很多同学以为学习一门编程语言,一定要学到很高深的时候才可以做项目,其实不然,很多时候我们不需要学到面向对象的思想,就可以从事一些小项目的开发,来增加自己对开发的热情,比如现在我就可以利用Ja ...