0 membuat menu animasi dengan CSS

Mungkin kali ini saya akan mempostingkan tutorial menu agak berbeda didalam tutorial tutorial sebelumnya saya banyak mempostingkan bagaimana cara membuat menu dengan jQuery dipostingan kali ini saya akan membuat menu animasi dengan CSS. Memang pembuatan menu ini agak sederhana jadi gampang untuk membuatnya tinggal copy paste kode CSS dan kode HTML menu tanpa jQuery kalau kalian ingin tertarik mencobanya silakan melihat contohnya di blog demo jaya

Sudah melihat oke kita mulai bagaimana cara pembuatannya

* Login ke blogger kalian masing masing
* Masuk ke Rancangan dan pergi ke Edit HTML
* Masukan kode CSS dibawah ini diatas kode ]]></b:skin>

* {
    padding: 0;
    margin: 0;
}

#topBar {
    height: 30px;
    background: #efebd9;
    font-family: Palatino, Times, serif;
    line-height: 30px;
}

#topBar a{
    text-decoration: none;
    color: #544738;
}

#topBar a:hover{
    text-decoration: underline;
}

ul, li {
 margin: 0; padding: 0;
 overflow: hidden;
}

ul li {
 float: left;
 list-style: none;
 margin-right: 1em;
}


/*Fonts*/
@font-face {
    font-family: 'KulminoituvaRegular';
    src: url('kulminoituva-webfont.eot');
    src: local('‚ò∫'), url('kulminoituva-webfont.woff') format('woff'), url('kulminoituva-webfont.ttf') format('truetype'), url('kulminoituva-webfont.svg#webfontHNAi9IoX') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Anitmation
li a:hover {
-webkit-animation-name: cssAnimation;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease
}
@-webkit-keyframes cssAnimation {
from {
-webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
}
to {
-webkit-transform: rotate(350deg) scale(1.1) skew(1deg) translate(0px)
}
}
*/

.odd a:hover {
    -webkit-transition:All .5s ease-in-out;
    -moz-transition:All .5s ease-in-out;
    -o-transition:All .5s ease-in-out;
    -webkit-transform: rotate(-10deg) scale(1.2);
    -moz-transform: rotate(-10deg) scale(1.2);
    -o-transform: rotate(-10deg) scale(1.2);
}

.even a:hover {
-webkit-transition:All .5s ease-in-out;
-moz-transition:All .5s ease-in-out;
-o-transition:All .5s ease-in-out;
-webkit-transform: rotate(10deg) scale(1.2);
-moz-transform: rotate(10deg) scale(1.2);
-o-transform: rotate(10deg) scale(1.2);
}

#text h1{
    text-align: left;
    margin-top: 15px;
    margin-left: 10px;
}

#text p{
    font-family: helvetica, sans-serif;
    text-align: left;
    font-size: 12px;
    margin: 10px 0 50px 10px;
    line-height: 20px;
    width: 780px;
   
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

* Dan langkah terakhir letakan kode dibawah ini di Gadget kalian di Elemen Laman caranya yaitu:
- Tambah Gadget
- Dan pilih HTML/JavaScript Tambah

 <div id="container">
        <ul id="nav">
            <li class="odd"><a href="http://shofisanjaya.blogspot.com/">Home</a></li>
            <li class="even"><a href="http://alamat-url">About</a></li>

            <li class="odd"><a href="http://alamat-url">Blog</a></li>
            <li class="even"><a href="http://alamat-url">Contact</a></li>              
        </ul>
      
      
        <div id="work">
        </div></div>

* Ganti alamat-url dengan alamat url kalian masing masing

Tweet

Komentar →