CARA MEMBUAT HAMBURGER MENU YANG BENAR UNTUK TEMPLATE BLOGGER MODERN

Menu klasik (baca desain menu navigasi blog lama) adalah menu yang tampil di header dalam bentuk inline, horisontal hingga dropdown - dan sebagian disembunyikan hanya pada tampilan mobile. Namun oleh karena trend bahasa web yakni CSS yang semakin maju, hingga memungkinkan untuk membuat menu halaman web kemudian di buat minimalis, dan minimalis menjadi SEO. Tanpa javascript!

Banyak alasan mengapa halaman web modern tampak lebih minimalis antarmukanya tapi ini bukanlah pendapat seseorang, akan tetapi melihat kepada trend dari evolusi kemunculan halaman halaman webblog personal dengan tampilan minimalis namun dengan fitur yang lengkap. Juga karena makin kesininya CSS ternyata menjadi semakin powerful.

Menu template zaman sekarang sangat minimalis kebanyakan hanya menampilkan sebua tombol namun jangan salah, satu tombol berisikan menu yang sangat lengkap! Dan tombol yang paling populer adalah: Menu Hamburger!

1. Apakah menu hamburger itu?

Menu hamburger adalah ikon menu tiga garis berlapis. Ketika ia di terapkan ke dalam halaman halaman web, ia akan berubah menjadi sangat responsif, intuitif dan memiliki utilitas tinggi. Untuk lebih jelas perihal tombol menu hamburger ini baca postingan saya yang berjudul:

MENU HAMBURGER DARIMANA ITU BERASAL?

Di desain oleh Norm Cook untuk pertama kali pada tahun 1981, dia ini seorang pemimpin bagian desain grafis di perusahaan Xerox Star, pencetus komputer personal pertama di dunia.

Desain tiga garis ini sangat simpel akan tetapi pada waktu itu teknologi perangkat hanya support 16x16 piksel jadi sangat buram. Maka itu dibuat tiga garis agak tebal biar terlihat jelas. Dan tiga garis ini yang paling 'real deal'. Akhirnya dipergunakan hingga kini.

Seiring waktu penggunaan seluler yang minim lebar layar ternyata membutuhkan hamburger menu guna menampilkan menu menu konten, misalnya situs Twitter dan Apple termasuk situs besar pertama yang menggunakannya.

Demikian juga Android telah membuatnya menjadi sangat popular dan menjadi sangat ikonik di dunia hampir semua halaman web mobile memanfaatkan menu hamburger yang sangat ikonik itu tadi.

Lalu di dunia web dan blogging, lihat saja halaman ediblogtema pada layar seluler, untuk menampilkan menu menunya kalian harus mengklik menu hamburger yang terdapat pada bagian kanan atas layar hape.

2. Cara membuat dan menerapkan menu hamburger ke dalam blog yang kurang benar

Template blogger zaman now dalam beberapa hal tidak memerlukan keterlibatan Javascript lagi. Akan tetapi pada tutorial yang saya baca melalui halaman w3school, masih menerapkan cara lama ketika membuat sebuah tombol hamburger menu yang menurut saya kurang benar, alias tidak perlu di terapkan lagi zaman ini. 

Perhatikan contoh berikut:

See the Pen by sufyan (@sufyan33) on CodePen.

pada contoh di atas membentuk sebuah menu haburger menggunakan pengaturan CSS dan HTML akan tetapi agar ia dapat beralih (baca: toggle) menjadi 'X', maka kita harus menambahkan javascript berikut:

function myFunction(x) {
x.classList.toggle("change");
}

Tentu saja tutorial di aatas samasekali tidak salah, yang menjadi salah adalah jika kita menerapkannya ke dalam template kita, sementara kita ingin memaksimalkan kecepatan halmaman blog.

3. Cara menerapkan hamburger menu plus konten menunya tanpa javascript.

Dan bahkan tanpa Javascript kita dapat membuat menu hamburger yang sangat responsif! Perhatikan contoh trik CSS berikut:

CSS

<style>
#menuToggle
{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 999;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a
{
text-decoration: none;
color: #777;
transition: color 0.3s ease;
}
#menuToggle a:hover
{
color: tomato;
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;

cursor: pointer;

opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */

-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #555;
border-radius: 3px;
z-index: 1;

transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}

/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/*
* But let&#39;s hide the middle one.
*/
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}

/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
font-color:#555;
background: orange;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
#menuToggle input:checked ~ ul
{
transform: none;
}</style>

Jika kalian ingin menerapkannya cukup mneletakan kode CSS di atas ke dalam editor HTML blogger letaknya di atas kode </head>

HTML

Lalu berikut contoh HTML/XMLnya:

<nav role='navigation'>
<div id='menuToggle'>

<input type='checkbox'/>

<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span/>
<span/>
<span/>
<ul id='menu'>
<a href='#'><li>Home</li></a>
<a href='#'><li>About</li></a>
<a href='#'><li>Info</li></a>
<a href='#'><li>Contact</li></a>
<a href='https://erikterwan.com/' target='_blank'><li>Show me more</li></a>
</ul>
</div>
</nav>

Kalian dapat meletakan kode tersebut di bawah kode </head>

Javascript? No need Javascript At All. That's All.

Lihat (silahkan klik menu hamburgernya pada gambar setiap perangkat dengan segala ukuran):

 DEMO

Kesimpulan.

Menerapkannya sangat mudah di dalam editor HTML template bawaan (default) blogger blogspot varian terbaru kalian hanya perlu mencari kode tag penutup </head>

1. Letakan CSS di atasnya
2. Letakan HTML di bawahnya

That's All.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: