页面的head部分，需远程调用一个图标样式库font-awesome.min.css，并引入本地样式文件style.css，代码如下：

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，多个菜单的li标签放入一个div容器里面，代码如下：

<header>
	<div id="toggle">
		<span>
			<i class="fa fa-bars"></i> 我的青春修炼手册
		</span>
	</div>
	<div id="menu">
		<ul class="unstyled-list">
			<li> 
				<span class="book"></span> 
				<i class="fa fa-book"></i> 
				知识强化生命力
			</li>
			<li>
				<span class="movies"></span> 
				<i class="fa fa-music"></i> 
				音乐缓解了压力
			</li>
			<li>
				<span class="computer"></span> 
				<i class="fa fa-television"></i> 
				电脑也是生产力
			</li>
			<li>
				<span class="home"></span> 
				<i class="fa fa-tint"></i> 
				水滴石穿靠毅力
			</li>
			<li>
				<span class="beauty"></span> 
				<i class="fa fa-heartbeat"></i> 
				心理素质算能力
			</li>
			<li>
				<span class="clothing"></span> 
				<i class="fa fa-shopping-bag"></i> 
				犒劳自己要给力
			</li>
			<li>
				<span class="sport"></span> 
				<i class="fa fa-futbol-o"></i> 
				户外运动需卖力
			</li>
		</ul>
	</div>
</header>

页面的底部，需远程调用jQuery库，并引入一个JS样式文件，用来响应点击事件，代码如下：

<script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>