html5学习之侧边栏实现

设置布局

隐藏显示侧边栏

添加菜单内容

为菜单列表添加事件

设置active菜单

设置默认选中菜单

设置viewport

使用媒体查询

打算学习一些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%; } }