[Tutorial] Membuat Menu Navigasi Html Keren Dengan Efek Modal


Pada pembahasan yang lalu saya sudah memberi tutorial tentang cara membuat responsive layout dengan efek transition yang bisa dibilang cukup keren. Namun untuk tutorial kali ini saya akan mencoba kembali memberikan langkah untuk membuat menu navigasi HTML keren, ditaburi dengan efek animasi yang membuatnya menjadi lebih terlihat modern.

Tutorial Membuat Menu Navigasi Html Keren Dengan Efek Bounce

Jika sobat ingin memasangnya di blog atau di website, sobat bisa ikuti langkah pembuatanya dibawah. Namun sebelumnya, perlu sobat ketahui disini kita juga memakai javascript untuk menjalankan efek tersebut. Lalu bagaimana cara pembuatannya?

Baca Juga: 7 Daftar Komponen Javascript Terbaik Twitter Bootstrap 3

Sebelum lanjut ke langkah pembuatan menu navigasinya, disini kita memerlukan:

1. HTML
2. CSS
3. JAVASCRIPT
4. JQUERY


OKE, mungkin kita langsung saja. Untuk yang pertama disini kita coba buat file HTML nya, seperti contoh berikut:

<!doctype html>
<html lang="en" class="no-js">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>

 <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
 <link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
 <script src="js/modernizr.js"></script> <!-- Modernizr -->
   
 <title>Menu Navigasi | Seo Techman</title>
</head>
<body>
<header>
 <h1>Bouncy Navigation</h1> 
</header>

<section class="cd-section">
 <a class="cd-bouncy-nav-trigger" href="#0">Browse categories</a>
</section> <!-- .cd-section -->

<div class="cd-bouncy-nav-modal">
 <nav>
  <ul class="cd-bouncy-nav">
   <li><a href="#0">Category 1</a></li>
   <li><a href="#0">Category 2</a></li>
   <li><a href="#0">Category 3</a></li>
   <li><a href="#0">Category 4</a></li>
   <li><a href="#0">Category 5</a></li>
   <li><a href="#0">Category 6</a></li>
  </ul>
 </nav>
 
 <a href="#0" class="cd-close">Close modal</a>
</div> <!-- cd-bouncy-nav-modal -->
 
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
Jika sudah, jangan lupa beri nama index.html lalu simpan. Dan yang kedua adalah kita buat CSS nya, lihat kode nya di link berikut:

Live Css

Setelah itu sobat copas Css nya, dan masukan ke dalam style.css kemudian simpan. Langkah selanjutnya, kita buat file lagi dan beri nama main.js, sobat bisa lihat contoh berikut ini:

jQuery(document).ready(function($){
 var is_bouncy_nav_animating = false;
 //open bouncy navigation
 $('.cd-bouncy-nav-trigger').on('click', function(){
  triggerBouncyNav(true);
 });
 //close bouncy navigation
 $('.cd-bouncy-nav-modal .cd-close').on('click', function(){
  triggerBouncyNav(false);
 });
 $('.cd-bouncy-nav-modal').on('click', function(event){
  if($(event.target).is('.cd-bouncy-nav-modal')) {
   triggerBouncyNav(false);
  }
 });

 function triggerBouncyNav($bool) {
  //check if no nav animation is ongoing
  if( !is_bouncy_nav_animating) {
   is_bouncy_nav_animating = true;
   
   //toggle list items animation
   $('.cd-bouncy-nav-modal').toggleClass('fade-in', $bool).toggleClass('fade-out', !$bool).find('li:last-child').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
    $('.cd-bouncy-nav-modal').toggleClass('is-visible', $bool);
    if(!$bool) $('.cd-bouncy-nav-modal').removeClass('fade-out');
    is_bouncy_nav_animating = false;
   });
   
   //check if CSS animations are supported... 
   if($('.cd-bouncy-nav-trigger').parents('.no-csstransitions').length > 0 ) {
    $('.cd-bouncy-nav-modal').toggleClass('is-visible', $bool);
    is_bouncy_nav_animating = false;
   }
  }
 }
});
Disini kita juga memerlukan javascript modernizr.js dan jquery-2.1.1.js sobat bisa mencarinya di Google. Untuk langkah berikut nya, apabila sobat sudah mendownload kedua file tersebut. Sobat letakan modernizr.js di atas </head>, sedangkan main.js dan jquery-2 letakan di atas </body>.

Lalu sobat simpan dan setelah itu silahkan dilihat seperti apa hasilnya. Untuk icon nya, sobat bisa menggunakan icon apa saja sesuai dengan selera. Entah itu fontawesome atau yang lainnya.

Dan...untuk live demo nya, bisa dilihat melalui link dibawah ini:

Live Demo

Nah, bagaimana menurut sobat, cukup keren bukan? Silahkan praktekan sendiri dan selamat mencobanya.

Mungkin saya rasa cukup untuk pembahasan hari ini tentang, Tutorial Membuat Menu Navigasi Html Keren Dengan Efek Modal. Dan akhir kata saya ucapkan terimakasih.

Blogger
Disqus
Select your comment system

No comments