Pada kesempatan ini saya mau sharing cara membuat mega menu untuk toko online dengan Bootstrap. Tidak bisa kita pungkiri penggunaan mega menu pada toko online sekarang ini banyak digunakan, selain karena menarik tapi juga pembuatannya tidak susah. Salah satu framework yang bisa kita gunakan adalah Bootstrap.
Mari kita mulai untuk membuatnya.
- Kita buat file html dengan nama Menu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title></title>
<style type="text/css">
.... disini kode CSS
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
.... disini kode javascript
</script>
</body>
</html>
Kemudian kita tambahakn code untuk tampilan
<div class="container" style="margin-top: 30px;">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Toko Asep</a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
<a href="#" style="width:100px;" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th-list"></span> Koleksi</a>
<ul class="dropdown-menu mega-dropdown-menu row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header" style="text-align: center;">Koleksi Terbaru</li>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=Koleksi+Baru" class="img-responsive" alt="product 1"></a>
<h4><small>Baju Musim Panas</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Simpan Belanjaan</button>
</div>
<!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/ef5e55/f5f5f5/&text=Koleksi+Baru" class="img-responsive" alt="product 2"></a>
<h4><small>Baju Musim Dingin</small></h4>
<button class="btn btn-primary" type="button">9,99 €</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Simpan Belanjaan</button>
</div>
<!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=Koleksi+Baru" class="img-responsive" alt="product 3"></a>
<h4><small>Baju Pesta</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Simpan Belanjaan</button>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
</div>
<!-- /.carousel -->
<li class="divider"></li>
<li><a href="#">Tampilkan Semua Koleksi<span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Pakaian</li>
<li><a href="#">Anak Laki-Laki</a></li>
<li><a href="#">Anak Permepuan</a></li>
<li><a href="#">Perempuan Dewasa</a></li>
<li><a href="#">Laki-Laki Dewasa</a></li>
<li class="divider"></li>
<li class="dropdown-header">Topi</li>
<li><a href="#">Eiger</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Jaket</li>
<li><a href="#">Eiger</a></li>
<li><a href="#">Avtect</a></li>
<li><a href="#">Bilabbong</a></li>
<li class="divider"></li>
<li class="dropdown-header">Sandal</li>
<li><a href="#">Eiger</a></li>
<li><a href="#">Avtect</a></li>
<li><a href="#">Bilabbong</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Accessories</li>
<li><a href="#">Tambang</a></li>
<li><a href="#">Handuk</a></li>
<li><a href="#">Senter</a></li>
<li class="divider"></li>
<li class="dropdown-header">Informasi</li>
<form class="form" role="form">
<div class="form-group">
<label class="sr-only" for="email">MasukanEmail</label>
<input type="email" class="form-control" id="email" placeholder="Masukan Email">
</div>
<button type="submit" class="btn btn-primary btn-block">Kirim</button>
</form>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<h1 class="c-text"> ini untuk isi web </h1>
tambahkan css pada bagian head
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', 'sans-serif';
background: #999;
}
h1,
.h1 {
font-size: 36px;
text-align: center;
font-size: 5em;
color: #404041;
}
.navbar-nav>li>.dropdown-menu {
margin-top: 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.navbar-default .navbar-nav>li>a {
width: 200px;
font-weight: bold;
}
.mega-dropdown {
position: static !important;
width: 100%;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu:before {
content: "";
border-bottom: 15px solid #fff;
border-right: 17px solid transparent;
border-left: 17px solid transparent;
position: absolute;
top: -15px;
left: 145px;
z-index: 10;
}
.mega-dropdown-menu:after {
content: "";
border-bottom: 17px solid #ccc;
border-right: 19px solid transparent;
border-left: 19px solid transparent;
position: absolute;
top: -17px;
left: 145px;
z-index: 8;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #999;
white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
color: #444;
background-color: #f5f5f5;
}
.mega-dropdown-menu .dropdown-header {
color: #428bca;
font-size: 18px;
font-weight: bold;
}
.mega-dropdown-menu form {
margin: 3px 20px;
}
.mega-dropdown-menu .form-group {
margin-bottom: 3px;
}
</style>
hasilnya sbb:
Ketika kita klik menu koleksi maka muncul seperti gambar dibawah ini :
Kode lengkapnya silahkan download di bawah ini :
Baca Juga :
Aplikasi Inventori Dengan Java dan MySql
Jquery Fullcalendar Integrasi Dengan Bootstrap PHP dan MariaDB
Membuat Form Login Unik Dengan HTML dan CSS
Sistem Informasi Akademik atau Pondok Pesantren Dengan PHP dan MySql
Klik Tombol Dibawah Untuk Memunculkan Link Download :
Tutorial Cara Download File :
Jika ada pertanyaan silahkan input pada kolom komentar, terima kasih...
EmoticonEmoticon