Masnasih

Cara Membuat Menu Navigasi di Blog Scroll Horisontal

Written by

admin

in

Menu Navigasi Scroll Horisontal



masnasih.com – Dipostingan kali ini saya ingin berbagi Cara Membuat Menu Navigasi di Blog Scroll Horisontal. Jadi menu ini tetap horisontal dan otomatis membentuk scroll saat layar di kecilkan atau pengguna menggunakan hp. Menu navigasi semacam ini saya lihat di kalau tidak salah juga digunakan oleh website detik. Namun kode yang saya dapatkan ini bersumber dari w3schools.

Penampakannya seperti ini

Di atas adalah menu scroll horisontal

Kecilkan ukuran browser untuk melihat hasilnya. Jika Anda menggunakan hp maka sudah bisa melihatnya

Baiklah langsung saja ke tutorialnya. 

Pertama masukkan kode di bawah ini ke posisi yang Anda inginkan. Diantara kode body


<div class="scrollmasnasih">
<a href="#Beranda">Beranda</a>
  <a href="#Berita">Berita</a>
  <a href="#KontakKami">Kontak Kami</a>
  <a href="#TentangKami">Tentang Kami</a>
  <a href="#Dukungan">Dukungan</a>
  <a href="#blog">Blog</a>
  <a href="#Peralatan">Peralatan</a>  
  <a href="#Rumah">Rumah</a>
  <a href="#kostumisasi">Kostumisasi</a>
  <a href="#lainnya">Lainnya</a>
  <a href="#logo">Logo</a>
  <a href="#teman">Teman</a>
  <a href="#partners">Partners</a>
  <a href="#orang">Orang</a>
  <a href="#kerja">Kerja</a>
</div>


Kedua, masukkan kode di bawah ini di atas  ]]></b:skin>



div.scrollmasnasih {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmasnasih a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmasnasih a:hover {
  background-color: #777;
}


Ketiga, Save template.


Demikianlah cara membuat menu navigasi scroll horisontal. Semoga bermanfaat.



		
		

			
		

		
		
		


	
	
	




		

	

	
	


	
	
More posts