Live Code Editor Version 2.0

Hướng dẫn tạo Responsive navbar - Giao diện RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
			body {
				margin:0;
			}
			h2 {
				text-align: center;
			}
			.topnav {
			  	overflow: hidden;
			  	background-color: #333;
			}

.topnav a {
			  	float: left;
			  	display: block;
			  	color: #f2f2f2;
			  	text-align: center;
			  	padding: 14px 16px;
			  	text-decoration: none;
			  	font-size: 17px;
			}

.topnav a:hover {
			  	background-color: #ddd;
			  	color: black;
			}

.topnav .icon {
			  	display: none;
			}

@media screen and (max-width: 600px) {
			  	.topnav a:not(:first-child) {
			  		display: none;
			  	}
			  	.topnav a.icon {
				    float: right;
				    display: block;
			  	}
			}

@media screen and (max-width: 600px) {
				.topnav.responsive {
					position: relative;
				}
				.topnav.responsive .icon {
				    position: absolute;
				    right: 0;
				    top: 0;
				 }
			  	.topnav.responsive a {
				    float: none;
				    display: block;
				    text-align: left;
			  	}
			}
        </style>
    </head>
    <body>
		<h2>Freetuts.net hướng dẫn tạo responsive navbar</h2>
		<div class="topnav" id="myTopnav">
		  	<a href="#home">Trang chủ</a>
		  	<a href="#news">Học lập trình online</a>
		  	<a href="#contact">Thủ thuật</a>
		  	<a href="#about">Liên hệ</a>
		  	<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
		</div>