S. Widodo
Assalamualaikum wr. wb
Selamat malam semuanya ketemu lagi sama kami s-widodo.com untuk memberikan sebuah tutorial lagi, dikesempatan yang bahagian ini kami akan memberikan sebuah tutorial lagi tentang membuat sebuah menu navigasi dropown simpe reponzive dengan CSS3 dan sentuhan javascript dan JS dalam pembuatan website ataupun blog menu navigasi adalah fitur yang sangat penting untuk memudahkan penunjung/user untuk mlihat page maupun informasi lainya untuk itu gak usah panjang lebar kita langsung praktekkan..
1. Silahkan buka editor kalian masing-masing dan jangan lupa siapkan segelas kopi :)
2. Sekarang kita buat code cssnya seperti dibawah ini
.menu-wrapper {background:#2A7FB8; min-height:43px; width:100%;color:#ffffff;}
#navigation {
right: 40px;
bottom: 0px;
}
#menu-toggle { z-index:+999999;
display: none;
float: right;
}/* MENU */
#main-menu {
float:left;
font-size: 0;
margin: 12px 0;
}
#main-menu > li { margin:auto;
display: inline-block;
margin-left:2px;
padding: 2px 0;
}
#main-menu > li.parent {
background-image: url(./plus-gray.png);
background-size: 7px 7px;
background-repeat: no-repeat;
background-position: right center;
}
#main-menu > li.parent > a {
padding-left: 14px;
}
#main-menu > li > a {font-family:Arial, Helvetica, sans-serif;font-weight:700;
color: #ffffff;
font-size: 14px;
line-height: 14px;
padding: 5px 9px;
text-decoration:none;
}
#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
}
#main-menu li.active {color: #23dbdb;}
/* > MENU > DROPDOWN */
#main-menu li { list-style:none; margin:auto;
position: relative;
}
ul.sub-menu { /* level 2 */
display: none; margin:auto;
left:0px;
top:22px;
padding:10px 0px 0px 13px;
position: absolute;
width: 180px;
z-index: 9999; list-style:none!important;
}
ul.sub-menu ul.sub-menu { /* level 3+ */
margin-top: -1px;
padding-top: 0;
left:170px;
top: 0px;list-style:none;
}
ul.sub-menu > li:first-child {
border-top: 1px solid #ccc;
}
ul.sub-menu li {list-style:none}
ul.sub-menu > li > a { list-style:none!important; text-decoration:none;
border: 1px solid #cccccc;
border-top: none;
color: #333333;
display: block;
font-size: 12px;
line-height: 15px;
padding: 10px 12px;
}
ul.sub-menu > li > a:hover{ color:#297FB8;}
ul.sub-menu > li > a.active {color:#333;}
ul.sub-menu > li:first-child {
}
ul.sub-menu ul.sub-menu > li:first-child {
border-top: 1px solid #ccc;
}
ul.sub-menu > li:last-child > a {
border-radius: 0 0 2px 2px;
}
ul.sub-menu > li.parent {
background-image:url(arrow.png);
background-size: 5px 9px;
background-repeat: no-repeat;
background-position: 95% center;}
#main-menu li:hover > ul.sub-menu {
display: block; /* show the submenu */
}
3. Untuk pembuatan layout menu navigasinya sudah selesai sekarang kita tinggal panggil dengan html
<div class="menu-wrapper"><a id="menu-toggle" title="Menu">Menu</a> <nav id="navigation"> <ul id="main-menu"> <li><a href="#">Beranda</a></li> <li><a href="#">Profile</a></li> <li class="parent"><a href="#">Dropdown</a> <ul class="sub-menu"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </li> <!-- start: dropdown --> <li class="parent"><a href="#">Dropdown</a> <ul class="sub-menu"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li class="parent"><a href="#">Dropdown Level</a> <ul class="sub-menu"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> </ul></li> </ul> </li> </ul> </nav> </div>
4. Menu Navigasi Dropdown anda sudah selasi bisa di jalankan di browser kalian masing-masing, tapi saat ini menu navigasi yang kita buat belum reponsive untuk membuat sebuah menu reposive kita harus membuat cssnya kembali dengan Media Queries dan taruh code css ini dibawah css yang tadi telah kita buat.
@media all and (max-width: 700px) {#navigation { width:100%;
position: static;
}
#menu-toggle { position:absolute;right:10px; color:#ffffff; font-size:25px; padding:3px 10px 5px 5px;
display: block; cursor:pointer;z-index:+999999;
}
#main-menu { margin:auto;
display: none;
float: none;
}
#main-menu li { list-style:none;
display: block;
margin: 0;
padding: 0;
}
#main-menu > li {
margin-top: -1px;
}
#main-menu > li:first-child {
margin-top: 0;
}
#main-menu > li > a {
background-color: #eeeeee;
border: 1px solid #ccc;
color: #333;
display: block;
font-size: 14px;
padding: 12px !important;
padding: 0;
}
#main-menu li > a:hover {
background-color: #ffffff;
}
#main-menu > li.parent {
background: none !important;
padding: 0;
}
#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
border: 1px solid #eeeeee !important;
color: #333333 !important;
}
ul.sub-menu { background:#ffffff;
display: block;
margin-top: -1px;
position: static;
padding: 0;
width: inherit;
}
ul.sub-menu > li:first-child {
border-top: 1px solid #eeeeee !important;
}
ul.sub-menu > li > a.parent {
background: #ffffff !important;
}
}
5. Sekarang menu anda sudah reponsive tapi belum bisa djalankan untuk membuat menu navigasi, perlu adanya javascript dan js supaya menu navigasi jalan.
anda bisa menggunakan jquery.js untuk pluginnya dan untuk javascript bisa simpan code dibawah ini dan taruh diatas tags </head>
<script type="text/javascript">
$(document).ready(function() {
/* MAIN MENU */
$('#main-menu > li:has(ul.sub-menu)').addClass('parent');
$('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent');
$('#menu-toggle').click(function() {
$('#main-menu').slideToggle(300);
return false;
});
$(window).resize(function() {
if ($(window).width() > 700) {
$('#main-menu').removeAttr('style');
}
});
});
</script>
5. Selesai menu anda sudah berhasil menjadi reponsive
Anda bisa mendapatkan source codenya dibawah ini
Komentar