Cara membuat menu responsive (humburger) dengan menggunakan CSS dan JavaScript
Konten [Tampil]
Menu adalah bagian dari sebuah header website dimana merupakan suatu komponen yang penting. Karena menu akan mempermudah pengunjung mengetahui isi website anda secara cepat dan memahaminya. Kesan yang dinamis juga diperlukan dalam membuat tampilan dari website karena akan menyesuaikan dengan tampilan dari perangkat yang pengunjung gunakan.
Salah satu cara membuat tampilan yang dinamis adalah dengan membuat suatu tombol / button yang apabila di klik nanti akan muncul menu yang ingin di tampilkan. Inilah yang disebut dengan Push menu. Push menu sendiri berfungsi dapat menghemat ruang header sehingga pengunjung dapat langsung melihat bab isi daripada melihat headernya ya.
Adapun pembuatan tampilan yang dinamis, dapat dipadukan dengan berbagai komponen HTML, seperti button atau link. Salah satu implementasi menu dinamis yang menyertakan interaksi button ialah Push Menu.
Nah pada kali ini saya akan memberikan cara membuat push menu responsive dengan berbagai perangkat yang dapat mengaksesnya ya, simaklah langkah-langkahnya dibawah ini;
1. Pertama anda harus mempunyai sebuah aplikasi text editor , lebih baik anda mempunyai notepad++ karena dapat digunakan untuk membuat semua syntax. Atau anda bisa menggunakan adobe dreamwiever karena langsung muncul hasilnya ketika diketikan.
2. Selanjutnya anda buatlah sebuah file yang bernama index.html dengan syntax sebagai berikut.
<html> <head> <title>Rafinternet Push Menu</title> <style> </style> </head> <body> <script> </script> </body> </html>
3. Selanjutnya anda isi bagian <style> dengan kode sebagai berikut
body {
width: 100%;
height: 100%;
margin: 0;
font-family: "Segoe UI", "Courier New", sans-serif;
color: #fff;
background-color: #232629;
}
p {
line-height: 1.7;
}
h2 {
margin-top: 30px;
font-size: 1.7em;
line-height: 1;
letter-spacing: 2px;
text-transform: uppercase;
}
#menu {
position: fixed;
top: 0;
left: -300px;
width: 300px;
height: 100%;
padding: 50px 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
text-align: center;
background-color: #fff;
}
#menu .logo {
height: 51px;
font-size: 70px;
font-weight: 900;
line-height: .6;
color: #ddd;
}
#menu ul {
padding: 0;
margin-top: 30px;
}
#menu ul li a {
display: block;
font-weight: 900;
line-height: 50px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
text-decoration: none;
text-transform: uppercase;
color: #232629;
border-top: 1px solid #eee;
}
#menu ul li:last-child a {
border-bottom: 1px solid #eee;
}
#menu ul li a:hover {
letter-spacing: 1px;
}
body.open #menu {
left: 0;
}
.page-wrap {
padding: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
}
body.open .page-wrap {
margin-left: 300px;
}
button:focus {
outline: none;
}
#menu-toggle {
position: relative;
width: 51px;
height: 51px;
cursor: pointer;
border: none;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #fff;
}
#menu-toggle:before, #menu-toggle:after {
position: absolute;
content: "";
content: "";
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
background-color: #232629;
}
#menu-toggle:before {
top: 12px;
left: 25px;
width: 1px;
height: 27px;
}
#menu-toggle:after {
top: 25px;
left: 12px;
width: 27px;
height: 1px;
}
body.open button#menu-toggle:before, body.open button#menu-toggle:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
4. Selanjutnya anda isi bagian <body> dengan kode sebagai berikut
<nav id="menu" role="navigation">
<div class="logo">@</div>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</nav>
<div class="page-wrap">
<button id="menu-toggle"></button>
<h1>Inwepo Push Menu</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut massa turpis, euismod ut dui ut, varius fringilla nisl. In ultricies. </p>
</div>
5. Kemudian pada <script> anda dapat memasukan kode sebagai berikut ini
function hasClass(ele, cls) {
return !!ele.className.match(new RegExp('(\s|^)' + cls + '(\s|$)'));
}
function addClass(ele, cls) {
if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(\s|^)' + cls + '(\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}
function init() {
document.getElementById("menu-toggle").addEventListener("click", toggleMenu);
}
function toggleMenu() {
var ele = document.getElementsByTagName('body')[0];
if (!hasClass(ele, "open")) {
addClass(ele, "open");
} else {
removeClass(ele, "open");
}
}
document.addEventListener('readystatechange', function() {
if (document.readyState === "complete") {
init();
}
});
6. Kemudian anda dapat menyimpan semua file tersebut
7. Jalankan Xampp / hosting anda ya.
8. Jika anda menerapkan semua carnya dengan benar maka akan ada tombol push menu, yang hanya menekan tombol tersebut anda akan muncul beberapa menu pilihan ya.
Demikian cara membuat push menu responsive semoga anda dapat mempelajarinya ya.
0 Response to "Cara membuat menu responsive (humburger) dengan menggunakan CSS dan JavaScript"
Post a Comment
Berkomentarlah dengan bijaksana