Berhubung ada teman baru saya mau nanya "kenapa menu di templatnya cuma ada beranda", maka itu saya beri tahu Cara Membuat Menu Navigasi Di Blogger - Menu merupakan hal yang wajib ada pada website/blog untuk dapat mempermudah pembaca dalam mendapatkan artikel mereka inginkan. Baik itu diisikan dengan sebuah link yang hanya menuju ke satu artikel ataupun menuju kategori tertentu. Menu ada yang diletakkan dibagian atas atau bawah artikel serta ada juga di sidebar.
Nah kali ini saya akan menjelaskan bagaimana membuat menu navigasi dengan jguery dengan efek slidedown. Ikuti Toturialnya di bawah ini !
KODE HTML
<nav>
<a id="tombolmenu" href="#">Menu</a> (Baris Ke-2)
<ul class="menu"> (Baris Ke-3)
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu Dgn DropDown</a>
<ul class="hidden">
<li><a href="#">Menu Dropdown 1</a></li>
<li><a href="#">Menu Dropdown 1</a></li>
<li><a href="#">Menu Dropdown 1</a></li>
<li><a href="#">Menu Dropdown 1</a></li> </ul>
</li> </ul>
</nav>
Untuk yang saya kasih keterangan Huruf Bold ,Silakan di hapus saja .
Struktur html diatas merupakan struktur dasar dalam membuat menu navigasi dengan efek slideshow.
Tag a (baris 2) dengan id tombol menu nantinya akan berfungsi sebagai tombol yang akan menampilkan menu pada saat layar lebih kecil.
Setiap tag ul diberikan class yang berbeda, pada tag ul yang pertama saya beri class menu (baris 3) sebagai penanda itu merupakan class untuk tag ul utama.
Sedangkan pada tag ul dengan class hidden (baris 10) sebagai backup jika JS tidak berungsi.
css
nav {
font:normal normal 11px/30px Verdana,Geneva,sans-serif;
background-color:#313131;
}
nav,
nav * {
display:block;
}
nav #tombolmenu {
display:none;
}
nav ul,
nav li {
padding:0;
margin:0;
list-style:none;
}
nav ul {
height:30px;
}
nav li {
float:left;
position:relative;
}
nav li a {
display:block;
padding:0 10px;
color:white;
text-decoration:none;
}
nav li:hover > a {
background-color:#1D8FC5;
}
nav li ul {
position:absolute;
background-color:black;
height:auto;
width:160px;
display:none;
}
nav li:hover ul.hidden {
display:block;
}
nav li li {
float:none;
}
@media only screen and (max-width:600px) {
nav #tombolmenu {
display:block;
padding:0 15px;
background-color:black;
text-decoration:none;
}
nav #tombolmenu.active {
background-color:#1D8FC5;
color:white;
}
nav ul {
height:auto;
display:none;
}
nav li {
float:none;
}
nav li ul {
width:100%;
}
}
Dari kode CSS ini, pada kondisi normal, tag a dengan class tombolmenu tidak ditampilkan, serta tag ul class menu tingginya diatur hanya 30px sedangkan dengan class hidden dibuat auto. Dan tag li dibuat float kekiri
Pada saat layar kurang dari 600px maka tag a dengan class tombolmenu ditampilkan. Dan juga tag ul class menu tingginya dibuat auto, serta tag li di hilangkan floatnya.
JAVA SCRIP NYA !!
(function () {
$('nav ul').removeClass('hidden');
$('nav li').hover(function () {
$(this).parent('ul.menu').css('overflow', 'visible');
$(this).children('ul').filter(':not(:animated)').slideDown();
}, function () {
$(this).children('ul').slideUp();
});
$('#tombolmenu').toggle(function () { (Baris 10)
$(this).addClass('active');
$('nav > ul').slideDown();
return false;
}, function () {
$(this).removeClass('active');
$('nav > ul').slideUp();
return false;
}); (Baris 18)
function checkWidth() { (Baris 19)
if ($(window).width() > 600) {
$('nav > ul').css('display', 'block');
} else if ($(window).width() <= 600 && $('#tombolmenu').attr('class') === 'active') {
$('nav > ul').css('display', 'block');
} else if ($(window).width() <= 600 && $('#tombolmenu').attr('class') !== 'active') {
$('nav > ul').css('display', 'none');
}
} (Baris 27)
$(window).resize(checkWidth); (Baris 28)
})();
Pada baris kedua akan mencari tag ul dan menghapus class hidden agar slidedownnya dapat berfungsi.
Pada
baris keempat ketika tag li disorot maka menu ul dengan class menu
overflow cssnya dibuat visible, hal ini karena jika pada tombol menu
dengan layar lebih kecil (600px) ditekan maka overflownya akan menjadi
hidden sehingga jika tidak diberikan fungsi seperti itu maka ketika tag
li dengan sub menu disorot menu yang ada dibawahnya tidak terlihat.
Pada baris ke-10 - 18 merupakan fungsi toggle untuk tombol menu.
Pada
baris ke-19 - 27 fungsi untuk melihat ukuran mengetahui ukuran layar
beserta perbandingan untuk membuat tag dengan class menu muncul atau
tidak.
Pada baris 28 fungsi jQuery resize() yang akan
menjalankan fungsi checkWidth pada baris 19 - 27 jika ukuran layar
dirubah. (jQuery resize() ini akan berjalan jika terjadi perubahan
ukuran layar).
Untuk yang saya tebalin, bisa di ganti sesuka gan.. .
Cara Membuat Menu Navigasi Di Blogger - Semoga Artikel ini dapat membantu sobat blogger, Selamat Mencoba !