利用js编写响应式侧边栏
为了练手，自己学敲网站时刚好碰到需要制作侧边栏，在网上也查了各种插件以及框架都可以实现这个功能，但是想自己学着用js原生学一个试试，于是就初略完成了侧边栏的实现，可以让初学者参考参考，代码能力有限。
其中主要设计的就是animate（）函数，animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。更多的使用请自己去搜索，我就不具体介绍了。另外就是利用了媒体查询的方法，通过检测当前设备的屏幕大小进行调整侧边栏的大小设计。媒体查询的方法可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。
接下来是具体的实现，附上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"/> <title>侧边栏</title> <link href="css/sideBar.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <div class="header"> <div class="nav-icon"> <span></span> <span></span> <span></span> </div> </div> <div class="content">侧边栏内容</div> <div class="sideBar"> <div class="sideBar-left"> <div class="divider"></div> <div class="body-content"> <div class="messageWarning item"> <div><i class="message_icon"></i>消息提醒</div> <ul> <li class="news"> <i class="circle"></i><a href="javascript:void()">消息1</a> </li> <li class="news"> <i class="circle"></i><a href="javascript:void()">消息2</a> </li> <li class="news"> <i class="circle"></i><a href="javascript:void()">消息3</a> </li> <li class="news"> <i class="circle"></i><a href="javascript:void()">消息4</a> </li> </ul> </div> <div class="course item"> <div><i class="icon"></i>课程</div> <ul> <li class="myInfo"> <i class="circle"></i><a href="javascript:void()">我的课程</a> </li> <li class="Dynamic"> <i class="circle"></i><a href="javascript:void()">课程动态</a> </li> <li class="question"> <i class="circle"></i><a href="javascript:void()">问题空间</a> </li> <li class="homework"> <i class="circle"></i><a href="javascript:void()">课程作业</a> </li> </ul> </div> <div class="myHome item"> <a href="javascript:void()"> <i class="home_icon"></i>我的主页 </a> </div> <div class="exit item"> <a href="javascript:void()"> <i class="exit_icon"></i>退出 </a> </div> </div> </div> <div class="sideBar-right"></div> </div> </div> </body> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/sideBar.js"></script> </html>
js实现：
$(function(){
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var sideBarWidth = windowWidth*0.8;
//设置侧边栏左边宽度与右边高度
$(".sideBar-left").height(windowHeight);
$(".sideBar-right").height(windowHeight);
//侧边栏由左向右滑动
$(".nav-icon").on("click",function(){
$(".sideBar").animate({left: "0"},350);
});
//点击退出，侧边栏由右向左滑动
$(".exit").on("click",function(){
$(".sideBar").animate({left: "-100%"},350);
});
})
css设计：
*{
margin: 0;
}
a{
color: #fff;
text-decoration: none;
}
.container{
width: 100%;
height: 100%;
min-width: 280px;
position: relative;
}
.header{
background: #0C7AB3;
list-style: none;
}
.nav-icon{
width: 30px;
background: #0C7AB3;
padding: 8px;
}
.nav-icon span{
display: block;
border: 1px solid #fff;
margin: 4px;
width: 20px;
}
.nav-icon:hover{
cursor: pointer;
}
.sideBar{
width: 100%;
position: absolute;
top: 0px;
left: -100%;
}
.sideBar-left{
width: 75%;
background: #fff;
float: left;
background-color: #343A3E;
}
.sideBar-left .divider{
width: 80%;
height: 6px;
margin-top: 30px;
padding-left: 15px;
background-color: #3099FF;
}
.sideBar-left .body-content{
width: 80%;
margin-top: 15px;
padding: 15px 0 15px 15px;
border-top: 2px solid #3099FF;
color: #EFEFEF;
}
.body-content .item{
margin: 4px;
}
.item ul{
list-style: none;
margin-left: -24px;
}
.item ul li{
margin:8px;
}
.item .circle{
width: 10px;
height: 10px;
margin-right: 10px;
border-radius: 50%;
background-color: #3099FF;
display: inline-block;
}
.sideBar-right{
width:25%;
display: inline-block;
background-color: rgba(0, 0, 0, 0.5);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Jquery实现侧边栏跟随滚动条固定（兼容IE6）
部分购物网站用这个功能放购物车或商品分类导航,使产品页面很长的时候,侧边栏能始终固定发挥它应有的作用,有的网站用这个功能来边栏的广告. jQuery代码: 复制代码 代码如下: var rollSet = $('#Roll');// 检查对象,#sidebar-tab是要随滚动条固定的ID,可根据需要更改var offset = rollSet.offset();$(window).scroll(function () { // 检查对象的顶部是否在游览器可见的范围内 var scrollTop
-
jQuery侧边栏随窗口滚动实现方法
复制代码 代码如下: $(function() { var $sidebar = $("#sidebar"), $window = $(window), offset = $sidebar.offset(), topPadding = 15; $window.scroll(function() { if ($window.scrollTop() > offset.top) {
-
jQuery固定浮动侧边栏实现思路及代码
这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随浏览器的DIV框,现思路是这样的:首先获取需要跟随的DIV距离页面顶部的距离,然后判断,当浏览器滚动的距离大于该DIV本身距离顶部距离的时候,则添加CSS属性fixed即可. 代码如下 HTML代码: <div id="header">header</div> <div id="sidebarWrap"> <div id=&qu
-
jQuery插件PageSlide实现左右侧栏导航菜单
jQuery左右侧栏导航菜单插件PageSlide,目前比较流行的导航菜单展现形式,特别是在手机端或者触屏页面,效果还是不错的,支持自定义展现的方向,菜单内容可自行定义,支持加载页面,或者模态的窗格中显示此页的隐藏的内容,推荐使用. 使用方法: 1.加载插件和jQuery <link rel="stylesheet" type="text/css" href="../jquery.pageslide.css" /> <scrip
-
简单的jquery左侧导航栏和页面选中效果
这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none" rel="external nofollow" rel="external nofollow" rel="external
-
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会.很多新闻资讯类网站如新浪.网易.CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站. 现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果.就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多.内容较长的网站.志文工作室调研了几种类似功能的实现方法,摘录之以供参考. 参考一.提
-
JS运动框架之分享侧边栏动画实例
本文实例讲述了JS运动框架之分享侧边栏动画实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">
-
JavaScript中实现无缝滚动、分享到侧边栏实例代码
废话不多说,直接给大家贴代码了,代码解决一起问题! 下面一段代码给大家介绍js无缝滚动实例代码: 代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&
-
javascript实现动态侧边栏代码
总的来说就是利用 鼠标悬停onmouseover 和 鼠标移除onmouseout 这两个时间来完成的. 首先是HTML 结构 复制代码 代码如下: <body><div id="div1"><span>侧边栏</span></div></body> 然后是css的样式: 复制代码 代码如下: #div1{ width:150px; height:200px; background:#999
-
利用js编写响应式侧边栏
为了练手,自己学敲网站时刚好碰到需要制作侧边栏,在网上也查了各种插件以及框架都可以实现这个功能,但是想自己学着用js原生学一个试试,于是就初略完成了侧边栏的实现,可以让初学者参考参考,代码能力有限. 其中主要设计的就是animate()函数,animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如
-
vue.js数据响应式原理解析
目录 Object.defineProperty() 定义 defineReactive 函数 递归侦测对象的全部属性 流程分析 observe 函数 Observer 类 完善 defineReactive 函数 One More Thing Object.defineProperty() 得力于 Object.defineProperty() 的特性,vue 的数据变化有别于 react 和小程序,是非侵入式的.详细介绍可以看 MDN 文档,这里特别说明几点: get / set 属性是函数
-
Bootstrap响应式侧边栏改进版
侧边栏在响应式设计中起到很大的作用,当屏幕小到手机的屏幕时,能够自适应屏幕大小的侧边栏固然能够为网站添加色彩,那么在Bootstrap的框架中提供了导航条和下拉菜单的组件,详情请自行到官网Bootstrap的文档查看,这里就不作介绍了. 本文是将其中的导航条和下拉菜单进行结合,然后设计并改进了侧边栏的制作. html: <div class="container"> <nav class="navbar navbar-default mynavbar&quo
-
CSS3+Js实现响应式导航条
今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 复制代码 代码如下: <div c
-
利用js编写网页进度条效果
一.基本思路 为了让我们编写的网页进度条满足现有需求,又足够轻便,所以使用原生js写一个构造函数,为了见名知义,可以把该函数命名为"Loading".该函数接收2个参数,分别为arr.callback.其中arr定义图片数组,callback定义执行完成后回调函数.该构造函数内部,遍历图片数组加载图片,每加载完一张图片,修改进度条进度,直至全部加载完成,进度条进度为100%. 二.实现步骤 (1)先搭建好进度条的样子,把html和css写好. 写完后预览一下进度条的效果 (2)编写Lo
-
原生JS实现响应式瀑布流布局
原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall Demo:http://leozdgao.github.io/demo/responsive_waterfall/ 演示图: 核心代码: responsive_waterfall.js (function() { var Waterfall = function(opts) { var minBoxWidth; Object.defineProper
-
20分钟成功编写bootstrap响应式页面 就这么简单
最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备.使用它编写响应式页面快捷.方便,而且屏蔽了浏览器差异.使用了 Bootstrap 后,再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了. 经过学习,我发现自己也具备了分分钟开发出一个高大上的页面的能力.本文将会为大家介绍 Bootstrap,并且带领大家一起实现一个响应式页面. 图 1. 移动优先,适应不同设备 一.安装 最简单的方式是直接在网页中
-
使用Vue.js和MJML创建响应式电子邮件
MJML是一种现代的电子邮件工具,使开发人员可以在所有设备和邮件客户端上创建美观.响应迅速的出色电子邮件.这种标记语言是为了减少编写响应式电子邮件的痛苦而设计的. 它的语义语法使其易于使用.它还具有功能丰富的标准组件,可缩短开发时间.在本教程中,我们将使用MJML构建漂亮的响应式邮件,并在多个邮件客户端上进行测试. 开始MJML 你可以使用npm安装MJML,以将其与Node.js或CLI结合使用: $ npm install -g mjml 构建我们的电子邮件 首先,请创建一个名为 email
-
Vue.js响应式数据的简单实现方法(一看就会)
目录 引言 基本概念 副作用函数 响应式数据 响应式数据的基本实现 实现思路 初步实现尝试 完善响应系统 泛化副作用函数名 修复漏洞 总结 引言 在Vue.js之中,Vue会自动跟踪JavaScript状态变化并在状态发生改变时响应式地更新DOM,这就是Vue.js的两大核心功能之一——响应性,是每一个Vue.js框架使用者必须熟练掌握的的功能.而得益于Vue.js自身支持的声明式渲染,Vue.js的学习成本大大降低,就算是一个前端领域的小白,只要能看懂并简单使用基本的HTML.JavaScri
-
JS实现表格响应式布局技巧
目录 正文 基本结构的实现 使用媒体查询将单个 Table 拆分成多个 借助伪元素极其特性,实现表头信息展示 最后 正文 今天,遇到了一个很有意思的问题,一名群友问我,仅仅使用 CSS,能否实现这样一种响应式的布局效果: 简单解析一下效果: 在屏幕视口较为宽时,表现为一个整体 Table 的样式 而当屏幕视口宽度较小时,原 Table 的每一行数据单独拆分为一个 Table 进行展示 很有意思的一个响应式布局,让信息在小屏幕下得到了一种不错的展示. 那么,仅仅使用 CSS 的话,能否实现这样一个