Pada pembahasan yang lalu saya sudah memberi tutorial cara membuat responsive layout 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.
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:
Jika sudah, jangan lupa beri nama index.html lalu simpan. Dan yang kedua adalah kita buat CSS nya, lihat kode nya berikut ini:
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:
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.
Selengkapnya
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 berikut ini:
/* --------------------------------
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:
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.
![[Tutorial] Cara Membuat Responsive Layout Dengan Efek Transition Pure Css](https://3.bp.blogspot.com/-wwmLgU7H_0E/XKdWKO-GbnI/AAAAAAAAAfs/eJ8oBoN9t3YUEXS7q_-49uT9n8lxV6mdwCLcBGAs/s1600/seotechman.webp)
