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
Membuat Full Layar Navigasi dengan CSS dan Javascript
× / a>
Tentang
Layanan
Klien
Kontak
Layar penuh Hamparan Nav Contoh
klik tombol menu di di bawah maka akan muncul sub menu
☰ menu
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