jQuery dan CSS3 menu Interaktif

 jQuery dan CSS3 menu Interaktif

dari Contoh gambar ini akan memberitahu elo bagaimana untuk membuat menu interaktif menggunakan CSS3 dan jQuery. dari contoh ini pada menu jquery Selain menjadi menu, contoh ini juga dapat berfungsi sebagai halaman website yang sempurna. Misalnya, blok dapat diberi nama "Contact" dan bisa berisi formulir kontak yang bagus.




Di HTML Tidak ada yang terlalu rumit di sini, setiap blok memiliki judul yang tersembunyi sekali isi yang berdekatan akan dipicu. Mengenai tabindex dan membahas sedikit tentang kodenya.

     satu
     

bla bla bla...

...

     Dua
     

bla bla bla...

CSS
Di baris berikut gw akan mencoba untuk menjelaskan sedikit gaya yang digunakan untuk membuat contoh ini. Pertama-tama kita akan menambahkan beberapa gaya dasar untuk wrapper daftar termasuk effect mengapung. Juga, lo mungkin telah memperhatikan counter-reset: li; , deklaration, dan lo pernah melihat itu sebelumnya dan gue akan menggunakannya lebih lagi untuk menciptakan efek counter bagus.

.menu{
  width: 620px;
  margin: 100px auto; padding: 15px;
  list-style: none;
  counter-reset: li;
  background: #eee;
  box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
  border-radius: 10px;
}

.menu:before,
.menu:after {
  content: "";
  display: table;
}

.menu:after {
  clear: both;
}

.menu {
  zoom:1;
}

>>LIHAT DEMO<<

>>LIHAT DEMO<<

>>DOWNLOAD FULL SOURCE<<