1 Husnul Helmi

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

2 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;

3 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;

4 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 sub-

menu. 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;

5 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;

6 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

7 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

8 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 ...) no-

ulangi 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-;

9 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;

}

10 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;

}