Mega menu sendiri adalah sebuah menu yang terdiri dari beberapa bagian-bagian sub menu, biasanya saat hendak kita klik atau dihover hanya menampilkan sebuah sub menu dari item kategori yang dipilih, tetapi apa bila banyak tentu sedikit menggangu dalam mencari bagian kategori yang dicari, maka dari itu jika dibuat mega menu tentu akan cukup membantu, untuk membuatnya cukup sederhana saya menggunakan bootstrap lalu tinggal ditambahkan code sedikit penyesuain ,dimana sahabat bisa dapatkan langsung pada website bootstrap. Oke jangan kemana-mana simak langkah-langkahnya.
Dalam pembuatan mega menu ini bisa memakai class navbar yang tersedia di bootstrap , jadi pada dropdown kita tambahkan beberapa submenu terlebih dahulu atau sub menu kategori dropdownnya, dan ketika kita klik ke menu yang ada dropdown kategorinya, dia akan muncul mega menu yang dibuat, seperti itu, oke langsung saja perhatikan code berikut .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Membuat Mega Menu Dengan Bootstrap 4
kita siapkan template dari bootstrap dahulu lalu selanjutnya copy class navbar Bootstrap seperti dibawah ini:
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
newsPopuler [current]
newsFood
newsSports
Football Boys
Ultimatch Max Football
Jersey Football
Jersey Football Home
Jersey Football Away
Jersey Football 2nd
Jersey Football 3rd
Games Items
Item Game Boy
Item Game Girl
Item Game Sport
Item Game Adventure
Football Seri
Item Football Seri 1
Item Football Seri 2
Item Football Seri 3
Item Football Seri 4
Disabled
Search
Previous
Next
Dan jangan lupa tambahkan style CSS untuk memerikan style pada bagian mega menu seperti code dibawah ini
1
2
3
4
5
6
.mega-menu{width: 900px; overflow: hidden; padding: 10px;}
.mega-menu a{text-decoration: none; color: cadetblue;}
.mega-menu .sub-menu-heading{ color: darkcyan;}
@media[max-width:500px]{
.mega-menu{width: 300px;}
}
Jadi code diatas terdapat dropdown yang saya buat ada col-md-3 nah itu sebagai mega menu yang ditampilkan, untuk slider disini saya buat hanya sebagai tambahan saja, jika sahabat tidak ingin menggunakan tidak perlu dicantumkan. Baiklah jika sudah coba buka pada browser masing-masing apakah sudah seperti pada tampilan berikut ini.
Demikian saya rasa cukup sampai disini dalam belajar tentang Cara Membuat Mega Menu Dengan Bootstrap, sampai jumpa pada artikel berikutnya.