Html
    Css
    Js

    
                        
body {
	margin:0;
}
ul.topnav {
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
	background-color:#333;
}
ul.topnav li {
	float:left;
}
ul.topnav li a {
	display:inline-block;
	color:#f2f2f2;
	text-align:center;
	padding:14px 16px;
	text-decoration:none;
	transition:0.3s;
	font-size:17px;
}
ul.topnav li a:hover {
	background-color:#111;
}
ul.topnav li.icon {
	display:none;
}
@media screen and (max-width:680px) {
	ul.topnav li:not(:first-child) {
	display:none;
}
ul.topnav li.icon {
	float:right;
	display:inline-block;
}
}@media screen and (max-width:680px) {
	ul.topnav.responsive {
	position:relative;
}
ul.topnav.responsive li.icon {
	position:absolute;
	right:0;
	top:0;
}
ul.topnav.responsive li {
	float:none;
	display:inline;
}
ul.topnav.responsive li a {
	display:block;
	text-align:left;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

响应式头部导航

0