响应式网页的导航分享一下

html代码如下：

<div class="navbar">
				<input type="checkbox" id="nav-toggle" class="nav-toggle"/>
				<label for="nav-toggle">
					<span class="mobile-menu"></span>
				</label>
				<ul class="nav-list">
					<li><a href="/">首页</a></li>
					<li><a href="/riji">小文日记</a></li>
					<li><a href="/wenzhai">优秀文摘</a></li>
					<li><a href="/dashi">投资大师</a></li>
					<li><a href="/kezhuanzhai">可转债</a></li>
				</ul>
</div>		

css代码如下：

/*响应式手机菜单*/
.navbar{position: fixed;right:10px;top:10px;}
.navbar{display: block; float:right;background-color: #1369BF;width: 36px;height: 30px;line-height: 0;text-align: center;border:0px solid red}
.navbar .nav-list{z-index: 0;display: none;margin-left: 0px;}
.navbar .nav-list li{list-style: none;margin-left: 0px;}
.navbar .nav-list a{color: white; line-height: 30px;text-decoration: none; }
.navbar .nav-list a:hover{color: #1ABC9C;}
.navbar input:checked~.nav-list {position: fixed;right:10px;top:0px;padding:5px;display: block;background-color: #1369BF;z-index: 0;margin-top: 41px;text-align: left;}
.navbar input:checked~.nav-list li{clear: both;background-color: #1369BF;}
.navbar label{display: block;z-index: 4;opacity:0.9;}
.navbar label[for="nav-toggle"] {display: block;float: right;width: 36px; height: 30px; z-index: 2;cursor: pointer;}
.mobile-menu {width: 22px;height:3px;border-top: 3px solid #FFF;border-bottom: 3px solid #FFF;background-color: #FFF;padding: 3px 0;background-clip:content-box;display:inline-block;margin-top:7px}
.navbar .nav-toggle{display: none;}
}

觉得还不错，大家试试。
喜欢低风险投资的朋友，可以学学可转债