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

来源：互联网发布：知乎青宇是真的吗编辑：程序博客网时间：2024/05/22 02:22

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

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);  }});

0 0