Membuat slide menu dengan bootstrap
|
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 <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <title>Membuat Mega Menu Dengan Bootstrap 4</title> </head>
<body>
</body> </html> 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 <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link text-white" href="#">newsPopuler <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link text-white" href="#">newsFood</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> newsSports </a> <div class="dropdown-menu mega-menu" aria-labelledby="navbarDropdown"> <div class="row"> <div class="col-md-3"> <img src="football2.jpg" alt="football" class="img-fluid"> <h4 style="color: orangered;text-align: center;">Football Boys</h4> <p>Ultimatch Max Football</p> </div> <div class="col-md-3"> <p><strong class="sub-menu-heading">Jersey Football</strong></p> <p><a href="#">Jersey Football Home</a></p> <p><a href="#">Jersey Football Away</a></p> <p><a href="#">Jersey Football 2nd</a></p> <p><a href="#">Jersey Football 3rd</a></p> </div> <div class="col-md-3"> <p><strong class="sub-menu-heading">Games Items</strong></p> <p><a href="#">Item Game Boy</a></p> <p><a href="#">Item Game Girl</a></p> <p><a href="#">Item Game Sport</a></p> <p><a href="#">Item Game Adventure</a></p> </div> <div class="col-md-3"> <p><strong class="sub-menu-heading">Football Seri</strong></p> <p><a href="#">Item Football Seri 1</a></p> <p><a href="#">Item Football Seri 2</a></p> <p><a href="#">Item Football Seri 3</a></p> <p><a href="#">Item Football Seri 4</a></p> </div> </div> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-warning my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="image-2.jpeg" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="image-5.jpeg" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="image-1.jpeg" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> 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. Apa itu Carousel di bootstrap?Seperti yang kita ketahui, Bootstrap Carousel adalah sebuah slideshow yang secara bergantian menampilkan sebuah gambar.
Apa itu menu slider?Menu slide atau lebih populer dengan sebutan sliding menu merupakan menu yang ditampilkan dengan efek slide dari arah samping.
|
