Hamberger button គឺប្រើជាមួយ mobile ដើម្បីបង្ហាញ menu នៃផ្សេងៗនៅក្នុងវែបសាយ ។ Hamberger button ខាងក្រោមនេះវាមានលក្ខណ animation នៅពេលយើងចុចវា
File HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>simple project</title>
</head>
<body>
<section id="nav2">
<div class="container mx-auto max-w-full bg-emerald-300 py-6">
<nav class="mx-20 flex items-center justify-between text-white text-xl">
<!-- Logo -->
<img src="images/logo.svg" alt="" class="w-14 h-14 rounded-full">
<!-- Computer menu -->
<div class="hidden md:flex md:space-x-6">
<div class="group">
<a href="#">Home</a>
<!-- Line under -->
<div class="mx-2 group-hover:border-b group-hover:border-white"></div>
</div>
<div class="group">
<a href="#">News</a>
<!-- Line under -->
<div class="mx-2 group-hover:border-b group-hover:border-white"></div>
</div>
</div>
<!-- Hamberger btn -->
<div class="md:hidden">
<button
id="menu-btn"
type="button"
class=" hamberger block focus:outline-none md:hidden"><!--option .open-->
<span class="hamberger-top"></span>
<span class="hamberger-middle"></span>
<span class="hamberger-buttom"></span>
</button>
</div>
</nav>
<!--@todo Mobile menu -->
</div>
</section>
</body>
<script src="script/javaScript.js"></script>
</html>
File CSS
@tailwind utilities;
#hero{
background-image: url(/image/kep1.png);
background-repeat: no-repeat;
background-size: cover;
}
@media (max-width: 576px){
#hero{
background-image: url(/image/kep.jpg);
background-position: center;
}
}
/* Hamberger menu */
.hamberger{
position: relative;
cursor: pointer;
width: 24px;
height: 24px;
transition: all 0.5s;
}
.hamberger-top,
.hamberger-middle,
.hamberger-buttom {
position: absolute;
width: 24px;
height: 2px;
top: 0;
left: 0;
background-color: #fff;
transform: rotate(0);
transition: all 0.5s;
}
.hamberger-middle{
transform: translateY(7px);
}
.hamberger-buttom{
transform: translateY(14px);
}
/*menu open */
.open{
transform: rotate(90deg);
}
.open .hamberger-top{
transform: rotate(45deg) translateY(6px) translateX(6px);
}
.open .hamberger-middle{
display: none;
}
.open .hamberger-buttom{
transform: rotate(-45deg) translateY(6px) translateX(-6px);
}
File Javascript
const btn = document.getElementById('menu-btn')
const menu = document.getElementById('menu')
btn.addEventListener('click', togle)
function togle(){
btn.classList.toggle('open')
menu.classList.toggle('flex')
menu.classList.toggle('hidden')
}
0 Comments