在构建移动Web页面时，侧边导航是常见的布局之一。本文将介绍使用CSS实现手机端侧边导航的方法。

首先，我们需要定义一个容器作为侧边导航的父元素，设置其position为fixed，同时定义宽度和高度。然后设置其左偏移量为负的宽度，使其隐藏在屏幕的左侧。

nav {
	position: fixed;
	left: -200px;
	top: 0;
	width: 200px;
	height: 100%;
	background-color: #fff;
}

接下来，我们需要定义一个按钮，当点击时可以展开或收起侧边导航。这里我们使用伪元素:before和:after来实现按钮的样式，同时设置其position为fixed，以便随时可见。

button {
	position: fixed;
	top: 20px;
	left: 20px;
	width: 30px;
	height: 30px;
	background-color: #fff;
	border: none;
	cursor: pointer;
}
button:before,
button:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	margin-top: -1px;
	margin-left: -10px;
	background-color: #000;
	transition: all 0.2s ease;
}
button:before {
	transform: translateY(-6px);
}
button:after {
	transform: translateY(4px);
}

接下来，我们需要通过设置按钮的点击事件来实现导航菜单的展开和收起。我们使用JavaScript来为按钮添加事件监听，并在事件处理函数中设置侧边导航的left属性为0或负的宽度。

var nav = document.querySelector("nav");
var button = document.querySelector("button");
button.addEventListener("click", function() {
	if (nav.style.left === "0px") {
nav.style.left = "-" + nav.offsetWidth + "px";
	} else {
nav.style.left = "0px";
	}
});

最后，我们可以在侧边导航中添加列表及链接等元素。需要注意的是，为了适应不同的屏幕宽度，我们应当设置导航菜单中元素的宽度为百分比。

nav ul {
	padding: 0;
	margin: 0;
}
nav li {
	list-style: none;
	margin: 10px 0;
}
nav a {
	display: block;
	width: 100%;
	padding: 10px;
	text-decoration: none;
	color: #000;
}

通过以上步骤，我们就可以实现一个简单的网页侧边导航菜单。如需更多样式和功能，可以进一步进行优化。