|
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> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </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.
terimakasih.
