'SELAMAT DATANG' di blog ianhacks. Semoga apa yang saya berikan bisa membuat sobat semua lebih maju dan lebih kreatif dalam segala hal..
  • Web
  • ianhacks
  • Cara Membuat Menu Animasi CSS3

    Kali ini aku ingin membuat posting mengenai Cara Membuat Menu Animasi CSS3, yang hasilnya akan terlihat seperti gambar disamping, kita bisa langsung mengenerate kode CSS3 dari bentuk yang kita inginkan.

    Akan tetapi yang patut diingat, tidak semua browser support Menu CSS3, untuk melihat tabel browser


     mana saja yang support dengan CSS3, bisa dilihat di www.findmebyip.com

    Pertanyaanya adalah Bagaimana proses diatas bisa sampai terjadi.. ?
    Yang perlu anda sisipkan adalah kode CSS3 dan HTML di bawah ini.

    <style type="text/css">
    .menuqu ul li{display: inline;}
    .menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff; list-style: none;
    -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
    }
    .menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #BFDCFF; border: 2px solid #fff; list-style: none;
    -webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
    }
    .menuqu1:hover, .menuqu2:hover{ background: #F0BFFF; color:#ccc;
    -webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
    }
    </style>


    <div class="menuqu">
    <ul>
    <li class="menuqu1"><a href='http://lora-malunk.blogspot.com'>Home</a></li>
    <li class="menuqu2"><a href='URL 1'>Menu1</a></li>
    <li class="menuqu1"><a href='URL 2'>Menu2</a></li>
    <li class="menuqu1"><a href='URL 3'>Menu3</a></li>
    <li class="menuqu2"><a href='URL 4'>Menu4</a></li>
    <li class="menuqu1"><a href='URL 5'>Menu5</a></li>
    </ul>
    </div>

    Masukkan ke Gadget HTML/JavaScript

    Yang perlu diperhatikan dari kode diatas adalah kode yang berwarna merah, dan angka yang ada disekitarnya.
    1. angka 0.5s menandakan waktu perubahan dari animasi
    2. angka 25deg menandakan rotasi perputaran dari area menu
    3. angka 0deg menandakan bentuk akhir dari rotasi perputaran dari area menu
    4. untuk huruf menuqu1 dan menuqu2 merupakan kode untuk kondisi dari properti yang telah di tentukan pada kode CSS3-nya

    Share this:

    Post a Comment

     
    Copyright © Sharing Ilmu Pengetahuan | Ianhacks. Designed by OddThemes & Best Wordpress Themes 2018