纯手写响应式侧边导航栏，废话不多说直接上效果图及代码…

ps:markdown也是第一次使用，排版就不计较了

页面结构

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href="css/jinpu-test01.css"/><!--[if lt IE 9]><script src="js/html5shiv.min.js"></script><![endif]--></head>
<body>
<!--顶部导航条-->
<div class="navbar-header"><div class="container"><div class="nav-logo lt"><img src="images/logo.png" alt=""/></div><div class="navbar-toggle" id="btn-navleft"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></div><div class="navbar-nav"><ul><li><a href="#">首页</a></li><li><a href="#"><b>管理软件</b></a></li><li><a href="#"><b>云服务</b></a></li><li><a href="#"><b>关于金蝶</b></a></li></ul></div></div>
</div>
<!--主体部分-->
<div class="container"><div class="main"><div class="wrap-left lt">左侧导航栏/左侧导航栏/左侧导航栏/左侧导航栏/左侧导航栏。。。。。。。。。。。...........。。。。</div><div class="wrap-right lt">右侧主体内容/右侧主体内容/右侧主体内容/右侧主体内容。。。。。。。。。....................。。。。</div></div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jinpu-test01.js"></script>
<script>(function () {var s = document.createElement("script");s.onload = function () {bootlint.showLintReportForCurrentDocument([]);};s.src = "js/bootlint.js";document.body.appendChild(s)})();</script>
</body>
</html>

页面样式

html {font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;
}
body {padding-top:50px;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,
figcaption,figure,footer,
header,menu,
nav,section{display:block}
ol,ul{list-style:none}.navbar-header,
.container:after{content:"";display:block;clear:both;
}
.container{margin:0 auto;border:1px solid #f22d27;position:relative;
}
@media screen and (min-width: 768px){.container{width:750px;}
}
@media screen and (min-width: 992px){.container{width:970px;}
}
@media screen and (min-width: 1200px){.container{width:1170px;}
}
/*顶部导航条*/
.navbar{height:50px;width:100%;background:#F8F8F8;
}
.lt{float:left;
}
.navbar-nav>ul>li{float:left;
}
/*小屏幕下的菜单按钮*/
#btn-navleft{cursor:pointer;
}
.navbar-toggle {position:relative;float:right;padding:9px 10px;margin-top:8px;margin-right:15px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid #bbb;border-radius:4px;
}
.navbar-toggle .icon-bar {display:block;width:22px;height:2px;border-radius:1px;background:#888;
}
.navbar-toggle .icon-bar + .icon-bar {margin-top:4px;
}
@media screen and (min-width: 768px){.navbar-toggle {display:none;}
}
/*主体部分-左侧导航栏*/
.main{overflow:hidden;
}.wrap-left {/*设置margin-left的目的是隐藏div*/margin-left:-20%;float:left;width:20%;min-height:200px;background:#F00;/*z-index: 10;*/}.wrap-right{float:left;width:100%;min-height:200px;background:#005580;}
@media screen and (min-width: 768px){.wrap-left{display:none;background:#006fa8;}.wrap-right{width:100%;background:#005580;}
}
@media screen and (max-width: 767px){.navbar-nav>ul>li{display:none;}
}

JS代码…

$('#btn-navleft').on('click', function () {//console.log('yes!')if(!$('.wrap-left').hasClass('active')){$('.wrap-right').stop().animate({marginRight:'-20%'},300).siblings('.wrap-left').stop().animate({marginLeft:'0'},400).addClass('active');}else{$('.wrap-left').stop().animate({marginLeft:'-20%'},400).removeClass('active').siblings('.wrap-right').stop().animate({marginRight:'0'},700);//$('.wrap-right').stop().animate({marginRight:'0'},4000);}});

响应式侧边导航栏（刚入门的菜鸟,勿喷...）相关推荐

【前端代码实例】使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能
bilibili在线视频演示地址: [前端代码实例]使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能效果图: 完整代码: <!DOCTYPE ...
【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
你好，SegmentFault 新导航【开发手册】; 再见，侧边导航栏
SegmentFault 在夏季上线了 SegmentFault 5.0 版本,迭代了整个主站的样式,在 8 月的时候上线了面板九宫格(侧边导航栏),整合了部分的入口,方便用户查看笔记.徽章和排行榜等 ...
一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览源码下载实现的代码. ...
一款由css3和jquery实现的响应式设计导航
2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览 ...
织梦cms响应式站长导航分类网站模板（自适应手机版）
介绍: (自适应手机版)响应式站长导航分类网站模板是一款简洁的站长导航工具, 网址导航收录介绍,站长导航管理,站长导航分类网站响应式织梦模板dedecms下载. 包含:技术资源.博客大全.休闲娱乐.企 ...
webstack响应式网站导航html源码kyuan 本地静态化版
介绍: webstack响应式网站导航html源码安装方法:直接上传一言.和风天气的api建议大家自己注册换成自己的,每个注册的人有每日免费使用次数, 自带的一起用可能最后都显示不出来了. 以上提 ...
【机器学习实践】Jupyter Notebook安装侧边导航栏功能操作及其他常用扩展功能介绍...
安装过程: 1. 首先我们引入jupyter_contrib_nbextension这个第三方库. 2. 在Anaconda Promot中输入命令: pip install jupyter_con ...
ldaptemplate 分页_UI设计干货分享：设计语言 - 侧边导航栏/分页
原文作者:罗耀_UI 侧边导航栏.分页.步骤条的绘制方法不管是做设计(感性)还是设计规范(理性),都是仁者见仁智者见智的,都很主观.我是想阐述出自己的想法供大家参考,文章中的数值也不是固定标准,还是 ...

响应式侧边导航栏（刚入门的菜鸟,勿喷...）

纯手写响应式侧边导航栏，废话不多说直接上效果图及代码…

页面结构

页面样式

JS代码…

响应式侧边导航栏（刚入门的菜鸟,勿喷...）相关推荐

最新文章

热门文章