[Tutorial] Membuat Menu Navigasi Html Keren dengan Efek Modal

Tutorial Membuat Menu Navigasi Html Keren Dengan Efek Bounce

Seotechman.com, Bogor 15/04/2019. Pada pembahasan yang lalu saya sudah memberi tutorial cara membuat responsive layout yang bisa dibilang cukup keren.

Nah untuk kali kali ini saya akan mencoba kembali memberikan sebuah tutorial membuat menu navigasi HTML keren, ditaburi dengan efek animasi modal yang membuatnya menjadi lebih terlihat modern.

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?

Simak dan ikuti langkah-langkahnya berikut ini:

Baca Juga: 7 Daftar Komponen Javascript Terbaik Twitter Bootstrap 3

Cara Membuat Menu Navigasi Keren

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

HTML
CSS
JAVASCRIPT
JQUERY

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

KODE HTML

<!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 berikut ini:

KODE CSS

/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  color: #C8C8C8;
  background-color: #242325;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: #DC965A;
  text-decoration: none;
}

/* -------------------------------- 

Main Components 

-------------------------------- */
header {
  position: relative;
  height: 180px;
  line-height: 180px;
}
header h1 {
  font-size: 2.4rem;
  text-align: center;
}
@media only screen and (min-width: 1170px) {
  header {
    height: 300px;
    line-height: 300px;
  }
  header h1 {
    font-size: 3.2rem;
    font-weight: 300;
  }
}

.cd-section {
  padding: 2em;
  text-align: center;
}

.cd-bouncy-nav-trigger {
  /* button style */
  background: #003bc0;
  color: #ffffff;
  padding: 1.2em 2em;
  border-radius: 10em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 10px #171718;
}
.no-touch .cd-bouncy-nav-trigger:hover {
  background: #e0a36f;
}

.cd-bouncy-nav-modal {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(36, 35, 37, 0.9);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0.6s, visibility 0s 0.9s;
  -moz-transition: opacity 0.3s 0.6s, visibility 0s 0.9s;
  transition: opacity 0.3s 0.6s, visibility 0s 0.9s;
}
.cd-bouncy-nav-modal.fade-in {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.1s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.1s 0s, visibility 0s 0s;
  transition: opacity 0.1s 0s, visibility 0s 0s;
}
.cd-bouncy-nav-modal .cd-close {
  display: block;
  position: fixed;
  top: 20px;
  right: 5%;
  width: 44px;
  height: 44px;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url("../img/cd-icon-close.svg") no-repeat center center;
  -webkit-transform: scale(0) translateZ(0);
  -moz-transform: scale(0) translateZ(0);
  -ms-transform: scale(0) translateZ(0);
  -o-transform: scale(0) translateZ(0);
  transform: scale(0) translateZ(0);
  -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s;
  transition: transform 0.3s 0s, visibility 0s 0.3s;
}
.cd-bouncy-nav-modal.fade-in .cd-close {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s 0s, visibility 0.3s 0s;
  -moz-transition: -moz-transform 0.3s 0s, visibility 0.3s 0s;
  transition: transform 0.3s 0s, visibility 0.3s 0s;
}
@media only screen and (min-width: 1170px) {
  .cd-bouncy-nav-modal .cd-close {
    top: 60px;
  }
}

.cd-bouncy-nav {
  position: absolute;
  left: 50%;
  top: 50vh;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 90%;
  max-width: 300px;
}
.cd-bouncy-nav li {
  width: 50%;
  float: left;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform: translateY(100vh);
  -moz-transform: translateY(100vh);
  -ms-transform: translateY(100vh);
  -o-transform: translateY(100vh);
  transform: translateY(100vh);
  text-align: center;
}
.is-visible .cd-bouncy-nav li {
  /* used to assign a tranlsateY value when the animation is over */
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.fade-in .cd-bouncy-nav li {
  -webkit-animation: cd-move-in 0.4s;
  -moz-animation: cd-move-in 0.4s;
  animation: cd-move-in 0.4s;
}
.fade-out .cd-bouncy-nav li {
  -webkit-animation: cd-move-out 0.4s;
  -moz-animation: cd-move-out 0.4s;
  animation: cd-move-out 0.4s;
}
.fade-in .cd-bouncy-nav li, .fade-out .cd-bouncy-nav li {
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.fade-in .cd-bouncy-nav li:nth-of-type(2), .fade-out .cd-bouncy-nav li:nth-of-type(2) {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.fade-in .cd-bouncy-nav li:nth-of-type(3), .fade-out .cd-bouncy-nav li:nth-of-type(3) {
  -webkit-animation-delay: 0.15s;
  -moz-animation-delay: 0.15s;
  animation-delay: 0.15s;
}
.fade-in .cd-bouncy-nav li:nth-of-type(4), .fade-out .cd-bouncy-nav li:nth-of-type(4) {
  -webkit-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
.fade-in .cd-bouncy-nav li:nth-of-type(5), .fade-out .cd-bouncy-nav li:nth-of-type(5) {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.fade-in .cd-bouncy-nav li:nth-of-type(6), .fade-out .cd-bouncy-nav li:nth-of-type(6) {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.cd-bouncy-nav a {
  display: inline-block;
  min-width: 80px;
  position: relative;
  padding: 90px 20px 0;
  margin-bottom: 30px;
  color: #ffffff;
}
.cd-bouncy-nav a::before {
  /* icons */
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background-color: #77BFA3;
  background-image: url("../img/cd-category-icons.svg");
  background-repeat: no-repeat;
  background-position: 0 0;
}
.no-touch .cd-bouncy-nav a:hover::before {
  background-color: #DC965A;
}
.cd-bouncy-nav li:nth-of-type(2) a::before {
  background-position: -80px 0;
}
.cd-bouncy-nav li:nth-of-type(3) a::before {
  background-position: -160px 0;
}
.cd-bouncy-nav li:nth-of-type(4) a::before {
  background-position: -240px 0;
}
.cd-bouncy-nav li:nth-of-type(5) a::before {
  background-position: -320px 0;
}
.cd-bouncy-nav li:nth-of-type(6) a::before {
  background-position: -400px 0;
}
@media only screen and (min-width: 768px) {
  .cd-bouncy-nav {
    max-width: 450px;
  }
  .cd-bouncy-nav li {
    width: 33.33%;
    float: left;
  }
  .fade-in .cd-bouncy-nav li:nth-of-type(1), .fade-out .cd-bouncy-nav li:nth-of-type(1) {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
  .fade-in .cd-bouncy-nav li:nth-of-type(2), .fade-out .cd-bouncy-nav li:nth-of-type(2) {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
  }
  .fade-in .cd-bouncy-nav li:nth-of-type(4), .fade-out .cd-bouncy-nav li:nth-of-type(4) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    animation-delay: 0.3s;
  }
  .fade-in .cd-bouncy-nav li:nth-of-type(5), .fade-out .cd-bouncy-nav li:nth-of-type(5) {
    -webkit-animation-delay: 0.25s;
    -moz-animation-delay: 0.25s;
    animation-delay: 0.25s;
  }
  .cd-bouncy-nav a {
    margin-bottom: 50px;
  }
}

@-webkit-keyframes cd-move-in {
  0% {
    -webkit-transform: translateY(100vh);
  }
  65% {
    -webkit-transform: translateY(-1.5vh);
  }
  100% {
    -webkit-transform: translateY(0vh);
  }
}
@-moz-keyframes cd-move-in {
  0% {
    -moz-transform: translateY(100vh);
  }
  65% {
    -moz-transform: translateY(-1.5vh);
  }
  100% {
    -moz-transform: translateY(0vh);
  }
}
@keyframes cd-move-in {
  0% {
    -webkit-transform: translateY(100vh);
    -moz-transform: translateY(100vh);
    -ms-transform: translateY(100vh);
    -o-transform: translateY(100vh);
    transform: translateY(100vh);
  }
  65% {
    -webkit-transform: translateY(-1.5vh);
    -moz-transform: translateY(-1.5vh);
    -ms-transform: translateY(-1.5vh);
    -o-transform: translateY(-1.5vh);
    transform: translateY(-1.5vh);
  }
  100% {
    -webkit-transform: translateY(0vh);
    -moz-transform: translateY(0vh);
    -ms-transform: translateY(0vh);
    -o-transform: translateY(0vh);
    transform: translateY(0vh);
  }
}
@-webkit-keyframes cd-move-out {
  0% {
    -webkit-transform: translateY(0vh);
  }
  100% {
    -webkit-transform: translateY(-100vh);
  }
}
@-moz-keyframes cd-move-out {
  0% {
    -moz-transform: translateY(0vh);
  }
  100% {
    -moz-transform: translateY(-100vh);
  }
}
@keyframes cd-move-out {
  0% {
    -webkit-transform: translateY(0vh);
    -moz-transform: translateY(0vh);
    -ms-transform: translateY(0vh);
    -o-transform: translateY(0vh);
    transform: translateY(0vh);
  }
  100% {
    -webkit-transform: translateY(-100vh);
    -moz-transform: translateY(-100vh);
    -ms-transform: translateY(-100vh);
    -o-transform: translateY(-100vh);
    transform: translateY(-100vh);
  }
}

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:

JAVASCRIPT & JQUERY

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.

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.

Demikianlah tutorial cara membuat navigasi HTML keren dengan efek modal, versi Seotechman.

Virm Aditya

Berita teknologi informasi terkini

[Tutorial] Membuat Menu Navigasi Html Keren dengan Efek Modal

Cara Membuat Menu Navigasi Keren

KODE HTML

KODE CSS

JAVASCRIPT & JQUERY

Belum ada Komentar untuk "[Tutorial] Membuat Menu Navigasi Html Keren dengan Efek Modal"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel