Quotes
Laki-laki yang memperlakukan kekasihnya dengan lembut pasti dibesarkan oleh wanita yang berkelas. Orang tua yang kasar akan membesarkan anak yang kasar kepada pasangannya. Berkenalan dengan orang tua kekasih bukanlah tanda akan melamar, tapi untuk mengenal kualitas pendidik anaknya.

close
16 Jan 2014

Navigasi Menu CSS3 Sohtanaka

Navigasi Menu CSS3 Sohtanaka - Pada artikel ini masih bertema CSS3, yaitu membuat menu navigasi dengan efek hover menggulung dari Sohtanaka.

Navigasi Menu CSS3 Sohtanaka

Yang masih pemula saya jelaskan sedikit konsep efek hover menggulung menggunakan CSS3, ketika Anda menyentuh menu navigasi tersebut dengan cursor, maka yang tadinya warna dari menu navigasi tersebut berubahdan disertai animasi menggulung. Untuk lihat secara langsungnya, bisa dilihat demo di akhir artikel.

HTML

<nav id='rolling-nav'>
    <ul>
        <li><a href='#' data-clone='Home'>Home</a></li>
        <li><a href='#' data-clone='About'>About</a></li>
        <li><a href='#' data-clone='Portfolio'>Portfolio</a></li>
        <li><a href='#' data-clone='Comments'>Comments</a></li>
        <li><a href='#' data-clone='Contact'>Contact</a></li>
    </ul>
</nav>

CSS

#rolling-nav {
  font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
  color:white;
  text-transform:uppercase;
}

#rolling-nav ul {
  height:50px;
  margin:0px 0px;
  padding:0px 0px;
  overflow:hidden;
}

#rolling-nav li {
  float:left;
  display:inline;
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

#rolling-nav a,
#rolling-nav a:before {
  display:block;
  margin:0px 0px;
  padding:0px 30px;
  line-height:50px;
  color:white;
  text-decoration:none;
  background-color:#900;
  background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  position:relative;
  /* CSS Transisi */
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

#rolling-nav a:before {
  content:attr(data-clone); /* Memuat data atribut */
  position:absolute;
  top:100%;
  left:0px;
  display:block;
  background-color:white;
  background-image:-webkit-linear-gradient(top, #ddd, white);
  background-image:-moz-linear-gradient(top, #ddd, white);
  background-image:-ms-linear-gradient(top, #ddd, white);
  background-image:-o-linear-gradient(top, #ddd, white);
  background-image:linear-gradient(top, #ddd, white);
  border-top:2px solid rgba(0,0,0,0.2);
  color:#333;
}

#rolling-nav a:hover {
  margin-top:-50px;
  margin-bottom:1px;
}



Atribut data-clone digunakan untuk menyimpan nilai kloning yang dituliskan secara manual menggantikan fungsi .clone() dalam JQuery. Efek animasi dibuat dengan cara menganimasikan properti margin dengan CSS transisi.

Sumber kode : http://www.dte.web.id/2012/05/navigasi-css3-sohtanaka.html

4 Komentar

keren nih menu navigasinya ..
makasih sob.. salam damai :D

hehehe salam sejahtera deh.. :D

Mantap mass

BERI KOMENTAR | KHUSUS PENGGUNA TERDAFTAR
Silahkan beri komentar Anda dengan bijak dan sesuai dengan topik (untuk komentar OOT sebaiknya di Forum Ngopi).

Batal
Terima kasih telah berkomentar
 
notifikasi
Tutup