Membuat Navigation Bar dengan CSS dan Javascript - Hello friend Panduan SEO | Panduan SEO terlengkap tuk pemula yang ingin mulai belajar SEO. Panduan gratis ini meningkatkan pengunjung ke situs anda. On this article you read this time with the title Membuat Navigation Bar dengan CSS dan Javascript , We have prepared this article well for you to read and take the information in it. hopefully the contents of the post Articles CSS, Articles Javascript, That we write this you can understand. okay, happy reading.

Title : Membuat Navigation Bar dengan CSS dan Javascript
links : Membuat Navigation Bar dengan CSS dan Javascript

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

Thus the article Membuat Navigation Bar dengan CSS dan Javascript

That's an article Membuat Navigation Bar dengan CSS dan Javascript This article will be useful for you all. okay, see you in other article posting. Do not forget to keep visiting on Panduan SEO | Blogger, Tips , Adsense, Google.

You are now reading the article Membuat Navigation Bar dengan CSS dan Javascript with the link address https://belajarpanduanseo.blogspot.com/2014/01/membuat-navigation-bar-dengan-css-dan.html