Edisi tutorial kali ini akan membahas tentang tutorial pembuatan menu horizontal yang ketika di-hover akan melakukan aksi dropdown.
Tidak seperti pada tutorial-tutorial sebelumnya, dalam pembuatan navigasi menu menggunakan framework front-end , yaitu : Bootstrap. Pada edisi tutorial kali ini, kita murni akan melakukannya dengan css dan javascript.
Langkah-langkah pembuatan menu horizontal dropdown menu hover
Buat file style.css yang berisikan kode berikut :
ol, ul, li,nav, menu
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
menu, nav{
display: block;
}
ol, ul {
list-style: none;
}
nav {
background: -webkit-gradient(linear, center top, center bottom, from(#E91E63), to(#E91E63));
background-image: linear-gradient(#fff, #E91E63);
/* border-radius: 6px; */
box-shadow: 0px 0px 4px 2px #E91E63;
padding: 0 10px;
position: relative;
}
.menu li {
float: left;
position: relative;
}
.menu li a {
color: #444;
display: block;
font-size: 14px;
line-height: 20px;
padding: 6px 12px;
margin: 8px 8px;
vertical-align: middle;
text-decoration: none;
}
.menu li a:hover {
background: -webkit-gradient(linear, center top, center bottom, from(#E91E63), to(#45091d));
background-image: linear-gradient(#f48eb1, #E91E63);
border-radius: 12px;
box-shadow: 0px 0px 4px 2px #E91E63;
color: #F55;
}
/* Dropdown styles */
.menu ul {
position: absolute;
left: -9999px;
list-style: none;
opacity: 0;
transition: opacity 1s ease;
}
.menu ul li {
float: none;
}
.menu ul a {
white-space: nowrap;
}
/* Displays the dropdown on hover and moves back into position */
.menu li:hover ul {
background: rgba(0, 255, 0,0.7);
border-radius: 0 0 6px 6px;
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
left: 5px;
opacity: 1;
}
/* Persistant Hover State */
.menu li:hover a {
background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));
background-image: linear-gradient(#ccc, #ededed);
border-radius: 12px;
box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
color: #222;
}
.menu li:hover ul a {
background: none;
border-radius: 0;
box-shadow: none;
}
.menu li:hover ul li a:hover {
background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff));
background-image: linear-gradient(#ededed, #fff);
border-radius: 12px;
box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);
}
Pada scipt html anda, masukkan kode berikut , diantara tag <head>...</head> :
<link href="assets/css/style.css" media="screen" rel="stylesheet" type="text/css" />
<link href="assets/css/iconic.css" media="screen" rel="stylesheet" type="text/css" />
<script src="assets/js/prefix-free.js"></script>
Pada script diatas, terdapat file iconic.css dan prefix-free.js. File tersebut tersedia pada bagian link download paling bawah dari artikel ini.
Tujuan dari file iconic.css untuk memberikan icon yang menarik disambil label menu yang kita beri nama. Icon ini pada dasarnya adalah jenis font, oleh karena itu, ketika anda download source code sumber, nantinya terdapat folder yang bernama font. Sedangkan file prefix-free.js adalah file yang memberikan efek ketika menu dihover akan muncul aksi dropdown dsb.
Masih dalam kode HTML anda, masukkan script berikut untuk menciptakan navigation bar berserta menu dan submenunya :
<div class="container">
<div class="row">
<div class="col-md-12">
<nav>
<ul class="menu">
<li><a href="#"><span class="iconic home"></span> Home</a></li>
<li><a href="#"><span class="iconic plus-alt"></span> About</a>
<ul>
<li><a href="#">Company History</a></li>
<li><a href="#">Meet the team</a></li>
</ul>
</li>
<li><a href="#"><span class="iconic magnifying-glass"></span> Programming</a>
<ul>
<li><a href="#">Web Dev</a></li>
<li><a href="#">Android Programming</a></li>
<li><a href="#">IOS Dev</a></li>
</ul>
</li>
<li><a href="#"><span class="iconic map-pin"></span> Templates</a>
<ul>
<li><a href="#">Blogger Template</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Pure HTML+CSS+JS</a></li>
</ul>
</li>
<li><a href="#"><span class="iconic mail"></span> Contact</a>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Directions</a></li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</nav>
</div>
</div>
</div>
Lakukan modifikasi menu dan submenu pada bagian <ul>...</ul> dan <li>....</li>.
