MEMBUAT HAMBURGER MENU TOGGLE BASIC RESPONSIVE
Mencoba membuat toggle hamburger menu yang kelihatan cukup menarik, ketika di checklist maka hamburger menu akan berubah menjadi tanda silang. Silahkan simak koding CSS nya. Mengikuti tutorialnya secara live cukup rumit untuk mengatur tanda silang menjadi benar benar pas dan presisi. Harus menambah dan mengurangi ukuran angkanya sedikit demi sedikit untuk mencapai hasil maksimal. Untuk penerapannya di template kalian silahkan dicoba coba sendiri jika merasa tertarik.
HTML/CSS
VISUAL STUDIO CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Navbar</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
color: rgb(18, 177, 177);
}
/* Navbar */
nav {
display: flex;
background-color: rgb(226, 220, 210);
justify-content: space-around;
height: 60px;
align-items: center;
}
nav ul {
display: flex;
list-style: none;
width: 40%;
justify-content: space-between;
}
nav ul li a {
text-decoration: none;
font-size: 0.8em;
}
nav ul li a:hover {
color: rgb(112, 233, 166);
}
/* Hamburger Menu */
.menu-toggle {
display: flex;
flex-direction: column;
height: 20px;
justify-content: space-between;
position: relative;
}
.menu-toggle input {
position: absolute;
width: 40px;
height: 28px;
left: -5px;
top: -3px;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.menu-toggle span {
display: block;
width: 28px;
height: 3px;
background-color:rgb(29, 15, 15);
border-radius: 3px;
transition: all 0.1s;
}
/* Hamburger Menu Animation */
.menu-toggle span:nth-child(2) {
transform-origin: 0 0;
}
.menu-toggle span:nth-child(4) {
transform-origin: 0 100%;
}
.menu-toggle input:checked ~ span:nth-child(2) {
background-color: rgb(252, 7, 19);
transform: rotate(45deg) translate(-1px, -1px);
}
.menu-toggle input:checked ~ span:nth-child(4) {
background-color: rgb(252, 7, 19);
transform: rotate(-45deg) translate(-1px, 0);
}
.menu-toggle input:checked ~ span:nth-child(3) {
opacity: 0;
transform: scale(0);
/* Responsive Breakpoint */
/* ukuran tablet */
@media screen and (max-width: 768px) {
nav ul {
width: 50%;
}
}
/* ukuran mobile */
@media screen and (max-width: 576px) {
.menu-toggle {
display: flex;
}
nav ul {
position: absolute;
right: 0;
flex-direction: column;
top: 0;
height: 100vh;
background-color: white;
}
}
</style>
</head>
<body>
<!-- logo -->
<nav>
<div class="logo">
<h2>Logo</h2>
</div>
<!-- hamburger menu -->
<div class="menu-toggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
</div>
</nav>
</body>
</html>
