Cara Membuat Menu Bar Responsive Dengan Tambahan Efek

komputerdia.com - Diartikel sebelumnya, saya telah menjelaskan tentang bagaimana cara membuat menu navigasi responsive dengan gaya dropdown. Untuk pembahasan kali ini, masih mengangkat tema pembahasan yang sama, saya akan menjelaskan bagaimana cara membuat menu bar atau menu navigasi responsive dropdown dengan tambahan efek.

Bagi kalian yang belum sempat membaca artikel sebelumnya, kalian dapat melihatnya pada list artikel terkait dibawah ini

Baca Juga :

Cara Membuat Menu Bar Responsive Dengan Tambahan Efek

Langkah - Langkah Pembuatan

Cara Membuat Menu Bar Responsive Dengan Tambahan Efek
  • Login ke akun blogger kalian
  • Masuk ke menu Template kemduian tekan tombol edit html
  • Setelah berada pada halaman edit html, silahkan kalian cari kode </head>
  • Salin kode dibawah ini tepat diatas kode </head> 
<style type='text/css'>
*,*:before,*:after{box-sizing:inherit;margin:0;padding:0;}
nav ul{list-style-type:none;}
.nav{margin-top:30px;text-align:center;width:100%;}
.nav_list{display:inline-block;}
.nav_menu{float:left;width:140px;height:65px;line-height:65px;text-transform:uppercase;background-color:#2c8fb5;cursor:pointer;}
.nav_menu:hover{background-color:#226f8c;}
.nav_menu:hover > .nav_menu-lists li{display:block;}
.nav_menu:hover > .nav_menu--1-lists li:nth-child(1){opacity:0;-webkit-animation:menu1 ease-in-out forwards;animation:menu1 ease-in-out forwards;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-delay:0ms;animation-delay:0ms;}
@-webkit-keyframes menu1{from{opacity:0;-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);}to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg);}}
@keyframes menu1{from{opacity:0;-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);}to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg);}}
.nav_menu:hover > .nav_menu--1-lists li:nth-child(2){opacity:0;-webkit-animation:menu1 ease-in-out forwards;animation:menu1 ease-in-out forwards;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-delay:150ms;animation-delay:150ms;}
@keyframes menu1{from{opacity:0;-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);}to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg);}}
.nav_menu:hover > .nav_menu--1-lists li:nth-child(3){opacity:0;-webkit-animation:menu1 ease-in-out forwards;animation:menu1 ease-in-out forwards;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-delay:300ms;animation-delay:300ms;}
@keyframes menu1{from{opacity:0;-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);}to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg);}}
.nav_menu:hover > .nav_menu--1-lists li:nth-child(4){opacity:0;-webkit-animation:menu1 ease-in-out forwards;animation:menu1 ease-in-out forwards;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-delay:450ms;animation-delay:450ms;}
@keyframes menu1{from{opacity:0;-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);}to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg);}}
.nav_menu:hover > .nav_menu--1-lists li:nth-child(5){opacity:0;-webkit-animation:menu1 ease-in-out forwards;animation:menu1 ease-in-out forwards;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-delay:600ms;animation-delay:600ms;}
@keyframes menu1{from{opacity:0;-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);}to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg);}}
.nav_menu:hover > .nav_menu--2-lists li:nth-child(1){opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-animation:menu2 ease-in-out forwards;animation:menu2 ease-in-out forwards;-webkit-animation-duration:175ms;animation-duration:175ms;-webkit-animation-delay:0ms;animation-delay:0ms;}
@-webkit-keyframes menu2{0%{opacity:0;-webkit-transform:translateY(-100%) scale(0.3);transform:translateY(-100%) scale(0.3);}100%{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1);}}
@keyframes menu2{0%{opacity:0;-webkit-transform:translateY(-100%) scale(0.3);transform:translateY(-100%) scale(0.3);}100%{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1);}}
.nav_menu:hover > .nav_menu--2-lists li:nth-child(2){opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-animation:menu2 ease-in-out forwards;animation:menu2 ease-in-out forwards;-webkit-animation-duration:175ms;animation-duration:175ms;-webkit-animation-delay:145.83333ms;animation-delay:145.83333ms;}
@keyframes menu2{0%{opacity:0;-webkit-transform:translateY(-100%) scale(0.3);transform:translateY(-100%) scale(0.3);}100%{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1);}}
.nav_menu:hover > .nav_menu--2-lists li:nth-child(3){opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-animation:menu2 ease-in-out forwards;animation:menu2 ease-in-out forwards;-webkit-animation-duration:175ms;animation-duration:175ms;-webkit-animation-delay:291.66667ms;animation-delay:291.66667ms;}
@keyframes menu2{0%{opacity:0;-webkit-transform:translateY(-100%) scale(0.3);transform:translateY(-100%) scale(0.3);}100%{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1);}}
.nav_menu:hover > .nav_menu--2-lists li:nth-child(4){opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-animation:menu2 ease-in-out forwards;animation:menu2 ease-in-out forwards;-webkit-animation-duration:175ms;animation-duration:175ms;-webkit-animation-delay:437.5ms;animation-delay:437.5ms;}
@keyframes menu2{0%{opacity:0;-webkit-transform:translateY(-100%) scale(0.3);transform:translateY(-100%) scale(0.3);}100%{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1);}}
.nav_menu:hover > .nav_menu--2-lists li:nth-child(5){opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-animation:menu2 ease-in-out forwards;animation:menu2 ease-in-out forwards;-webkit-animation-duration:175ms;animation-duration:175ms;-webkit-animation-delay:583.33333ms;animation-delay:583.33333ms;}
@keyframes menu2{0%{opacity:0;-webkit-transform:translateY(-100%) scale(0.3);transform:translateY(-100%) scale(0.3);}100%{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1);}}
.nav_menu:hover > .nav_menu--3-lists li:nth-child(1){opacity:0;-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation:menu3 ease-in-out forwards;animation:menu3 ease-in-out forwards;-webkit-animation-duration:200ms;animation-duration:200ms;-webkit-animation-delay:0ms;animation-delay:0ms;}
@-webkit-keyframes menu3{0%{opacity:0;-webkit-transform:rotate(-45deg) translateX(50%);transform:rotate(-45deg) translateX(50%);}100%{opacity:1;-webkit-transform:rotate(0) translateX(0);transform:rotate(0) translateX(0);}}
@keyframes menu3{0%{opacity:0;-webkit-transform:rotate(-45deg) translateX(50%);transform:rotate(-45deg) translateX(50%);}100%{opacity:1;-webkit-transform:rotate(0) translateX(0);transform:rotate(0) translateX(0);}}
.nav_menu:hover > .nav_menu--3-lists li:nth-child(2){opacity:0;-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation:menu3 ease-in-out forwards;animation:menu3 ease-in-out forwards;-webkit-animation-duration:200ms;animation-duration:200ms;-webkit-animation-delay:153.84615ms;animation-delay:153.84615ms;}
@keyframes menu3{0%{opacity:0;-webkit-transform:rotate(-45deg) translateX(50%);transform:rotate(-45deg) translateX(50%);}100%{opacity:1;-webkit-transform:rotate(0) translateX(0);transform:rotate(0) translateX(0);}}
.nav_menu:hover > .nav_menu--3-lists li:nth-child(3){opacity:0;-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation:menu3 ease-in-out forwards;animation:menu3 ease-in-out forwards;-webkit-animation-duration:200ms;animation-duration:200ms;-webkit-animation-delay:307.69231ms;animation-delay:307.69231ms;}
@keyframes menu3{0%{opacity:0;-webkit-transform:rotate(-45deg) translateX(50%);transform:rotate(-45deg) translateX(50%);}100%{opacity:1;-webkit-transform:rotate(0) translateX(0);transform:rotate(0) translateX(0);}}
.nav_menu:hover > .nav_menu--3-lists li:nth-child(4){opacity:0;-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation:menu3 ease-in-out forwards;animation:menu3 ease-in-out forwards;-webkit-animation-duration:200ms;animation-duration:200ms;-webkit-animation-delay:461.53846ms;animation-delay:461.53846ms;}
@keyframes menu3{0%{opacity:0;-webkit-transform:rotate(-45deg) translateX(50%);transform:rotate(-45deg) translateX(50%);}100%{opacity:1;-webkit-transform:rotate(0) translateX(0);transform:rotate(0) translateX(0);}}
.nav_menu:hover > .nav_menu--3-lists li:nth-child(5){opacity:0;-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation:menu3 ease-in-out forwards;animation:menu3 ease-in-out forwards;-webkit-animation-duration:200ms;animation-duration:200ms;-webkit-animation-delay:615.38462ms;animation-delay:615.38462ms;}
@keyframes menu3{0%{opacity:0;-webkit-transform:rotate(-45deg) translateX(50%);transform:rotate(-45deg) translateX(50%);}100%{opacity:1;-webkit-transform:rotate(0) translateX(0);transform:rotate(0) translateX(0);}}
.nav_menu:hover > .nav_menu--4-lists li:nth-child(1){opacity:0;-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation:menu4 ease-in-out forwards;animation:menu4 ease-in-out forwards;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-delay:0ms;animation-delay:0ms;}
@-webkit-keyframes menu4{0%{opacity:0;-webkit-transform:rotateY(-90deg) rotateX(-90deg);transform:rotateY(-90deg) rotateX(-90deg);}100%{opacity:1;-webkit-transform:rotateY(0) rotateX(0);transform:rotateY(0) rotateX(0);}}
@keyframes menu4{0%{opacity:0;-webkit-transform:rotateY(-90deg) rotateX(-90deg);transform:rotateY(-90deg) rotateX(-90deg);}100%{opacity:1;-webkit-transform:rotateY(0) rotateX(0);transform:rotateY(0) rotateX(0);}}
.nav_menu:hover > .nav_menu--4-lists li:nth-child(2){opacity:0;-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation:menu4 ease-in-out forwards;animation:menu4 ease-in-out forwards;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-delay:125ms;animation-delay:125ms;}
@keyframes menu4{0%{opacity:0;-webkit-transform:rotateY(-90deg) rotateX(-90deg);transform:rotateY(-90deg) rotateX(-90deg);}100%{opacity:1;-webkit-transform:rotateY(0) rotateX(0);transform:rotateY(0) rotateX(0);}}
.nav_menu:hover > .nav_menu--4-lists li:nth-child(3){opacity:0;-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation:menu4 ease-in-out forwards;animation:menu4 ease-in-out forwards;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-delay:250ms;animation-delay:250ms;}
@keyframes menu4{0%{opacity:0;-webkit-transform:rotateY(-90deg) rotateX(-90deg);transform:rotateY(-90deg) rotateX(-90deg);}100%{opacity:1;-webkit-transform:rotateY(0) rotateX(0);transform:rotateY(0) rotateX(0);}}
.nav_menu:hover > .nav_menu--4-lists li:nth-child(4){opacity:0;-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation:menu4 ease-in-out forwards;animation:menu4 ease-in-out forwards;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-delay:375ms;animation-delay:375ms;}
@keyframes menu4{0%{opacity:0;-webkit-transform:rotateY(-90deg) rotateX(-90deg);transform:rotateY(-90deg) rotateX(-90deg);}100%{opacity:1;-webkit-transform:rotateY(0) rotateX(0);transform:rotateY(0) rotateX(0);}}
.nav_menu:hover > .nav_menu--4-lists li:nth-child(5){opacity:0;-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation:menu4 ease-in-out forwards;animation:menu4 ease-in-out forwards;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-delay:500ms;animation-delay:500ms;}
@keyframes menu4{0%{opacity:0;-webkit-transform:rotateY(-90deg) rotateX(-90deg);transform:rotateY(-90deg) rotateX(-90deg);}100%{opacity:1;-webkit-transform:rotateY(0) rotateX(0);transform:rotateY(0) rotateX(0);}}
.nav_menu:hover > .nav_menu--5-lists li:nth-child(1){opacity:0;-webkit-animation:menu5 ease-in-out forwards;animation:menu5 ease-in-out forwards;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-delay:0ms;animation-delay:0ms;}
@-webkit-keyframes menu5{0%{opacity:0;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);}100%{opacity:1;-webkit-transform:rotateY(0);transform:rotateY(0);}}
@keyframes menu5{0%{opacity:0;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);}100%{opacity:1;-webkit-transform:rotateY(0);transform:rotateY(0);}}
.nav_menu:hover > .nav_menu--5-lists li:nth-child(2){opacity:0;-webkit-animation:menu5 ease-in-out forwards;animation:menu5 ease-in-out forwards;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-delay:125ms;animation-delay:125ms;}
@keyframes menu5{0%{opacity:0;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);}100%{opacity:1;-webkit-transform:rotateY(0);transform:rotateY(0);}}
.nav_menu:hover > .nav_menu--5-lists li:nth-child(3){opacity:0;-webkit-animation:menu5 ease-in-out forwards;animation:menu5 ease-in-out forwards;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-delay:250ms;animation-delay:250ms;}
@keyframes menu5{0%{opacity:0;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);}100%{opacity:1;-webkit-transform:rotateY(0);transform:rotateY(0);}}
.nav_menu:hover > .nav_menu--5-lists li:nth-child(4){opacity:0;-webkit-animation:menu5 ease-in-out forwards;animation:menu5 ease-in-out forwards;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-delay:375ms;animation-delay:375ms;}
@keyframes menu5{0%{opacity:0;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);}100%{opacity:1;-webkit-transform:rotateY(0);transform:rotateY(0);}}
.nav_menu:hover > .nav_menu--5-lists li:nth-child(5){opacity:0;-webkit-animation:menu5 ease-in-out forwards;animation:menu5 ease-in-out forwards;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-delay:500ms;animation-delay:500ms;}
@keyframes menu5{0%{opacity:0;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);}100%{opacity:1;-webkit-transform:rotateY(0);transform:rotateY(0);}}
.nav_menu-lists{-webkit-perspective:5000px;perspective:5000px;}
.nav_menu-items{display:none;width:140px;height:65px;background-color:#2c8fb5;}
.nav_menu-items:hover{background-color:#226f8c;}
.nav_menu:nth-child(1){border-top-left-radius:10px;}
.nav_menu:last-child{border-top-right-radius:10px;}
.stuff{position:absolute;bottom:30px;width:100%;text-align:center;}
.stuff .pens{margin-right:20px;text-decoration:none;font-size:20px;color:#333;}
.stuff .pens:hover{text-decoration:underline;}
.stuff .fa-twitter{position:relative;top:8px;color:#1DA1F2;font-size:50px;}
</style>
  • Langkah selanjutnya silahkan kalian cari kode <body>
  • Kemudian salin kode dibawah ini, dan tempatkan kode tersebut tepat dibawah kode <body>
<nav class='nav'>
  <ul class='nav_list'>
    <li class='nav_menu'><b>List 1</b>
      <ul class='nav_menu-lists nav_menu--1-lists'>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 1</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 1</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 1</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 1</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 1</b></a></li>
      </ul>
    </a></li>
    <li class='nav_menu'><b>List 2</b>
      <ul class='nav_menu-lists nav_menu--2-lists'>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 2</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 2</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 2</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 2</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 2</b></a></li>
      </ul>
    </a></li>
    <li class='nav_menu'><b>List 3</b>
      <ul class='nav_menu-lists nav_menu--3-lists'>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 3</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 3</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 3</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 3</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 3</b></a></li>
      </ul>
    </a></li>
    <li class='nav_menu'><b>List 4</b>
      <ul class='nav_menu-lists nav_menu--4-lists'>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 4</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 4</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 4</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 4</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 4</b></a></li>
      </ul>
    </a></li>
    <li class='nav_menu'><b>List 5</b>
      <ul class='nav_menu-lists nav_menu--5-lists'>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 5</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 5</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 5</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 5</b></a></li>
        <li class='nav_menu-items'><a href='Alamat Url'><b>List 5</b></a></li>
      </ul>
    </a></li>
  </ul>
</nav>
  • Setelah semua kode diatas telah kalian atur, silahkan kalian tekan tombol simpan, dan lihat hasilnya .
  • Semoga bermanfaat untuk kalian semuanya

Sumber Referensi : https://mastamvan.blogspot.co.id/
.
.

Berlangganan Artikel terbaru (free):

Post a Comment