Header Responsif dengan HTML, CSS, dan JQuery Sederhana

Header responsif adalah tampilan header halaman web yang menyesuaikan di semua perangkat gadget, seperti PC, Laptop, Tablet, dan HP. Tampilan diatur untuk kenyamanan pengunjung web sesuai dengan perangkat yang digunakan untuk mengakses web tersebut. Pada awalnya tampilan web hanya didesign untuk PC dan Laptop. Berhubung dengan kemajuan teknologi dalam akses internet yang serba mobile, dimana pengguna internet dengan mudahnya akses informasi melalui gadget mobile yang selalu menemani hampir di semua aktifitas. Muncullah inovasi design halaman web yang diperuntukkan untuk Tablet dan HP.

Kali ini saya akan membuat tutorial sederhana untuk design header web yang sederhana juga, tetapi tetap dinamis dan responsif di semua perangkat. Saya menggunakan hosting dari Blogspot (Blogger), yang mana nantinya akan disesuaikan pengaturan layout Blogger dengan design kita sendiri.

Berikut ada beberapa langkah untuk memulai :

1. Membuat ikon menu gambar hamburger dan ikon search (pencarian) menggunakan aplikasi PicsArt. Untuk logo juga bisa di design dari sini.

2. Membuat script aplikasi show/hide menu menggunakan Java Script atau JQuery sederhana.

3. Membuat script navigasi dan form searching dengan HTML sederhana.

4. Mempercantik menu dengan script CSS sederhana.

1. Membuat icon menu dan search

Buat gambar icon dengan ukuran persegi (1:1), angkanya terserah yang penting panjang dan lebar sama. Kedua icon tersebut buat ukuran sama, icon menu dan search. Buat dengan latar belakang transparant, gambar nantinya akan berextension png. Buat juga logo dengan latar transparan, ini tujuannya supaya suatu saat kita bisa mengganti-ganti warna latar header tanpa membuat icon lagi.

Untuk tutorial lebih jelas tentang cara buat icon dan logo dengan aplikasi PicsArt, nanti saya akan jelaskan di satu artikel, karena beda topik dengan artikel ini. 😊

Jika ketiga gambar sudah jadi, upload ke satu halaman blog kita khusus untuk gambar. Halaman ini bisa dipublish juga bisa tidak, kita hanya memerlukan kode url nya, atau lokasi di mana gambar tersebut berada. Yang pasti gambar itu harus disimpan di blog kita sendiri. Untuk melihat url gambar, lihat di tampilan html pada halaman tersebut. Akan tertera kode <img src="di sini lah lokasi gambar itu berada">.

Header menggunakan tabel, satu baris dan tiga kolom. Kolom pertama untuk icon menu, kolom dua untuk logo, kolom tiga untuk icon search. Berikut contoh script HTML nya.

Letakkan script header tersebut di dalam tag <body> ... </body>, untuk pengaturan di Blogger letakkan di baris pertama setelah <body>. Untuk source gambar yang masih kosong di atas, silakan isi dengan url gambar yang didapat dari tampilan html halaman gambar tadi.

Kira-kira tampilannya seperti ini,

Untuk header bawaan blogger, silakan di non aktifkan dari pengaturan tata letak, supaya header yang kita buat tidak tertimpa dengan header bawaan blogger. Setelah itu lanjut ke edit template atau tema dari pengaturan HTML, buka bagian Group Descriptian BackGround. Atur tinggi default jadi 0. Untuk keterangan lebih jelas silakan buka artikel saya tentang cara mengganti ukuran header blogspot.

2. Membuat aplikasi show/hide menu menggunakan script Java Script (JQuery)

Guna aplikasi show/hide adalah untuk menampilkan dan menghilangkan tampilan dengan satu tombol atau link. Cara kerja dari script ini adalah berlawanan dengan tampilan sebelum dilakukan aksi klik. Jika tampilan pertama terlihat, ketika dilakukan klik akan menghilang atau hiden. Sebaliknya jika tampilan pertama hiden, setelah klik link akan terlihat.

Berikut kode script nya menggunakan atribut toggle.

  
 <html>
<head>
<title> Menu Show/Hide dengan Toggle Jquert </title>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> /* Library dari Jquery */

  </head> 


<body> 
/* cuplikan dari kode html table header yang dibuat tadi, untuk memperjelas saya tampilkan atribut terpenting saja, yaitu nama variabel tombol */

<img height="30" id="tombollapis" src="" width="30" />
<img height="30" id="tombolcari" src="" width="30" />

/* property yang ingin ditampilkan dan dihiden, jika tampilan awal tidak terlihat, kita harus buat display none */
  
 <div id='lapis' style='display: none;'>
<ul>
<li><a href=''> Beranda </a></li>
<li><a href=''> Daftar Isi</a></li>
<li><a href=''> Tentang </a></li>
<li><a href=''> Kontak </a></li>
</ul>
</div> 

<div id='cari' style='display: none;'> 
<p> </p>
<form action='/search' align='center' method='get'> 
<input name='q' placeholder='Cari Artikel' style='color: blue; font-weight:bold;' type='text' width='100'/>	 
<input type='submit' value='Cari'/> 
<input type='reset' value='Batal'/> 
</form> 
<hr/>
</div>
  
<div class='clearboth'> </div>

/* script java script atau jquery menggunakan toggle */
  
 <script> 
$( "#tombollapis" ).click(function() { 
$( "#lapis" ).toggle(); }); 
  
$( "#tombolcari" ).click(function() { 
$( "#cari" ).toggle(); }); 
</script> 

</body> 
</html>

Langkah pertama adalah letakkan script library jquery di dalam tag <head> ... </head>. Untuk mempermudah posisikan di bawah <head>.

Langkah ke dua, buatlah menu dan form searching dengan kode html, beserta script javascript toggle di bawah kode html header.

3. Mempercantik tampilan navigasi dengan CSS dan membuat tampilan responsif untuk layar lebar dan kecil

Kode CSS ditempatkan di antara tag <head> ... </head>. Selanjutnya script untuk tampilan responsif juga diposisikan di antara tag head.

<head>

</head>

Pada bagian meta tag di atas, tampilan layar pada perangkat mobile masih bisa dilakukan perbesaran layar, ditandai dengan kode "initial-scale=1". Jika kita ingin tampilan di perangkat mobile statis dan tidak bisa dilakukan perbesaran layar, ganti kode dengan "maximum-scale=1".

Berikut contoh kode CSS sederhana untuk tampilan sederhana,

   
 <html>
<head>
<title> CSS untuk mempercantik dan tampilan responsif di layar kecil dan besar </title>

  <meta content="width=device-width, initial-scale=1" name="viewport">

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
     
<style type='text/css'>

.menu{
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.menu li{
    display:block;
    background-color: black; 
    padding: 0px; 
    height: 40px;
    border-bottom: solid 1px white
}
  
.menu li:hover { 
background-color: turquoise; 
}
  
.menu a{
    display:inline-block;
    padding:10px;
    font-weight: bold; 
    color: white; 
    text-decoration: none;
}

  /* pengaturan tampilan untuk layar desktop */
  
 @media (min-width:768px){
.menu li {
  display: inline-block;
  border-right: solid 1px white;
  height: 40px;
 }
 }
</style>
  
  </head>
  
  <body>
    /* pemanggilan kode CSS dari cuplikan kode html menu, dipanggil dari tag <ul> */
    
    <ul class="menu">
      
    </body>
  </html>

Demikian script CSS nya, untuk tampilan di layar maksimal 768 pixel, layar HP dan Tablet, menu akan tampil ke bawah. Ditandai dari kode CSS untuk tag <li> diatur display : block.

Untuk tampilan layar di atas 768 pixel, layar PC atau Laptop akan muncul navigasi horizontal. Ditandai dengan kode CSS untuk tag <li> diatur display : inline-block.

Kesimpulannya, display block untuk menu dropdown, display inline untuk menu horizontal. Display inline-block supaya kita bisa atur tinggi dan lebar, yang mana display inline saja tidak akan berfungsi pengaturan tinggi dan lebarnya.

Untuk demo tampilannya, saya coba ubah warna background, begini tampilannya :

Blog shekumbank.blogspot.com

Header Responsif dengan HTML, CSS, dan JQuery Sederhana

Komentar

Posting Komentar