√ Cara Menciptakan Sajian Kafetaria Responsive Dengan Suplemen Efek

komputerdia.com - Diartikel sebelumnya, saya telah menjelaskan wacana bagaimana cara menciptakan menu navigasi responsive dengan gaya dropdown. Untuk pembahasan kali ini, masih mengangkat tema pembahasan yang sama, saya akan menjelaskan bagaimana cara menciptakan hidangan kafetaria atau hidangan navigasi responsive dropdown dengan komplemen efek.

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

Langkah - Langkah Pembuatan

Login ke akun blogger kalian
Masuk ke hidangan Template kemduian tekan tombol edit html
Setelah berada pada halaman edit html, silahkan kalian cari arahan </head>
Salin arahan dibawah ini sempurna diatas arahan </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 arahan <body>
Kemudian salin arahan dibawah ini, dan tempatkan arahan tersebut sempurna dibawah arahan <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 arahan diatas telah kalian atur, silahkan kalian tekan tombol simpan, dan lihat jadinya .
Semoga bermanfaat untuk kalian semuanya

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

Sumber http://www.komputerdia.com