TẠO MENU RESPONSIVE BẰNG HRML5, CSS3, JAVASCRIPT, JQUERY (Create menu responsive )
http://itlovedesign.blogspot.com/2017/08/tao-menu-responsive-bang-hrml5-css3.html
Demo
HTML Code
<html lang="en"><head>
<title>Responsive Navbar</title>
<link href="style.css" rel="stylesheet"></link>
</head>
<body>
<h2 align="center">
Responsive Navbar</h2>
<div class="topnav" id="myTopnav">
<a href="https://www.blogger.com/blogger.g?blogID=8788476066957788052#home">Trang chủ</a>
<a href="https://www.blogger.com/blogger.g?blogID=8788476066957788052#it">Lập trình</a>
<a href="https://www.blogger.com/blogger.g?blogID=8788476066957788052#tut">Thủ thuật</a>
<a href="https://www.blogger.com/blogger.g?blogID=8788476066957788052#contact">Liên hệ</a>
<a class="icon" href="https://www.blogger.com/blogger.g?blogID=8788476066957788052#" id="btnClick" style="font-size: 15px;">☰</a>
</div>
<script src="jquery-3.2.1.js" type="text/javascript"> </script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
CSS
body{
margin:0;
}
.topnav{
overflow: hidden;
background: #333;
}
.topnav a{
float:left;
display: block;
color:white;
text-align: center;
text-decoration: none;
font-size: 17px;
padding :14px 16px;
}
.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{
display: block;
float:right;
}
}
@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;
}
}
JQUERY
var iconClick=$("#btnClick");
var topNav=$("#myTopnav");
iconClick.click(function(){
topNav.toggleClass("responsive");
});
JAVASCRIPT
var iconclick= document.getElementById('btnClick');
iconclick.onclick=function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
//Cộng chuỗi , cộng thêm tên class responsive vào
element chứa
//class topnav. Như vậy sẽ có dạng classA classB ,
nếu ko có khoảng trắng thì classAclassB ko dc
} else {
x.className = "topnav";
}
}
