close

Membuat Menu Navigasi Cantik Dengan CSS3

Pernah terpikir gak membuat navigasi menu buat web atau blog kamu?.. mungkin banyak yang terpikir namun sulit untuk di terapkan, karna selama ini menu navigasi banyak memakai sintax javascript atau jquery untuk membantu orientasi objek CSS pada menu kamu, 

Namun kali ini saya akan share cara membuat menu navigasi cantik tanpa menggunakan jQuery, dan kita akan memakai CSS3 sebagai efek memanipulasi DOM di HTML blog atau web kita, 

Download Source:



Apa Sih CSS? 

CSS adalah singkatan dari Cascading Style Sheets yang merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah halaman website, sehingga akan lebih terstruktur dan seragam. 

CSS bukan merupakan bahasa pemograman, CSS hampir sama halnya dengan Styles pada microsoft word yang berfungsi mengatur beberapa Style tulisan dan format tulisan seperti heading, Subbab, BodyText, Footer, Images dan Style yang lainnya.

Pada umumnya CSS dipakai untuk memformat tampilan sebuah halaman Website yang dibuat dengan bahasa HTML atau XHTML, dia dapat mengendalikan seperti ukuran gambar, warna, panjang dan lebar suatu kolom, sampai dengan efek-efek pada reaksi mouse anda. jadi CSS sangat memungkinkan kita menampilkan halaman yang sama, namun dengan format yang berbeda.

Apa Beda CSS dengan CSS3 ?

Nah... Perbedaan CSS dan CSS3 cuma beda di versi saja dan fitur, saat artikel ini ditulis versi CSS ada 3 yaitu: CSS1, CSS2, dan CSS3. pada versi CSS1 dikembangkan hanya berpusat pada pengformatan dokumen HTML,  CSS2 dikembangkan untuk memenuhi kebutuhan pemformatan dokumen agar dapat ditampilkan pada saat di cetak/printer. dan CSS3 adalah merupakan versi terbaru saat ini yang dikembangkan oleh organisasi W3C yang dapat melakukan animasi pada sebuah halaman website, seperti animasi Warna dan animasi 3D. CSS3 juga di kembangkan untuk tampilan halaman pada ponsel yang dengan dukungan fitur dari Jquery.

Setelah kita tahu pengertian dan manfaat CSS3, sekarang mari kita lanjutkan bagaimana membuat menu navigasi cantik dengan CSS3. langsung praktek ya..

Contoh Pertama : 

Membuat menu navigasi dengan efect CSS3 Transition

HTML
buatlah kode HTML seperti dibawah ini:
<ul id="panel">  
 <li><h3>MENU</h3></li>  
 <li class="animation"><a href="#">Link 1</a></li> 
 <li class="animation"><a href="#">Link 2</a></li>  
 <li class="animation"><a href="#">Link 3</a></li>  
 <li class="animation"><a href="#">Link 4</a></li>  
 <li class="animation"><a href="#">Link 5</a></li>  
</ul> 
CSS
Perhatikan kode dibawah ini, kode CSS ini mengatur properti dari list HTML diatas untuk nilai translateX saat mouse anda melewati Link List diatas, Sangat sederhana namun memberikan suatu efect yang bagus.
/* CSS3 TRANSITION ONLY EFFECT */
#panel { 
 width:300px;
 list-style:none; 
 padding-top:30px;
 display:inline-block;
}

#panel li {  
 border-radius:3px 3px 3px 3px; 
 margin-top:5px;
 width:150px;
 background: #000000;
 background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
 background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
 background: -o-linear-gradient(top, #161616 0%,#000000 100%);
 border-left:1px solid #111;
        border-top:1px solid #111; 
        border-right:1px solid #333; 
        border-bottom:1px solid #333;
}

#panel li a { 
 color:#fff; 
 display:block; 
 padding:10px;
}

#panel li a:hover { 
 color:#00c6ff;
}

#panel li.animation { 
 -moz-transition: all 0.4s ease-in-out; 
 -moz-transform:translateX(0px); 
 -o-transition: all 0.4s ease-in-out; 
 -o-transform:translateX(0px); 
 -webkit-transition: all 0.4s ease-in-out; 
 -webkit-transform:translateX(0px); 
}

#panel li.animation:hover { 
 -moz-transform:translateX(25px);
 -o-transform:translateX(25px);
 -webkit-transform:translateX(25px);
}
Contoh Kedua : 

Membuat menu navigasi dengan efect CSS3 Transition pada link yang disembunyikan

Cara kedua ini tidak jauh beda dengan tahap pertama, namun link kita sembunyikan dan saat mouse anda berhenti di menu tersebut, link akan muncul dengan transition melebar cantik ke arah kanan. setiap link diberikan class tersendiri sehingga memudahkan kita dalam memberikan efek animasi yang berbeda pada setiap link.

HTML
buatlah kode HTML seperti dibawah ini:
<ul id="paneltwo">  
 <li class="mask"><h3>MENU</h3></li>  
 <li class="linkOne"><a href="#">Link 1</a></li> 
 <li class="linkTwo"><a href="#">Link 2</a></li>  
 <li class="linkThree"><a href="#">Link 3</a></li>  
 <li class="linkFour"><a href="#">Link 4</a></li>  
 <li class="linkFive"><a href="#">Link 5</a></li>  
</ul> 
CSS
Kita melihat bahwa dengan "class='mask'" kita dapat menyembunyikan link di balik tombol "MENU", setiap Link memiliki properti yang berbeda dan transisi delay time yang berbeda pada setiap class link sehingga memberikan efect transisi kesamping yang cantik.
/* CSS3 TRANSITION ONLY EFFECT */
#paneltwo { 
 width:300px;
 list-style:none; 
 position:relative;
 display:inline;
}

#paneltwo li {  
 border-radius:3px 3px 3px 3px; 
 margin-top:5px;
 width:150px;
 float:left;
 overflow:hidden;
 position:relative;
 background: #000000;
 background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
 background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
 background: -o-linear-gradient(top, #161616 0%,#000000 100%);
 border-left:1px solid #111; 
        border-top:1px solid #111; 
        border-right:1px solid #333; 
        border-bottom:1px solid #333;
}

#paneltwo li.mask { /* It allows us to hide the link behind it */
 z-index:10; 
 overflow:hidden;
}

#paneltwo li a { 
 color:#fff; 
 display:block; 
 padding:10px;
}

#paneltwo li a:hover { 
 color:#00c6ff;
}

#paneltwo li.linkOne, 
#paneltwo li.linkTwo, 
#paneltwo li.linkThree, 
#paneltwo li.linkFour, 
#paneltwo li.linkFive {   
        -moz-transition: all 1s ease-in-out;
 -webkit-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
}

#paneltwo:hover li.linkOne, 
#paneltwo:hover li.linkTwo, 
#paneltwo:hover li.linkThree, 
#paneltwo:hover li.linkFour, 
#paneltwo:hover li.linkFive {  
        -moz-transform:translateX(0px);
 -moz-transition: all 1s ease-in-out; 
 -webkit-transform:translateX(0px);
 -webkit-transition: all 1s ease-in-out; 
 -o-transform:translateX(0px);
 -o-transition: all 1s ease-in-out; 
}

#paneltwo li.linkOne {
 -moz-transform:translateX(-90%); 
 -moz-transition-delay:0.6s; 
 
 -webkit-transform:translateX(-90%); 
 -webkit-transition-delay:0.6s; 
 
 -o-transform:translateX(-90%); 
 -o-transition-delay:0.6s; 
 
 z-index:5; 
}

#paneltwo li.linkTwo { 
 -moz-transform:translateX(-180%); 
 -moz-transition-delay:0.5s; 
 
 -webkit-transform:translateX(-180%); 
 -webkit-transition-delay:0.5s; 
 
 -o-transform:translateX(-180%); 
 -o-transition-delay:0.5s; 
 
 z-index:4;
}

#paneltwo li.linkThree { 
 -moz-transform:translateX(-270%); 
 -moz-transition-delay:0.4s; 
 
 -webkit-transform:translateX(-270%); 
 -webkit-transition-delay:0.4s; 
 
 -o-transform:translateX(-270%); 
 -o-transition-delay:0.4s;
 
 z-index:3;
}

#paneltwo li.linkFour { 
 -moz-transform:translateX(-360%); 
 -moz-transition-delay:0.3s;
 
 -webkit-transform:translateX(-360%); 
 -webkit-transition-delay:0.3s;
 
 -o-transform:translateX(-360%); 
 -o-transition-delay:0.3s; 
 z-index:2;
}

#paneltwo li.linkFive { 
 -moz-transform:translateX(-450%); 
 -moz-transition-delay:0.2s;
 
 -webkit-transform:translateX(-450%); 
 -webkit-transition-delay:0.2s;
 
 -o-transform:translateX(-450%); 
 -o-transition-delay:0.2s;
  
 z-index:1;
}

#paneltwo:hover li.linkOne { 
 -moz-transition-delay:0s; 
 -webkit-transition-delay:0s; 
 -o-transition-delay:0s; 
 z-index:5;
}

#paneltwo:hover li.linkTwo { 
 -moz-transition-delay:0.2s;
 -webkit-transition-delay:0.2s;
 -o-transition-delay:0.2s; 
 z-index:4;
}

#paneltwo:hover li.linkThree { 
 -moz-transition-delay:0.4s;
 -webkit-transition-delay:0.4s;
 -o-transition-delay:0.4s; 
 z-index:3;
}

#paneltwo:hover li.linkFour { 
 -moz-transition-delay:0.6s;
 -webkit-transition-delay:0.6s;
 -o-transition-delay:0.6s; 
 z-index:2;
}

#paneltwo:hover li.linkFive { 
 -moz-transition-delay:0.8s;
 -webkit-transition-delay:0.8s;
 -o-transition-delay:0.8s; 
 z-index:1;
}
Contoh Ketiga : 

Membuat menu navigasi dengan efect CSS3 Transition dan CSS3 Animation

cara ketiga ini merupakan kombinasi dari dari contoh pertama dan kedua dan ditambah dengan kombinasi efect dari CSS3 animasi dan CSS3 transisi

HTML
buatlah kode HTML seperti dibawah ini:
<ul id="paneltwo">  
 <li class="mask"><h3>MENU</h3></li>  
 <li class="linkOne"><a href="#">Link 1</a></li> 
 <li class="linkTwo"><a href="#">Link 2</a></li>  
 <li class="linkThree"><a href="#">Link 3</a></li>  
 <li class="linkFour"><a href="#">Link 4</a></li>  
 <li class="linkFive"><a href="#">Link 5</a></li>  
</ul> 
CSS
Tak berbeda seperti sulap dedy kobuzer.. hahhhah.. perpaduan ini memberikan efect getar dengan memadukan animasi dan delay dari keterlambatan setiap kelas yang kita buat, dan mengatur animasi terbalik saat mouse anda meninggalkan link yang di sorot, namun efect balik tersebut hanya berfungsi pada browser firefox, untuk browser seperti crome dan safari tidak muncul efect balik tersebut hanya muncul pada posisi semula tanpa efect animasi.
/* CSS3 TRANSITION and CSS3 ANIMATION EFFECT */
#panelthree { 
 width:300px;
 list-style:none; 
 position:relative;
 display:inline;
}

#panelthree li {  
 border-radius:3px 3px 3px 3px; 
 margin-top:5px;
 width:150px;
 float:left;
 overflow:hidden;
 position:relative;
 background: #000000;
 background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
 background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
 background: -o-linear-gradient(top, #161616 0%,#000000 100%);
 border-left:1px solid #111; 
        border-top:1px solid #111; 
        border-right:1px solid #333; 
        border-bottom:1px solid #333;
}

#panelthree li.mask { /* It allows us to hide the link behind it */
 z-index:10; 
 overflow:hidden;
}

#panelthree li a { 
 color:#fff; 
 display:block; 
 padding:10px;
}

#panelthree li a:hover { 
 color:#00c6ff;
}

#panelthree li.linkAnimationOne, 
#panelthree li.linkAnimationTwo, 
#panelthree li.linkAnimationThree, 
#panelthree li.linkAnimationFour, 
#panelthree li.linkAnimationFive {
        -moz-transition: all 0.5s ease-in-out;
 -webkit-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
}

#panelthree:hover li.linkAnimationOne, 
#panelthree:hover li.linkAnimationTwo, 
#panelthree:hover li.linkAnimationThree, 
#panelthree:hover li.linkAnimationFour, 
#panelthree:hover li.linkAnimationFive{ 
        -moz-animation:bounceX 0.5s linear forwards;
 -webkit-animation:bounceX 0.5s linear forwards;
}

#panelthree:hover li.linkAnimationTwo {  
 -moz-animation-delay:0.5s;
 -webkit-animation-delay:0.5s; 
}

#panelthree:hover li.linkAnimationThree { 
 -moz-animation-delay:1s;
 -webkit-animation-delay:1s; 
}

#panelthree:hover li.linkAnimationFour{ 
 -moz-animation-delay:1.5s;
 -webkit-animation-delay:1.5s; 
}

#panelthree:hover li.linkAnimationFive { 
        -moz-animation-delay:2s;
 -webkit-animation-delay:2s;
}

#panelthree li.linkAnimationOne {
 -moz-transform:translateX(-100%); 
 -webkit-transform:translateX(-100%); 

 z-index:5; 
}

#panelthree li.linkAnimationTwo {
 -moz-transform:translateX(-200%); 
 -webkit-transform:translateX(-200%); 
 
 z-index:4; 
}

#panelthree li.linkAnimationThree {
 -moz-transform:translateX(-300%); 
 -webkit-transform:translateX(-300%); 
 
 z-index:3; 
}

#panelthree li.linkAnimationFour {
 -moz-transform:translateX(-400%); 
 -webkit-transform:translateX(-400%); 
 
 z-index:2; 
}

#panelthree li.linkAnimationFive {
 -moz-transform:translateX(-500%); 
 -webkit-transform:translateX(-500%); 
 
 z-index:1; 
}
@-moz-keyframes bounceX {
    0% { 
       -moz-transform: translateX(-205px); 
       -moz-animation-timing-function: ease-in; 
    }
    
    40% { 
     -moz-transform: translateX(-100px); 
        -moz-animation-timing-function: ease-in; 
    }
    
    65% { 
     -moz-transform: translateX(-52px); 
        -moz-animation-timing-function: ease-in; 
    }
    
    82% { 
     -moz-transform: translateX(-25px); 
        -moz-animation-timing-function: ease-in;
    }
    
    92% { 
     -moz-transform: translateX(-12px); 
        -moz-animation-timing-function: ease-in; 
    }
    
    55%, 75%, 87%, 97%, 100% { 
     -moz-transform: translateX(0px); 
        -moz-animation-timing-function: ease-out; 
    }
}

@-webkit-keyframes bounceX {
    0% { 
     -webkit-transform: translateX(-205px); 
        -webkit-animation-timing-function: ease-in; 
    }
    
    40% { 
     -webkit-transform: translateX(-100px); 
        -webkit-animation-timing-function: ease-in; 
    }
    
    65% { 
     -webkit-transform: translateX(-52px); 
        -webkit-animation-timing-function: ease-in; 
    }
    
    82% { 
     -webkit-transform: translateX(-25px); 
        -webkit-animation-timing-function: ease-in; 
    }
    
    92% { 
     -webkit-transform: translateX(-12px); 
        -webkit-animation-timing-function: ease-in;
    }
    
    55%, 75%, 87%, 97%, 100% { 
     -webkit-transform: translateX(0px); 
        -webkit-animation-timing-function: ease-out; 
    }
}
}
Kesimpulan:
Dalam Percobaan yang kita lakukan diatas, kita tidak menggunakan efect jQuery untuk memanipulasi animasi CSS, murni hanya menggunakan CSS3, namun tidak semua browser dapat menjalankan animasi tersebut dengan baik, anda dapat menggunakan Modernizr  untuk browser yang tidak mendukung properti CSS3

Download Source:


Sumber: www.alessioatzeni.com/blog/css3-menu-navigation-effect/

No comments:

Post a Comment

Copyright © Go Of Stupid. All rights reserved. Template by CB