Tahukah kamu ada atribut popover di HTML. Kita akan coba membuat menu seperti gambar di atas dengan menggunakan atribut popover yang ada di HTML.
Berikut ini coding HTML-nya:
<button popovertarget=”mainpopover” popovertargetaction=”toggle”>
Menu
</button>
<div id=”mainpopover” popover>
<nav class=”listcontainer”>
<a href=”#”>Home</a>
<div class=”subcontainer” tabindex=”0″>
<a href=”#”>Product <strong> >></strong></a>
<div id=”subpopover” popover>
<div class=”listcontainer”>
<a href=”#”>Computer</a>
<a href=”#”>Monitor</a>
<a href=”#”>Keyboard</a>
<a href=”#”>Mouse</a>
</div>
</div>
</div>
<a href=”#”>About</a>
<a href=”#”>Contact</a>
</nav>
</div>
Pertama kita buat tombol menu dengan diberikan atribut popovertarget=”mainpopover” dan popovertargetaction=”toggle”.
Atribut popovertarget ini akan mengubah elemen menjadi tombol kontrol popover; mengambil ID elemen popover, yakni mainpopover, untuk dikontrol sebagai nilainya.
Sedangkan atribut popovertargetaction itu untuk menentukan aksi yang akan dilakukan pada elemen popover yang dikontrol oleh popover. Nilai ‘toggle’ untuk membuat tombol menu ini mengalihkan popover antara ditampilkan dan disembunyikan. Jika popover disembunyikan, maka akan ditampilkan; jika popover ditampilkan, maka akan disembunyikan.
Ada 2 menu yang di-popover yakni <div id=”mainpopover” popover> dan <div id=”subpopover” popover>.
Untuk memberikan style pada tampilan kedua menu yang di-popover diberikan CSS berikut ini.
body,
html {
font-family: sans-serif;
}
body [popover] {
border: 0px;
width: 120px;
inset: unset;
}
#mainpopover {
left: 5px;
top: 38px;
}
#subpopover {
left: 130px;
top: 86px;
}
.listcontainer,
.subcontainer {
display: flex;
flex-direction: column;
}
a {
flex: 1;
text-decoration: none;
outline: none;
text-align: center;
line-height: 3;
color: black;
}
a:link,
a:visited {
background: rgb(225, 225, 224);
color: black;
}
a:hover,
a:focus {
background: rgb(200, 200, 200);
}
a:active {
background: rgb(1, 131, 253);
color: white;
}
Dan untuk membuat menu popupover muncul atau sembunyi diberikan JavaScript berikut ini.
const subcontainer = document.querySelector(“.subcontainer”);
const mainpopover = document.getElementById(“mainpopover”);
const subpopover = document.getElementById(“subpopover”);
// Events to show/hide the subpopover when the mouse moves over and out
subcontainer.addEventListener(“mouseover”, () => {
subpopover.showPopover();
});
subcontainer.addEventListener(“mouseout”, () => {
if (subpopover.matches(“:popover-open”)) {
subpopover.hidePopover();
}
});
// Event to make the subpopover keyboard-accessible
subcontainer.addEventListener(“focusin”, () => {
subpopover.showPopover();
});
// Events to hide the popover menus when an option is selected in either of them
mainpopover.addEventListener(“click”, () => {
if (subpopover.matches(“:popover-open”)) {
subpopover.hidePopover();
}
if (mainpopover.matches(“:popover-open”)) {
mainpopover.hidePopover();
}
});
subpopover.addEventListener(“click”, () => {
subpopover.hidePopover();
mainpopover.hidePopover();
});
Silakan dicoba. Semoga berhasil.
Happy Coding.
Coding Website 