Membuat sliding mobile menu dengan jquery dan CSS3

Ketika berbicara mobile menu pasti yang ada dipikiran anda adalah gimana sih cara buatnya?

jquery-sliding-mobile-menu-hamburger

Jika pertanyaan itu yang muncul anda perlu mencoba jquery yang satu ini, nama jquery ini adalah Sliding Mobile Menu. Kegunaannya sudah pasti untuk membuat sebuah menu responsive yang bisa tampil pada mobile anda secara sliding dengan ikon khas hamburger-nya. Untuk membuat jquery sliding mobile menu ini tidak sulit, karena yang dibutuhkan hanya jQuery dan CSS saja, tak lupa juga skill anda untuk melakukan kustomisasi.

Sedikit penjelasan dari saya, untuk implementasinya ketika kita klik dan memberikan efek sliding yang smooth pada navigasi menu, hanya menggunakan CSS3 animation saja sehingga lebih mobile friendly dan faster loading. Sedangkan jQuery hanya digunakan untuk perubahan toggle-nya saja seperti saat klik open ikon berubah dan close pun demikian.

Cara menggunakan Jquery Sliding Mobile Menu :

1. Silahkan buat file HTML dengan notepad++ atau editor yg lain, kemudian copy script untuk membuat menu dengan tampilan toggle hamburger icon dibawah ini :

<header>
<div class="mobile-nav-button">
<div class="mobile-nav-button__line"></div>
<div class="mobile-nav-button__line"></div>
<div class="mobile-nav-button__line"></div>
</div>

<nav class="mobile-menu">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Blog</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
</header>

2. Lalu copy style CSS3 utama untuk tampilan mobile menu dibawah ini :

.mobile-menu {
display: block;
max-width: 500px;
width: 100%;
right: -100%;
height: 100vh;
background: #fcb852;
position: absolute;
z-index: 9998;
transition: 0.6s ease;
top: 0;
opacity: 0;
}

.mobile-menu ul {
position: relative;
top: 50%;
transform: translateY(-50%);
padding: 0;
}

.mobile-menu ul li { list-style: none; }

.mobile-menu ul li a {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: block;
text-align: center;
text-decoration: none;
color: #0e0e0e;
font-size: 3rem;
font-weight: bold;
overflow: hidden;
position: relative;
}

.mobile-menu ul li a:after {
content: '';
background: #0e0e0e;
width: 100%;
height: 100%;
position: absolute;
right: -100%;
top: 0;
z-index: -1;
transition: 0.4s ease;
}

.mobile-menu ul li a:hover { color: #fff; }

.mobile-menu ul li a:hover:after { right: 0; }

.mobile-menu img {
position: absolute;
width: 150px;
display: block;
left: 50%;
top: 3rem;
transform: translatex(-50%);
padding: 0;
text-align: center;
}

.mobile-menu--open {
right: 0;
opacity: 1;
}

3. Copy juga style CSS3 untuk efek toggle hamburger button ini :

.mobile-nav-button {
width: 35px;
position: absolute;
margin: 2rem;
right: 0;
top: 0;
z-index: 9999;
cursor: pointer;
width: 35px;
height: 30px;
}

.mobile-nav-button .mobile-nav-button__line {
width: 100%;
height: 4px;
background: #0e0e0e;
position: relative;
transition: 1s ease;
}

.mobile-nav-button .mobile-nav-button__line:nth-of-type(2) { margin: 0.5rem 0; }

.mobile-nav-button .mobile-nav-button__line--1 {
transform: rotate(45deg);
top: 13px;
position: absolute;
}

.mobile-nav-button .mobile-nav-button__line--2 { display: none; }

.mobile-nav-button .mobile-nav-button__line--3 {
transform: rotate(135deg);
top: 13px;
position: absolute;
}

4. Include script library jquery slim terbaru pada bagian bawah HTML sebelum tag penutup </body> :

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>

5. Terakhir copy script untuk menyisipkan class ketika hamburger toggle button di klik :

$('.mobile-nav-button').on('click', function() { 
$( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(1)" ).toggleClass( "mobile-nav-button__line--1");
$( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(2)" ).toggleClass( "mobile-nav-button__line--2");
$( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(3)" ).toggleClass( "mobile-nav-button__line--3");

$('.mobile-menu').toggleClass('mobile-menu--open');
return false;
});

Ini adalah jQuery plugin yang didevelop oleh dbridgman. Untuk informasi lengkapnya silahkan cek pada official websitenya http://www.jqueryscript.net/demo/Minimal-Sliding-Mobile-Menu-With-jQuery-CSS3

Semoga informasi ini bermanfaat. Salam tukarpengetahuan.

Leave a Reply

Your email address will not be published. Required fields are marked *