• Jadilah orang yang sesederhana mungkin yang kamu bisa
  • Jadilah orang yang sesederhana mungkin yang kamu bisa
  • Jadilah orang yang sesederhana mungkin yang kamu bisa
  • Jadilah orang yang sesederhana mungkin yang kamu bisa

Search

Loading...

Membuat Navigation Bar dengan CSS dan Javascript

Kali ini saya mau membagikan tutorial cara membuat Navigation Bar dengan CSS dan Javascript. Navigation Bar itu apa sih? Emm, apa ya? Gw juga nggak tau, itu namanya bener apa nggak aja gw nggak tau. Haha... Tapi yang pasti itu seperti navigasi pada website untuk memudahkan pengunjung ke suatu halaman tertentu. Kira-kira seperti ini screenshoot-nya, pada gambar tersebut halaman yang aktif adalah FAQ.



Navigasi yang akan dibuat hanya dalam bentuk huruf yang nantinya akan aktif (warnanya beda) apabila halamannya dikunjungi (seperti gambar diatas). Sebelum-sebelumnya saya sudah mencoba dengan menggunakan javascript di tutorial-tutorial. Sayangnya apabila dimasukkan URL halaman berbeda, tidak ada perubahan apa-apa. Cuman bisa digunakan di halaman yang sama. 

Sudah minta bantuan dan saran temen-temen yang lebih pengalaman, tapi tidak mendapatkan hasil. Tapi Alhamdulillah berkat bantuan temen saya yang super duper keren aka @mas_pang akhirnya bisa juga dengan menggunakan Javascript. Horeee.... #kembangApi

Berikut bisa code-nya dari HTML, CSS, dan Javascript-nya :

HTML

<div class="submenu">
<ul>
    <li><a class="menuLink active" href="/home">Home</a></li>
    <li><a class="menuLink" href="/freq">FAQ</a></li>
    <li><a class="menuLink" href="/contactus">Contact Us</a></li>
</ul>
</div>

CSS

.active{
    color: orange
}
.submenu ul li{
list-style: none;
display: inline;
font-size: 20px;
padding-right: 20px;
}
.submenu ul li a{
text-decoration: none;
}

Javascript

function getLastURL(){
var pathname = window.location.pathname;
var pathArray = pathname.split('/');
pathArray = pathArray[pathArray.length - 1];
pathArray = pathArray.split('.');
return pathArray[0].toLowerCase();
}
function selectedLink(){
var url = getLastURL();
var elements = $(".menuLink");
$(".menuLink").removeClass("active");
if(url== "home")
elements[0].classList.add("active");
if(url=="freq")
elements[1].classList.add("active");
if(url== "contactus")
elements[2].classList.add("active");
}
window.onload=selectedLink();

Penjelasan sederhana javascript-nya kira-kira pertama baca URL terakhirnya dan dicocokkan dengan URL yang kita definisikan, apabila cocok maka class-nya dijadikan active.

Contohnya bisa diliat JSFiddle, atau download project-nya disini.

Semoga bermanfaat :)


Related Post



8 comments:

  1. Artikel yang sangat Berkualitas dan bermanfaat.. Update terus ya dan salam sukses Gan!
    Kunjungi website kami ya di www.agenpoker.biz

    Agen Poker
    Agen Poker Online
    Bandar Domino Online
    Judi Poker
    Agen Capsa Susun Online
    Agen Poker Domino

    ReplyDelete
  2. Ayo bergabung bersama kami hanya di sbobetpk dan dapatkan bonusnya!!!
    klik di sini Agen Poker

    ReplyDelete

Copyright © 2015 priawadi.com All Rights Reserved.