html5学习之侧边栏实现

打算学习一些html5的知识，暂时不使用jquery.js，计划做一个侧边栏，侧边栏可以隐藏，点击侧边栏中的菜单改变content中的内容。

---------------------------------
    header
---------------------------------
|           |
|sidebar    |content
|           |
|           |

为适应移动设备，要进行响应式网站设计，主要两个点：
+ 在head中添加meta viewport
+ 在css中使用媒体查询，@media

1. 设置布局

<div class="top"></div>
<div class="sidebar"></div>
<div class="content"></div>

使用absolute方式进行布局

.top {
    position: absolute;
    left: 0; right: 0;
    height: 72px;
}
.sidebar {
    position: absolute;
    left: 0; top: 72px; bottom: 0;
    width: 178px;
}
.content {
    position: absolute;
    left:178px; top: 72px; right: 0; bottom: 0;
}

2. 隐藏/显示侧边栏

设置display为none或block可以控制元素的隐藏或显示。不使用js控制display只使用css实现的话可以使用label+input(checkbox)。

<div class="top">
    <label id="sideBarControl" for="sideToggle">显示/隐藏菜单</label>
</div>
<input type="checkbox" id="sideToggle">
<div class="sidebar">
    <p>菜单内容</p>
</div>
<div class="content">
</div>

点击#sideBarControl相当于点击#sideToggle，可以根据#sideToggle:checked控制display。

#sideToggle {
    display: none;
}
.sidebar {
    display: none;
}
.content {
    position: absolute;
    left:0; top: 72px; right: 0; bottom: 0;
}
#sideToggle:checked + .sidebar{display: block}
#sideToggle:checked ~ .content{left: 178px}

3. 添加菜单内容

使用ul li列表显示菜单内容。

<div class="sidebar">
    <p>菜单内容</p>
    <ul class="nav">
        <li><a id="_1" href="#">Menu1</a> </li>
        <li><a id="_2" href="#">Menu2</a> </li>
        <li><a id="_3" href="#">Menu3</a> </li>
    </ul>
</div>

取消li前的点，为li添加边框，取消标签a的下划线，防止相邻的边框重叠使用:last-child进行设置

.nav {
    list-style: none;
    position: absolute;
    left: 0;right: 0;
    padding: 0;
}
.nav a:link{color: #000}
.nav a:visited {color: #000}
.nav a:hover {
    color: #aaaaaa;
}
.nav li {
    border: solid 1px;
    padding: 5px 0 5px 0;
    border-bottom-width: 0px;
}
/*选择最后一个元素*/
.nav li:last-child {border-bottom-width: 1px}
.nav a {
    text-decoration: none;
}

4. 为菜单列表添加事件

不使用jquery的话，可以使用document.querySelectorAll选择元素，使用addEventListener添加事件。

var items = document.querySelectorAll(".nav li");
//可以使用[].forEach.call进行遍历
[].forEach.call(items, function (item) {
    //添加click事件
    item.addEventListener("click", function() {
        var content = document.querySelector(".content");
        content.innerHTML = this.textContent;
    });
});

5. 设置active菜单

为被点击的菜单的class添加active项，使用this.parentNode.children可以获得所有兄弟元素。

var items = document.querySelectorAll(".nav li");
// 可以使用Array.prototype.forEach.call进行遍历
[].forEach.call(items, function (item) {
//  添加click事件
    item.addEventListener("click", function() {
//      遍历所有兄弟节点this.parentNode.children
        Array.prototype.forEach.call(this.parentNode.children, function (child) {
//          删除元素的某个class
            child.classList.remove("active");
        })
        this.classList.add("active");
        var content = document.querySelector(".content");
        content.innerHTML = this.textContent;
    });
});

修改active菜单的背景

li.active {
    background-color: #f8f8f8;
    border-right-width: 0px;
}

6. 设置默认选中菜单

可以通过模拟鼠标点击设置默认的选择菜单

document.querySelector("#_1").click(); // 模拟鼠标点击

7. 设置viewport

在head中添加如下代码：

<meta name="viewport" content="width=device-width,user-scalable=no" />

8. 使用媒体查询

@media only screen and (min-width: 992px) {
  .top {
    height: 72px; }

  .sidebar {
    top: 72px;
    width: 178px; }

  .content {
    top: 72px; }

  #sideToggle:checked ~ .content {
    left: 178px; } }
@media only screen and (max-width: 991px) {
  .top {
    height: 10%; }

  .sidebar {
    top: 10%;
    width: 30%; }

  .content {
    top: 10%; }

  #sideToggle:checked ~ .content {
    left: 30%; } }