转载

响应式布局入门之——侧栏菜单

一直以来响应式布局都是利用的bootstrap来做，但是在手机上浏览的话，bootstrap样式文件还是有点大 118k，如果再用上一些js库的话，上个几百k是轻轻松松了，这样一来用移动流量的话真的吃不消啊。所以痛定思痛，还是用原生的来写吧，原生css样式，js最多用的zepto, 当然这篇文章我还是用的原生js. 做的这个例子还是比较简单的，毕竟是入门级别的嘛

效果篇

pc,mac端

pad端

其实pad端和pc端很难区分，pad的分辨率还是比较高的啊

手机端

点击菜单前和点击菜单后的效果

代码篇

html代码

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title></title>     <link href="main.css" rel="stylesheet" /> </head> <body>     <div class="header">         <p class="title">响应式布局之侧栏菜单</p>         <button class="collapsed" type="button">             <span class="icon-bar"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>         </button>     </div>      <div class="nav-large">         <ul>             <li><a href="">菜单1</a></li>             <li><a href="">菜单2</a></li>             <li><a href="">菜单3</a></li>             <li><a href="">菜单4</a></li>         </ul>     </div>      <div class="nav-small">         <ul>             <li><a href="">菜单1</a></li>             <li><a href="">菜单2</a></li>             <li><a href="">菜单3</a></li>             <li><a href="">菜单4</a></li>         </ul>     </div>      <div class="content">         <p>             据了解，2015年以来，我国已多次公开强调落实带薪休假。2015年3月5日，国务院总理李克强在政府工作报告中指出，             “要深化服务业改革开放，落实财税、土地、价格等支持政策以及带薪休假等制度。”2015年4月初，中共中央、国务院             发布了《关于构建和谐劳动关系的意见》，明确提出“切实保障职工休息休假的权利，完善并落实国家关于职工工作时间、             全国年节及纪念日假期、带薪年休假等规定”。同年4月24日，人力资源和社会保障部新闻发言人李忠在2015年一季度新闻             发布会上表示，带薪年休假制度施行7年多以来，仍有部分用人单位和有雇工的个体工商户没有认真执行带薪年休假的法律规定，             职工休息休假权益有待进一步落实。下一步要抓好这项工作的落实。         </p>     </div>      <script type="text/javascript" src="index.js"></script> </body> </html>

上段html页面中包含的主要关键点：

一个典型的针对移动端优化的站点包含:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

width属性控制视口的宽度。可以像width=600这样设为确切的像素数，或者设为device-width这一特殊值来指代比例为100%时屏幕宽度的CSS像素数值。（相应有height及device-height属性，可能对包含基于视口高度调整大小及位置的元素的页面有用。）initial-scale属性控制页面最初加载时的缩放等级,一般初始化为1.

2.一个只在移动浏览器下显示的按钮

        <button class="collapsed" type="button">             <span class="icon-bar"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>         </button>

3.一个在pc大分辨率下面展示的导航

    <div class="nav-large">         <ul>             <li><a href="">菜单1</a></li>             <li><a href="">菜单2</a></li>             <li><a href="">菜单3</a></li>             <li><a href="">菜单4</a></li>         </ul>     </div>

4.一个在移动分辨率下展示的导航

    <div class="nav-small">         <ul>             <li><a href="">菜单1</a></li>             <li><a href="">菜单2</a></li>             <li><a href="">菜单3</a></li>             <li><a href="">菜单4</a></li>         </ul>     </div>

大家可能会问，为什么需要两段导航代码呢，不是可以写一段pc和移动公用么，一开始我也是这样写的，但是发现pc端缩窄浏览器的时候，分辨率相当于移动端，然后用按钮控制了导航隐藏之后，再扩张浏览器，导航还是隐藏的。只要不去拉缩网页就没问题，但是为了体验的完美，牺牲下代码共用性吧，写了两段导航html.

css代码

body {     margin: 0; }  p {     margin: 0; }  .title {     display: inline-block; }  .nav-large {     width: 200px;     float: left; }  .nav-small {     width: 100px;     position: absolute;     background-color: white;     display: none; }  @media screen and (min-width:768px) {     .header {         height: 60px;         background-color: #FF7F50;     }      .nav-large {         display: block;     }      .nav-small {         display: none;     }      .collapsed {         display: none;     } }  @media screen and (max-width: 767px) {     .header {         text-align: center;         height: 40px;         background-color: #FF7F50;     }      .nav-large {         display: none;     }      .collapsed {         width: 40px;         height: 40px;         float: left;         background-color: transparent;         background-image: none;         border: 1px solid transparent;         cursor: pointer;         outline:none;     }          .collapsed:active {             border: 1px solid transparent;         }          .collapsed .icon-bar {             display: block;             width: 22px;             height: 2px;             border-radius: 1px;             background-color: #563d7c;         }              .collapsed .icon-bar + .icon-bar {                 margin-top: 4px;             } }

css代码还是比较容易理解的，主要靠@media screen来控制响应式布局，使用的方式可以自行google或baidu, 一般来讲只要对768px进行一个区分，大于768为pc或pad模式，小于768为移动端模式。当然你还可以区分的更细，一般768px的区分已经可以满足大部分的需求

javascript代码

document.getElementsByClassName("collapsed")[0].onclick = function () {     var nav = document.getElementsByClassName("nav-small")[0];     if (nav.style.display == "block") {         nav.style.display = "none";     } else {         nav.style.display = "block";     } }

javascript代码主要是用于控制在移动环境下显示的导航按钮了，触发导航显示或者隐藏，还是能很简单的理解的