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

最新推荐文章于 2021-12-23 13:14:17 发布

勤学daydayup

最新推荐文章于 2021-12-23 13:14:17 发布

阅读量5.8k

点赞数 4

分类专栏：响应式文章标签：响应式导航

本文链接：https://blog.csdn.net/hncu1990/article/details/53057533

版权

响应式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

});

勤学daydayup

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
响应式侧边导航栏（刚入门的菜鸟,勿喷...）

纯手写响应式侧边导航栏，废话不多说直接上效果图及代码…ps:markdown也是第一次使用，排版就不计较了页面结构<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
复制链接

扫一扫