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 :)