Halo, ketemu lagi dengan saya 🙂 apa kabar nya ? semoga baik yah, amin.
Pada artikel kali ini saya akan berbagi tutorial mengenai Cara Membuat Menu Active Sederhana Pada Website, langsung saja yuk kita praktikan !
1. Seperti biasa buka dulu teks editornya, kemudian ketikan kode HTML berikut.
1 2 3 4 5 6 7 8 9 10 11 |
<div class="container"> <nav class="navecation"> <ul id="navi"> <li><a class="menu active"#">Home</a></li> <li><a class="menu" href="#">Profile</a></li> <li><a class="menu" href="#">Services</a></li> <li><a class="menu" href="#">Contact Us</a></li> <li><a class="menu" href="">Our Blog</a></li> </ul> </nav> </div> |
2. Kalo sudah lanjutkan untuk kode CSS brikut 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 |
body{ font-sze:14px; } .container{ max-width:960px; margin:0 auto; } nav ul li{ list-style:none; float:left; padding-right:20px; } nav ul li a{ text-decoration:none; color:#222; background-color:#ccc; padding:4px 5px; border-radius:3px; } .active{ background-color:#035AAB; color:#fff; } |
3. Setelah itu, ketikan lagi kode javascript berikut.
1 2 3 4 5 6 |
$(document).ready(function(){ $('ul li a').click(function(){ $('li a').removeClass("active"); $(this).addClass("active"); }); }); |
4. Kalo sudah semua diketikan kode nya, jangan lupa disimpan, kemudian buka di browser nya masing-masing dan lihat hasil nya. Selesai
Cukup mudah yah ? sampai disini pertemuan kali ini, semoga bermanfaat, amin.
Selamat mencoba.