CSS3 menu dropdown animasi

By.Husnul Helmi Ini adalah hal yang pasti bahwa CSS3 fitur seperti transisi, animasi, dan transformasi dapat menambah bumbu ekstra untuk desain Anda. Dalam artikel ini Anda akan melihat bagaimana Anda dapat membangun sebuah menu dropdown animasi CSS3 mengagumkan dengan beberapa fitur keren.

Lihat demo Berikut adalah preview cepat untuk menu dropdown CSS3 animasi yang kita akan membuat hari ini:

Ingat sebelumnya ? Bahwa menu is awesome, dan terima kasih kepada Anda adalah tutorial yang paling populer di sini (saat ini). Mungkin judul terbaik untuk artikel ini akan menjadi: CSS3 menu dropdown - Revisited. Alasan saya mengatakan itu adalah karena dalam artikel ini Anda akan belajar cara membuat menu dropdown CSS3 animasi berdasarkan kami sebelumnya

The HTML
1 Husnul Helmi

Struktur HTML tidak berubah sama sekali, sederhana dan minim. Berikut kutipan:
<ul id="menu"> <li> <a href="#"> Rumah </ a> </ li> <li> <a href="#"> Kategori </ a> <ul> <li> <a href="#"> CSS </ a> </ li> <li> <a href="#"> Desain grafis </ a> </ li> <li> <a href="#"> Pengembangan alat </ a> </ li> <li> <a href="#"> desain web </ a> </ li> </ Ul> </ Li> <li> <a href="#"> Kerja </ a> </ li> <li> <a href="#"> Tentang </ a> </ li> <li> <a href="#"> Contact </ a> </ li> </ Ul>

CSS
Saya direvisi dan diperbaiki gaya dalam rangka menciptakan menu ini CSS3 unik dropdown animasi. Jadi, di bawah ini Anda dapat menemukan potongan-potongan berkomentar gaya: Mini ulang Atur default ul gaya.
# Menu, # menu ul { margin: 0; padding: 0; Daftar-style: none; }

Main tingkat

# Menu { width: 960px; margin: 60px auto; border: 1px solid # 222;

2 Husnul Helmi

background-color: # 111; background-image: linear-gradient (# 444, # 111); border-radius: 6px; box-shadow: 0 1px 1px # 777; } # Menu: sebelumnya, # Menu: setelah { isi: ""; display: table; } # Menu: setelah { clear: both; } # Menu { zoom: 1; }

Daftar elemen

Mohon diperhatikan #menu li:hover > a pemilih . Ini mungkin yang paling penting trik CSS untuk menu dropdown CSS3. Jadi, ini adalah bagaimana ini bekerja: Pilih "a" elemen yang merupakan anak dari "li", yang "li" elemen harus merupakan keturunan dari "menu #". Baca selengkapnya di sini .
# Menu li { float: left; perbatasan-kanan: 1px solid # 222; box-shadow: 1px 0 0 # 444; position: relative; } # Menu { float: left; padding: 12px 30px; color: # 999; text-transform: uppercase; font: 12px tebal Arial, Helvetica;

3 Husnul Helmi

text-decoration: none; text-shadow: 0 1px 0 # 000; } # Menu li: hover> a { color: # fafafa; } * Html # menu li a: hover {/ * IE6 * hanya / color: # fafafa; }

Submenu Dengan CSS3 transitons kita dapat menghidupkan perubahan sifat CSS seperti margin atau opacity . Ini sangat dingin dan saya telah menggunakan ini untuk menghidupkan CSS3 submenu. Hasilnya adalah besar jika Anda bertanya kepada saya:

# Menu ul { margin: 20px 0 0 0; _margin: 0; / * IE6 hanya * / opacity: 0; visibility: hidden; position: absolute; top: 38px; kiri: 0; z-index: 1; background: # 444; background: linear-gradient (# 444, # 111); box-shadow: 0 1px 0-RGBA (255.255.255, .3); border-radius: 3px; Transisi: semua .2 s kemudahan-in-out; } # Menu li: hover> ul { opacity: 1; visibility: terlihat; margin: 0; } # Menu ul ul { top: 0; kiri: 150px;

4 Husnul Helmi

margin: 0 0 0 20px; _margin: 0; / * IE6 hanya * / box-shadow: 1px 0 0-RGBA (255.255.255, .3); } # Menu ul li { float: none; display: block; border: 0; _line-height: 0; / * IE6 hanya * / box-shadow: 0 1px 0 # 111, 0 0 2px # 666; } # Menu ul li: terakhir anak { box-shadow: none; } # Menu ul {a padding: 10px; width: 130px; _height: 10px; / * IE6 hanya * / display: block; white-space: nowrap; float: none; text-transform: none; } # Menu ul a: hover { background-color: # 0186ba; background-image: linear-gradient (# 04acec, # 0186ba); }

Elemen daftar pertama dan terakhir gaya

# Menu ul li: first-child> a { border-radius: 3px 3px 0 0; } # Menu ul li: first-child> a: setelah { isi:''; position: absolute; kiri: 40px;

5 Husnul Helmi

top:-6px; border-left: 6px padat transparan; perbatasan-kanan: 6px padat transparan; border-bottom: 6px solid # 444; } # Menu ul ul li: pertama-anak: setelah { kiri:-6px; top: 50%; margin-top:-6px; border-left: 0; border-bottom: 6px padat transparan; border-top: 6px padat transparan; perbatasan-kanan: 6px solid # 3b3b3b; } # Menu ul li: pertama-anak: hover: setelah { border-bottom-color: # 04acec; } # Menu ul ul li: pertama-anak: hover: setelah { perbatasan-kanan warna: # 0299d3; border-bottom-color: transparent; } # Menu ul li: terakhir anak> a { border-radius: 0 0 3px 3px; }

JQuery
Seperti yang Anda sudah terbiasa, IE6 mendapat perhatian ekstra:
$ (Function () { if ($. browser.msie && $. browser.version.substr (0,1) <7) { $ ('Li'). Memiliki ('ul'). Gunaka mouse (function () { $ (Ini) anak ('ul') css ('visibilitas', 'terlihat')..; }). Mouseout (function () { . $ (Ini) anak ('ul') css ('visibilitas', 'tersembunyi').; }) } });

Sementara :hover pseudo-class tidak bekerja untuk elemen selain jangkar, kita hanya perlu menambahkan potongan jQuery kecil untuk memperbaikinya. Ini cukup jelas. Lihat demo

Update: Handphone navigasi dukungan

6 Husnul Helmi

Ini adalah sesuatu yang saya ingin lakukan untuk sementara waktu dan saya akhirnya berhasil. Saya baru saja menambahkan dukungan untuk perangkat mobile dan tetap navigasi untuk iPad. Kau tahu betapa aku mencintai CSS hanya solusi, tapi kali ini kita akan menggunakan beberapa jQuery untuk meningkatkan menu ini. Untuk melihat hasilnya, Anda dapat mempersempit jendela browser Anda atau browsing dengan smartphone Anda. Meta tag viewport Untuk menjaga segala sesuatu pada skala yang benar, hal pertama yang ditambahkan adalah meta viewport tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0">

Kecil HTML pembaruan Anda perlu untuk membungkus struktur HTML di atas menggunakan sesuatu seperti: <nav id="menu-wrap"> . Ini akan kami relative dudukan untuk navigasi mobile. The add jQuery Setelah beban halaman, kita akan menambahkan #menu-trigger unsur yang tidak persis apa yang Anda pikirkan: akan memicu menu ponsel ketika akan diklik. Selanjutnya, di CSS, Anda akan melihat bahwa unsur ini ditampilkan menggunakan CSS3 pertanyaan media. Hal lain yang di sini adalah deteksi perangkat iPad. Seperti yang dapat Anda lihat di bawah, kami akan menghapus efek transisi mewah dan menempel Toggling display: none/block . Dengan cara ini, fungsi tersebut akan dipertahankan juga pada iPad.
/ * Handphone * / $ ('# Menu-wrap') tambahkan ('<div id="menu-trigger"> Menu </ div>').; $ ("# Menu-pemicu") pada (. "Klik", function () { . $ ("# Menu") slideToggle (); }); / / IPad

7 Husnul Helmi

var isiPad = navigator.userAgent.match (/ iPad / i) = null;! if (isiPad) $ ('# menu ul') addClass ('no-transisi').;

Mobile CSS Di sini, CSS3 Media query melakukan trik. Kami akan menambahkan aturan CSS untuk menimpa gaya awal:
# Menu-memicu {/ * Sembunyikan awalnya * / display: none; } @ Media screen dan (max-width: 600px) { # Menu-wrap { position: relative; } # Menu-wrap * { box-sizing: border-kotak; } # Menu-memicu { display: block; / * Tampilkan sekarang * / height: 40px; line-height: 40px; kursor: pointer; padding: 0 0 0 35px; border: 1px solid # 222; color: # fafafa; font-weight: bold; background-color: # 111; / * Beberapa latar belakang di sini, yang pertama adalah base64 encoded * / background: url (data: image / png; base64, iVBOR ...) noulangi pusat 10px, linear-gradien (# 444, # 111); border-radius: 6px; box-shadow: 0 1px 1px # 777, 0 0 1px # 666 inset; } # Menu { 0; padding:: margin 10px; position: absolute; top: 40px; width: 100%; z-index: 1; display: none; box-shadow: none; } # Menu: setelah { isi:''; position: absolute; kiri: 25px; top: 8px-;

8 Husnul Helmi

border-left: 8px padat transparan; perbatasan-kanan: 8px padat transparan; border-bottom: 8px solid # 444; } # Menu ul { Posisi: statis; visibility: terlihat; opacity: 1; margin: 0; background: none; box-shadow: none; } # Menu ul ul { margin: 0 0 0 20px penting;! box-shadow: none; } # Menu li { Posisi: statis; display: block; float: none; border: 0; margin: 5px; box-shadow: none; } # Menu ul li { margin-left: 20px; box-shadow: none; } # Menu { display: block; float: none; padding: 0; color: # 999; } # Menu: hover { color: # fafafa; } # Menu ul {a padding: 0; width: auto; } # Menu ul a: hover { background: none; } # Menu ul li: pertama-anak: setelah, # Menu ul ul li: pertama-anak: setelah { border: 0; }

9 Husnul Helmi

} @ Media screen dan (min-width: 600px) { # Menu { display: block yang penting; } } / * IPad * / . No-transisi { Transisi: none; opacity: 1; visibility: terlihat; display: none; } # Menu li:. Melayang-layang> no-transisi { display: block; }

10 Husnul Helmi