Terkadang kita pernah melihat sebuah website yang memiliki tombol menu ketika kita menekan tombol tersebut kemudian ada submenu yang menutupi keseluruhan layar dalam arti full screen, lalu bagaimana cara membuatnya??. Kali ini saya akan share cara membuat Full Screen Navigation dengan CSS dan Javascript, langsung saja kita praktekkan bersama Pertama-tama, buka editor teks Anda dan ketikkan kode HTML di bawah ini dan beri nama indeks. html dan simpan kodenya Indeks. html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 <. DOCTYPE html>
<html>
<kepala>
<judul>Membuat Full Layar Navigasi dengan CSS dan Javascript < / judul>
<tautan rel = "stylesheet" href = "style. css" ketik = "text/css">
< / kepala>
<tubuh>
<div id = "myNav" kelas = "hamparan">
<a href = "javascript:void(0)" kelas = "closebtn" onclick = "closeNav()">× / a>
<div kelas = "overlay-content">
<a href = "#">Tentang< / a>
<a href = "#">Layanan< / a>
<a href = "#">Klien< / a>
<a href = "#">Kontak< / a>
< / div>
< / div>
<h2 gaya = "latar belakang. #e67e22;padding. 20px; . #fff; font-family. arial;">Layar penuh Hamparan Nav Contoh< / h2>
<p>klik tombol menu di di bawah maka akan muncul sub menu < / p>
<rentang gaya = "ukuran font. 30px; kursor. pointer" onclick = "openNav()">☰ menu< / span>
< / tubuh>
< / html> Setelah tag penutup ketikkan kode javascript berikut dan simpan 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
fungsi openNav() {
dokumen. getElementById("myNav"). gaya. tampilkan = "blokir";
}
fungsi closeNav() {
dokumen. getElementById("myNav"). gaya. tampilan = "tidak ada";
}
Kemudian setelah itu anda ketikan kode css berikut dan simpan dengan nama style. css sesuai dengan file HTML yang dibuat di atas gaya. css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 tubuh {
font - keluarga. 'Lato', sans - serif;
}
. hamparan {
tinggi. 100%;
lebar. 100%;
tampilan. tidak ada;
posisi. diperbaiki;
z - indeks. 1;
atas. 0;
kiri. 0;
latar belakang - warna. rgb(0,0 ,0);
latar belakang - warna. rgba(0,0 ,0, 0. 9);
}
. hamparan - konten {
posisi. kerabat;
atas. 25%;
lebar. 100%;
teks - sejajarkan. tengah;
margin - atas. 30px;
}
. hamparan a {
pengisian. 8px;
teks - dekorasi. tidak ada;
font - ukuran. 36px;
warna. #818181;
tampilan. blokir;
transisi. 0. 3s;
}
. hamparan a. arahkan kursor, . hamparan a. fokus {
warna. #f1f1f1;
}
. hamparan . closebtn {
posisi. mutlak;
atas. 20 piksel;
benar. 45px;
font - ukuran. 60px;
}
@media layar dan (maks - tinggi. 450 piksel) {
. hamparan a {font - ukuran. 20px}
. hamparan . closebtn {
font - ukuran. 40 piksel;
atas. 15 piksel;
benar. 35px;
}
} Jika Anda mengklik tombol menu, navigasi Layar Penuh akan muncul Sekian tutorial Membuat Navigasi Layar Penuh dengan CSS dan Javascript, semoga bermanfaat. terus koding. D |
Cara menggunakan SCREEN.IN di JavaScript
Pos Terkait
Copyright © 2024 idkuu.com Inc.
