Responsive Retina-Friendly Menu

• Demo
• Download Source

Hari ini kita akan membuat Menu Responsive Retina dari Codrops dan yang nantinya bisa kita terapkan di halaman blog Anda atau mungkin juga sebagai menu header. Nah, dengan memadukan warna-warni yang terinspirasi oleh permainan Borderlands menjadikannya menarik dan juga menu responsive yang akan menyesuaikan tampilannya sesuai dengan ukuran browser.

Tahap Persiapan :

• Membuat section baru diatas content yang akan diguanakan untuk sebagai Menu Responsive Retina.
• Membuat HTML menu dan akan ditambahkan ke gadget content baru.
• Menambahkan link CSS dan Javascript

Sebelum melanjutkan ke tahap pertama yang perlu kita ketahui bahwa icon pada menu retina bisa kita ganti sesuai dengan kebutuhan Anda dan bisa Anda dowload dari Icomoon.

Tahap Pertama

Pada tahap ini kita akan membuat gadget baru yang akan kita gunakan sebagai tempat menu responsive retina. Disini penulis meletakan menu tepat diatas content posting. Caranya masuk ke dashboard blog Anda klik Template - Edit HTML dan cari tag main-wrapper seperti dibawah ini :

<div class="main-wrapper">
atau
<div id="main-wrapper">

Selanjutnya buat section baru yang nanti akan digunakan untuk menu, tambahkan section berikut tepat dibawah tag diatas :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='content' id='retina' showaddelement='yes' > 
<b:widget id='HTML18' locked='false' title='Retina Menu Responsive' type='HTML'/> 
</b:section>
</b:if>

Pada section diatas kita menggunakan nama id retina sebagai tag css-nya, nah untuk menambahkan style pada section diatas seperti lebar, posisi dan lain-lain gunakan tag tersebut dan tambahkan didalam skin.

Tahap Kedua :

Setelah menyelesaikan tahap pertama kita lanjutkan dengan menambahkan HTML menu pada gadget yang telah kita buat, copy paste html dibawah ini ke dalam gadget yang telah kita buat melalui Tata letak atau layout.

<nav class='nav' id='menu'>
<ul>
<li>
<a href='http://afowles.blogspot.com/p/profil.html'>
<span class='icon'>
<i aria-hidden='true' class='icon-home'></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a href='http://afowles.blogspot.com/p/profil.html'>
<span class='icon'>
<i aria-hidden='true' class='icon-services'></i>
</span>
<span>Services</span>
</a>
</li>
<li>
<a href='http://afowles.blogspot.com/p/profil.html'>
<span class='icon'>
<i aria-hidden='true' class='icon-blog'></i>
</span>
<span>Blog</span>
</a>
</li>
<li>
<a href='http://afowles.blogspot.com/p/profil.html'>
<span class='icon'>
<i aria-hidden='true' class='icon-team'></i>
</span>
<span>About</span>
</a>
</li>
<li>
<a href='http://afowles.blogspot.com/p/profil.html'>
<span class='icon'>
<i aria-hidden='true' class='icon-contact'></i>
</span>
<span>Contact</span>
</a>
</li>
</ul>
</nav>

Selanjutnya masih tetap di dalam gadget menu, tambahkan javascript dibawah ini tepat dibawah penutup tag </nav>

<script type='text/javascript'>
/*<![CDATA[*/
// The function to change the class
var changeClass = function (r, className1, className2) {
var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
if (regex.test(r.className)) {
r.className = r.className.replace(regex, ' ' + className2 + ' ');
} else {
r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"), ' ' + className1 + ' ');
}
return r.className;
};
// Creating our button in JS for smaller screens
var menuElements = document.getElementById('menu');
menuElements.insertAdjacentHTML('afterBegin', '<button type="button" id="menutoggle" class="navtoogle" aria-hidden="true"><i aria-hidden="true" class="icon-menu"> </i> Menu</button>');
// Toggle the class on click to show / hide the menu
document.getElementById('menutoggle').onclick = function () {
changeClass(this, 'navtoogle active', 'navtoogle');
}
document.onclick = function (e) {
var mobileButton = document.getElementById('menutoggle'),
buttonStyle = mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;
if (buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
changeClass(mobileButton, 'navtoogle active', 'navtoogle');
}
}
/*]]>*/
</script>

Untuk menyesuaikan icon atau merubah icon lakukan melalui tag i pada class "icon-iconname" pada style css yang akan kita bahas ditahap ketiga. Untuk mengganti link icon ganti link satudelapan.com dengan link blog Anda.

Tahap Ketiga

Pada tahap ini kita cukup menambahkan link css dan javascript berikut didalam tag <head>...</head> pada template blog Anda, klik Template - Edit Html dan salin link berikut :

<script src="https://dl.dropboxusercontent.com/u/36169749/client/js/modernizr.custom.js"></script>
<link href="https://dl.dropboxusercontent.com/u/36169749/client/css/component.css" rel="stylesheet" type="text/css"></link>

Seperti yang sebelumnya saya jelaskan untuk mengubah icon atau mengubah dari style menu bisa Anda lakukan pada css component. Namun, untuk melakukannya Anda harus menghosting sendiri css component menu dan bisa Anda download dari link donwload diatas.

Referensi lengkap tentang tutorial diatas bisa Anda temukan lebih jelas di Codrops, disana akan jelaskan tentang penerapan lengkap component css dan javascript yang digunakan. Sekian yang bisa saya bagikan kepada sobat dan bila sobat mengalami kesulitan silahkan tinggalkan komentar sobat.