Hade Goreng Meunang Sorangan !


close
cbox

Cara membuat menu animasi dgn CSS

Ditulis ku Unknown Sabtu, 31 Maret 2012

Nih liat SSnya menu animasi dengan CSS !!



Biar gk kecewa liat Demo dulu >> Klik disini

Mau pasang ? ikuti tutorialnya !

1. lagin ke Blogger

2. pergi ke Rancangan/Layout

3. Klik Tambah Gadget/Add Gadget

4. Pilih HTML/Java Script

5. terus COPAS kode 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://sidayz.tk'>Home</a></li>
    <li class="menuqu2"><a href='URL km'>Menu1</a></li>
    <li class="menuqu1"><a href='URL km'>Menu2</a></li>
    <li class="menuqu1"><a href='URL km'>Menu3</a></li>
    <li class="menuqu2"><a href='URL km'>Menu4</a></li>
    <li class="menuqu1"><a href='URL km'>Menu5</a></li>
    <li class="menuqu2"><a href='URL km'>Menu6</a></li>
    <li class="menuqu1"><a href='URL km'>Menu7</a></li>
    <li class="menuqu1"><a href='URL km'>Menu8</a></li>
    <li class="menuqu2"><a href='URL km'>Menu9</a></li>
    <li class="menuqu1"><a href='URL km'>Menu10</a></li>
        </ul>
        </div>

NB : yang warna merah bisa di ganti dengan Link & namanya xD
     <li class="menuqu1"><a href='URL km'>Menu10</a></li> kode ini bisa di hapus/ditambah :D

5. Klik simpan dan liat hasilnya !

  1. ini seperti menu dropdown ya gan?

     
  2. Unknown Says:
  3. Perasaan mah gk :)

     

Posting Komentar

Komentar anda sangat berarti bagi saya !