CSS3 Navigasi Menu Effect

CSS3 Navigasi Menu Effect

Hi guys sudah lama tidak Ngepost di blog kali ini saya akan menulis tutorial baru yang akan menerapkan sifat CSS3 ke menu navigasi...
Oke cekidot wkwkwk....  ^_^

Pertama temukan kode seperti di bawah ini:

]]></b:skin>

Salin kode di bawah ini dan letakkan di atasnya:

.dc3, .dc3 ul {
    padding-top: 0px;
    padding-left: 10px;
    margin: 0;
    list-style: none;
    display: block;
}

.dc3 {
    width: 150px;
    height: 60px;
    margin: 0 auto;
    position: fixed;
}

.dc3 li.menu {
    width: 150px;
    height: 60px;
    line-height: 50px;
    position: relative;
    z-index: 100;
    -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;
    transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
}

.dc3 li.menu > a {
    display: block;
    width: 130px;
    height: 46px;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -ms-transition-delay: 0.6s;
    -webkit-transition-delay: 0.6s;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_aDiXOyz0hd3oLD1VIMajhvWQFHayc4F3O93PyIdiUceWcaHCHHPayuX9-lLUUwreqB57P2B1kq4HvwWpvs7NGN7MLg2LX0HslAhYi-8WiOnChtLOw1DPiyR00RhxufKzvfNi2-qT0_0/s1600/menu.png) no-repeat center center;
}

.dc3 ul li a {
    display: block;
    width: 140px;
    height: 50px;
    opacity: 0.5;
    float: left;
    -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;
}

.dc3 li a b {
    position: absolute;
    left: -9999px;
}

.dc3 li.menu ul li.devil1 a {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEignTkLqIbHHjJWy4hLim0SrEkCJN2lCX7BwnhR4hMoQEINdy7McqM5yveZrUTFIn7DBGvewxcut5XKBPiMHVMg2lUWiCagNqOkoR0aDPks8NYneECXNUVtK9c9h6nJEoS9GuQa4bd5JaM/s1600/home.png) no-repeat center;
}

.dc3 li.menu ul li.devil2 a {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikggSMqobor7hn-N1wgbMGhswxwJID_GJ_RbdkjLowrXvsjo5-muSJuhtTS5uwUu46eVWKst1xNJEORJgXQWfyNeLZFRzc04hxEEwkKhxalRQr0fYzkj6M5ixEPk67e7Ly6TVu3UB0i_c/s1600/daftar.png) no-repeat center;
}

.dc3 li.menu ul li.devil3 a {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6W2UCLZ4gKzYWxDGXSq_xl954uuxzKjS3ger5p-bgP93BPrd3dZc1oWYvmD9pAt47VFVop-LbBvYczlm-Q1dVtI7oCduoDipk1KBGj8n6qu9KK4gdA_1JG94A6Azej38kbHVxTKJ0Mzc/s1600/about.png) no-repeat center;
}

.dc3 li ul {
    z-index: -1;
    position: absolute;
    top: 0px;
    left: 0;
    -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;
    transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
}

.dc3 li ul li {
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    height: 50px;
    -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;
    transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
}

.dc3 li.menu:hover {
    margin-top: 0px;
}

.dc3 li.menu:hover ul {
    top: 0px;
    width: 380px;
    left: 100px;
}

.dc3 li.menu:hover ul li.devil1 {
    left: 0;
    top: 0;
}

.dc3 li.menu:hover ul li.devil2 {
    left: 100px;
    top: 0;
}

.dc3 li.menu:hover ul li.devil3 {
    left: 200px;
    top: 0;
}

.dc3 li a:hover {
    opacity: 1;
}

.dc3 li.menu > a:hover {
    opacity: 0;
}

Setelah itu temukan kode ini:
</body>
salin script di bawah ini dan letakkan di atasnya:

<ul class='dc3'>
  <li class='menu'>
    <a href='http://hooter-spot.blogspot.com/'>
      <b>
        Menu
      </b>
    </a>
    <ul>
      <li class='devil1'>
        <a href='http://hooter-spot.blogspot.com/'>
          <b>
            home
          </b>
        </a>
      </li>
      <li class='devil2'>
        <a href='http://hooter-spot.blogspot.com/'>
          <b>
            daftar isi
          </b>
        </a>
      </li>
      <li class='devil3'>
        <a href='http://hooter-spot.blogspot.com/'>
          <b>
            about
          </b>
        </a>
      </li>
    </ul>
  </li>
</ul>