Cara Membuat Full Screen Overlay Navigation
Hanya orang-orang dengan hati damailah yang boleh menerima kejadian buruk dengan lega. Oke di kesempatan kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Membangun Full Screen Overlay Navigation.
Yang sering kita peroleh ialah fitur navigation yang muncul dari samping atau pun disebut sidenav, tapi hanya seperempat dari halaman web browser tersebut. Nah kali ini kita akan mencoba Cara Membangun Full Screen Overlay Navigation.
Seperti lazim, pertama-tama siapkan file index.html nya.
Kemudian, isi di bagian <body> tag-tag HTML seperti berikut.
<div id=myNav class=overlay>
<a href=javascript:void(0) class=closebtn onclick=closeNav()>times;</a>
<div class=overlay-content>
<a href=#>About</a>
<a href=#>Services</a>
<a href=#>Clients</a>
<a href=#>Contact</a>
</div>
</div>
<span style=font-size:30px;cursor:pointer onclick=openNav()>☰ open</span>
Setelah itu, isi bagi CSS nya.
body {
margin: 0;
font-family: 'Lato', sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}Dan yang terakhir, bagian Javascript nya.
<script>
function openNav() {
document.getElementById(myNav).style.width = 100%;
}
function closeNav() {
document.getElementById(myNav).style.width = 0%;
}
</script>
Bagaimana teman-teman? Lumayan gampang bukan?
Demikianlah bagi panduan kali ini mengenai bagaimana Cara Membangun Full Screen Overlay Navigation.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
