Membuat Menu Ringkas Untuk Mobile Template


Di jaman yang semakin “mobile” ini memiliki mobile template untuk website dan blog adalah sebuah keharusan supaya website kita tetap nyaman untuk dibaca ketika dibuka melalui handphone atau smartphone. Salah satu hal yang penting bagi mobile template adalah tampilan tombol menu yang dibuat seringkas mungkin dan tidak terlalu memenuhi komposisi template. Berikut adalah cara membuat tombol menu ringkas untuk mobile template.

Salah satu ciri khas tombol menu adalah tiga garis yang saling bertumpuk, untuk membuat tombol ini yang paling mudah adalah menggunakan gambar yang disimpan dalam format .png. Cara pembuatannya itu sendiri pada intinya sama persis dengan pembuatan spoiler untuk website dan blog, yang membedakan hanya layout tampilannya saja.

(baca : Membuat Sendiri Spoiler Untuk Blog)

Kita akan membuat tombol menu yang lebih mirip seperti tombol menu pada gambar di bawah ini. Tentunya kita siapkan dulu tombolnya berupa image dengan resolusi kecil saja, misalnya 25×25 pixel.

Layout menu

Kita siapkan sebuah container untuk tempat tampilnya tombol menu termasuk menu itemnya dengan ID menu-bar. Nama ID boleh bebas, sebisa mungkin yang mudah diingat, kemudian di dalam div tersebut kita masukkan gambar tombol menu sebanyak dua kali, satu untuk menampilkan menu dan tombol satu lagi untuk menyembunyikan menu. Karena menggunakan gambar yang sama, tentunya tombol menu akan tampak seakan-akan tidak berubah.
Tombol dan daftar menu akan ditampilkan dalam elemen div.

<div id=”menu-bar”>
<div class=”menu-button”>
    <img id=”show-menu” src=’button.png’>
    <img id=”hide-menu” src=’button.png’>
</div>

<div id=”menu-item”>
<ul>
    <li><a href=”#”>Home</a>
    <li><a href=”#”>Blog</a>
</ul>
</div>
</div> <!– # menu-bar –>

ID pada gambar nantinya akan digunakan untuk mengidentifikasi jenis tombol apakah untuk menampilkan atau menyembunyikan menu.

Kode CSS

Masuk pada kode CSS yang akan mengendalikan berbagai tampilan menu.
Kita ingin bentuk keseluruhan menu memiliki lebar penuh dan memiliki tinggi 50 pixel. Untuk itu kita akan menginputkan kode CSS berikut pada container menu yang memiliki ID menu-bar.

#menu-bar {
    width: 100%;
    height: 50px;
    display: table;
    margin: 0; padding: 0;
}

display: table; akan mensimulasikan elemen div tersebut sebagai sebuah tabel sehingga isi dari elemen tersebut bisa ditampilkan pada posisi di tengah secara vertikal bila disimulasikan sebagai sel tabel.

Berikutnya kita akan mengubah tampilan daftar menu sehingga menjadi tampak seperti yang kita inginkan. Misalnya :

#menu-item {
    position: absolute;
    top: 49px;
    left: 10px;
    width: 100px;
    z-index: 1000;
}
#menu-item ul {
    list-style: none;
    padding: 0; margin: 0;
}
#menu-item li {
    padding: 5px;
}

Bila tampilan sudah sesuai dengan yang kita inginkan kita bisa menyembunyikan daftar menu dengan menambahkan display: none; pada #menu-item. z-index akan memastikan bahwa isi dari container tersebut akan muncul pada posisi paling atas bila terdapat elemen lain yang saling menumpuk dengan drop down menu, misalnya iklan.

Berikutnya kita akan membuat tampilan tombol menjadi di tengah secara vertikal dan menyembunyikan salah satu tombol, yaitu yang nantinya akan berfungsi untuk menampilkan menu menggunakan kode CSS berikut ini :

.menu-button {
    margin: 0; padding: 0 10px;
    display: table-cell;
    vertical-align: middle;
}
#hide-menu {
    display: none;
}

Dari kode-kode CSS di atas kita bisa melihat bahwa container untuk tombol yang memiliki class .menu-button disimulasikan sebagai sel tabel yang berada dalam sebuah tabel dengan ID menu-bar. Sementara posisi untuk daftar menu memiliki value absolute, hal ini berarti posisi dari daftar menu akan lebih bebas, tidak terpengaruhi oleh posisi containernya, tetapi masih menerima format style yang sama sesuai dengan kontainer terutama mengenai z-index.

Java script untuk memanipulasi CSS

Berikutnya kita akan menggunakan sebuah script untuk memanipulasi tampilan CSS yang akan menampilkan dan menyembunyikan daftar menu.

<script>
function showMenu() {
    document.getElementById( ‘show-menu’ ).style.display = “none”;
    document.getElementById( ‘hide-menu’ ).style.display = “block”;
    document.getElementById( ‘menu-item’ ).style.display = “block”;
}
function hideMenu() {
    document.getElementById( ‘show-menu’ ).style.display = “block”;
    document.getElementById( ‘hide-menu’ ).style.display = “none”;
    document.getElementById( ‘menu-item’ ).style.display = “none”;
}
</script>

Script di atas terbaca : bila fungsi showMenu() dijalankan dia akan menyembunyikan tombol show-menu kemudian menampilkan tombol hide-menu dan daftar menu. sementara bila fungsi hideMenu() dijalankan dia akan menampilkan tombol show-menu kemudian menyembunyikan tombol hide-menu dan daftar menu sehingga daftar menu tidak lagi terlihat.

Mengaplikasikan fungsi pada button

Kembali pada script di atas kita masukkan fungsi tersebut ke dalam image tombol menu sesuai dengan fungsinya masing-masing, sehingga script html untuk tombol menu menjadi :

<img id=”show-menu” onClick”showMenu()” src=’button.png’>

<img id=”hide-menu” onClick=”hideMenu” src=’button.png’>

Supaya tampak seperti tombol kita tambahkan style pada masing-masing gambar untuk mengubah kursor menjadi pointer yang menunjukkan bahwa ada yang bisa di-klik di bagian tersebut menggunakan kode CSS :

cursor: pointer;

kode ini bisa langsung dimasukkan dalam tag sehingga menjadi :

<img id=”show-menu” style=”cursor: pointer;” onClick”showMenu()” src=’button.png’>

<img id=”hide-menu” style=”cursor: pointer;” onClick=”hideMenu()” src=’button.png’>

Sekarang tombol ringkas kita sudah jadi, kita tinggal mengubah kode CSS supaya tampilan maupun posisi menu tersebut bisa lebih sesuai dengan keseluruhan tampilan template dan jangan lupa untuk memasukkan link dalam daftar menu.


Dipublikasikan oleh theangelwing dalam kategori Blogging, Website pada tanggal Jul 14, 2016