Di kesempatan kali ini bayarsaja.blogspot.com akan menyajikan artikel tentang Cara Membuat Menu Drop-down Nav Dengan HTML5, CSS3 dan JQuery. Semoga dengan artikel Cara Membuat Menu Drop-down Nav Dengan HTML5, CSS3 dan JQuery akan menambah pengetahuan untuk anda pembaca setia bayarsaja.blogspot.com
Dalam tutorial ini, kita akan melihat dan melihat apa yang kita dapat mencapai dengan HTML5 dan CSS3 ketika datang ke pokok situs web saat ini: menu drop-down yang sederhana navigasi. Kami juga akan menggunakan jQuery untuk menangani efek dan menambahkan sentuhan akhir bagi kita.
HTML5 membawa ke spec elemen <nav> khusus yang harus digunakan sebagai wadah untuk setiap struktur navigasi utama, seperti menu situs utama vertikal atau horisontal navigasi, atau meja di halaman isi misalnya. IE sayangnya tidak mendukung elemen baru, tapi ada memperbaiki sederhana bisa kita gunakan, yang saya yakin Anda semua sadar.
Menggunakan CSS3 kita dapat melakukan jauh dengan apa yang akan diperlukan penggunaan gambar latar belakang dan mungkin beberapa wadah pembungkus tambahan atau dua dan mengandalkan (hampir) murni pada beberapa properti gaya baru, seperti sudut bulat dan drop-bayangan misalnya, yang tersedia untuk mendukung browser. Sekali lagi, tidak semua browser (batuk, IE!) Mendukung aturan baru, tapi kita bisa sangat mudah memberikan jatuh kembali solusi untuk browser yang tidak dapat menangani gaya kami.Langkah 1. Memulai
Kita akan memerlukan salinan rilis terbaru dari jQuery, versi 1.4.2 pada saat penulisan, serta salinan dari versi saat ini (1.1) dari perpustakaan Modernizr sangat baik, yang akan kita gunakan untuk menargetkan browser yang mendukung dengan CSS3 yang kita gunakan.
Buat folder proyek untuk file-file kita akan membuat suatu tempat pada mesin Anda dan menyebutnya nav, dalam folder ini membuat tiga folder baru, yang disebut js, satu disebut css dan satu disebut fallback. Pastikan salinan dari kedua jQuery dan Modernizr disimpan dalam folder js.Langkah 2. Page mendasari
Mulailah dengan membuat coding halaman berikut di editor kode favorit Anda:melihat plaincopy ke clipboardprint?
1. <DOCTYPE html!>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8">
5. <title> HTML5, CSS3 dan jQuery Navigasi menu </ title>
6. href="css/nav.css"> rel="stylesheet" <link
7. <-! [Jika IE]>
8. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script>
9. <[Endif] ->
10. </ Head>
11. <body class="no-js">
12. <nav id="topNav">
13. <ul>
14. <li> <a href="#" title="Nav Tautan 1"> Tautan Nav 1 </ a> </ li>
15. <li>
16. <a href="#" title="Nav Tautan 1"> Nav Link 2
17. <ul>
18. <li> <a href="#" title="Sub Tautan Nav Nav 1"> Tautan Sub 1 </ a> </ li>
19. <li> <a href="#" title="Sub Nav Nav Tautan 2"> Sub Link 2 </ a> </ li>
20. <li> <a href="#" title="Sub Tautan Nav Nav 3"> Tautan Sub 3 </ a> </ li>
21. <li> <a href="#" title="Sub Tautan Nav Nav 4"> Tautan Sub 4 </ a> </ li>
22. <li class="last"> <a href="#" title="Sub Nav Nav Tautan 5"> Sub Tautan 5 </ a> </ li>
23. </ Ul>
24. </ Li>
25. <li> <a href="#" title="Nav Tautan 1"> Tautan Nav 3 </ a> </ li>
26. <li> <a href="#" title="Nav Tautan 1"> Nav Link 4 </ a> </ li>
27. <li> <a href="#" title="Nav Tautan 1"> Tautan Nav 5 </ a> </ li>
28. </ Ul>
29. </ Nav>
30. <script src="js/jquery.js"> </ script>
31. <script src="js/modernizr.js"> </ script>
32. </ Body>
33. </ Html>
<DOCTYPE html!><html lang="en"><head><meta charset="utf-8"><title> HTML5, CSS3 dan jQuery Navigasi menu </ title>href="css/nav.css"> rel="stylesheet" <link<-! [Jika IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script><[Endif] -></ Head><body class="no-js"><nav id="topNav"><ul>
<li> <a href="#" title="Nav Tautan 1"> Tautan Nav 1 </ a> </ li><li>
<a href="#" title="Nav Tautan 1"> Nav Link 2<ul>
<li> <a href="#" title="Sub Tautan Nav Nav 1"> Tautan Sub 1 </ a> </ li><li> <a href="#" title="Sub Nav Nav Tautan 2"> Sub Link 2 </ a> </ li><li> <a href="#" title="Sub Tautan Nav Nav 3"> Tautan Sub 3 </ a> </ li><li> <a href="#" title="Sub Tautan Nav Nav 4"> Tautan Sub 4 </ a> </ li><li class="last"> <a href="#" title="Sub Nav Nav Tautan 5"> Sub Tautan 5 </ a> </ li>
</ Ul></ Li><li> <a href="#" title="Nav Tautan 1"> Tautan Nav 3 </ a> </ li><li> <a href="#" title="Nav Tautan 1"> Nav Link 4 </ a> </ li><li> <a href="#" title="Nav Tautan 1"> Tautan Nav 5 </ a> </ li></ Ul></ Nav><script src="js/jquery.js"> </ script><script src="js/modernizr.js"> </ script></ Body></ Html>
Simpan ini sebagai nav.html dalam folder nav. Kami memulai dengan DOCTYPE HTML5 minimal, yang memungkinkan kita untuk menentukan jenis dokumen seperempat dari kode kita digunakan untuk menggunakan. Kami juga menentukan bahasa default dan pengkodean karakter, walaupun dokumen masih akan memvalidasi tanpa kedua hal, itu praktek yang baik untuk memasukkan mereka dan halaman akan memicu peringatan validator jika bahasa default tidak ditentukan. Kami kemudian link ke style sheet (kita akan membuat ini berikutnya) dan menggunakan komentar bersyarat yang menargetkan IE untuk memuat naskah baik Remy Sharp html5.js jika diperlukan.
Dalam tubuh halaman kita memiliki elemen <nav> sebagai wadah untuk daftar link tradisional, dan kami telah dilemparkan dalam menu sub-untuk mengukur baik juga. Unsur tidak ajaib membuat menu navigasi bagi kita, dan itu tidak termasuk elemen MENUITEM baru atau sesuatu seperti itu sehingga daftar unordered masih merupakan pilihan yang tepat. Unsur <nav> hanya sebuah wadah semantik untuk menu kami, yang menggambarkan fungsinya dalam dokumen, untuk menggantikan elemen generik & div> yang menyatakan tidak inheren tentang tujuan pada halaman.
Pada akhir tubuh kita link ke file script jQuery dan Modernizr. Kami akan menggunakan jQuery sedikit nanti ketika kita datang untuk menambahkan perilaku untuk menu, tapi Modernizr akan melakukan hal tersebut langsung, mendeteksi kemampuan browser yang digunakan dan menambahkan serangkaian nama kelas untuk elemen HTML, yang kita bisa gunakan untuk menambahkan CSS3 kami sehingga hanya diterapkan pada browser yang dapat memanfaatkannya. Kami juga telah menambahkan nama kelas no-js ke <body> halaman, kami akan menghapusnya nanti jika JavaScript diaktifkan sehingga kita juga dapat menggunakannya untuk menambahkan gaya yang seharusnya hanya diterapkan ketika JavaScript dinonaktifkan.Langkah 3. Beberapa Styling Dasar
Sekarang mari kita menambahkan beberapa styling dasar, menciptakan gaya-sheet berikut:melihat plaincopy ke clipboardprint?
1. / * JS dinonaktifkan gaya * /
2. . No-js nav li: hover ul {display: block;}
3. / * Dasar nav gaya * /
4. nav {display: block; margin: 0 auto 20px; border: 1px solid # 222; position: relative; background-color: # 6a6a6a; font: 16px Tahoma, Sans-serif;}
5. nav ul {padding: 0; margin: 0;}
6. nav li {position: relative; float: left; daftar-gaya-type: none;}
7. nav ul: setelah {isi:; display ".": block; height: 0; jelas: keduanya; visibility: hidden;}
8. nav li a {display: block; padding: 10px 20px; border-left: 1px solid # 999; perbatasan-kanan: 1px solid # 222, warna: # eee; text-decoration: none;}
9. nav li a: focus {outline: none; text-decoration: underline;}
10. nav li: pertama-anak {border-left: none;}
11. nav li.last a {border-kanan: none;}
12. nav rentang {display: block; float: rightright; margin-left: 5px;}
13. nav ul ul {display: none; width: 100%; position: absolute; kiri: 0; background: # 6a6a6a;}
14. nav ul ul li {float: none;}
15. nav ul ul a {padding: 5px 10px; border-left: none; border kanan: none; font-size: 14px;}
16. nav ul ul a: hover {background-color: # 555;}
17. Simpan file ini di direktori css sebagai nav.css. Aturan pertama adalah murni ketika JavaScript dinonaktifkan, dan memungkinkan submenu tersembunyi untuk ditampilkan di hover murni dengan CSS. Sisa kode mendefinisikan satu set gaya dasar bahwa format menu dengan cara yang kita inginkan tanpa menambahkan sesuatu yang terlalu dekoratif. Perhatikan bahwa kita menggunakan: setelah pseudo-pemilih untuk menghapus daftar item mengambang, biasanya ini akan ditambahkan menggunakan nama kelas untuk bahwa hal itu bisa diterapkan pada wadah dari setiap elemen melayang pada halaman. Pada titik ini halaman akan terlihat seperti ini:
/ * JS dinonaktifkan gaya * /. No-js nav li: hover ul {display: block;}/ * Dasar nav gaya * /nav {display: block; margin: 0 auto 20px; border: 1px solid # 222; position: relative; background-color: # 6a6a6a; font: 16px Tahoma, Sans-serif;}nav ul {padding: 0; margin: 0;}nav li {position: relative; float: left; daftar-gaya-type: none;}nav ul: setelah {isi:; display ".": block; height: 0; jelas: keduanya; visibility: hidden;}nav li a {display: block; padding: 10px 20px; border-left: 1px solid # 999; perbatasan-kanan: 1px solid # 222, warna: # eee; text-decoration: none;}nav li a: focus {outline: none; text-decoration: underline;}nav li: pertama-anak {border-left: none;}nav li.last a {border-kanan: none;}nav rentang {display: block; float: right; margin-left: 5px;}nav ul ul {display: none; width: 100%; position: absolute; kiri: 0; background: # 6a6a6a;}nav ul ul li {float: none;}nav ul ul a {padding: 5px 10px; border-left: none; border kanan: none; font-size: 14px;}nav ul ul a: hover {background-color: # 555;}Simpan file ini di direktori css sebagai nav.css. Aturan pertama adalah murni ketika JavaScript dinonaktifkan, dan memungkinkan submenu tersembunyi untuk ditampilkan di hover murni dengan CSS. Sisa kode mendefinisikan satu set gaya dasar yang format menu <nav> dengan cara yang kita inginkan tanpa menambahkan sesuatu yang terlalu dekoratif. Perhatikan bahwa kita menggunakan: setelah pseudo-pemilih untuk menghapus daftar item mengambang, biasanya ini akan ditambahkan menggunakan nama kelas untuk bahwa hal itu bisa diterapkan pada wadah dari setiap elemen melayang pada halaman. Pada titik ini halaman akan terlihat seperti ini:
Langkah 4. CSS3
Selanjutnya kita dapat menambahkan CSS3 kami:melihat plaincopy ke clipboardprint?
1. / * CSS3 * /
2. . Borderradius nav {-moz-border-radius: 4px;-webkit-border-radius: 4px; border-radius: 4px;}
3. Cssgradients nav {background-image:-moz-linear-gradient (0% 22px 90deg, # 222, # 999), background-image:.-Webkit-gradient (linear, 0% 0%, 0% 70%, dari ( # 999), untuk (# 222));}
4. . Boxshadow.rgba nav {-moz-box-shadow: 2px 2px 2px RGBA (0,0,0, 75);-webkit-box-shadow: 2px 2px 2px RGBA (0,0,0, 75); box-shadow: 2px 2px 2px RGBA (0,0,0, 75);}
5. Cssgradients nav li: hover {background-image:-moz-linear-gradient (0% 100px 90deg, # 999, # 222), background-image:-webkit-gradient (linear, 0% 0%, 0% 100%. , dari (# 222), untuk (# 555));}
6. . Borderradius nav ul ul {-moz-border-radius-bottomleft: 4px;-moz-border-radius-bottomright: 4px;-webkit-border-bottom-kiri-radius: 4px;-webkit-border-bottom-rightright- radius: 4px; border-bottom-kiri-radius: 4px; border-bottom-rightright-radius: 4px;}
7. Boxshadow.rgba nav ul ul {background-color: RGBA (0,0,0,0.8);-moz-box-shadow:. 2px 2px 2px RGBA (0,0,0, .8);-webkit-box- shadow: 2px 2px 2px RGBA (0,0,0, .8), box-shadow: 2px 2px 2px RGBA (0,0,0, .8);}
8. . RGBA nav ul ul li {border-left: solid 1px RGBA (0,0,0,0.1); perbatasan-kanan: 1px RGBA padat (0,0,0,0.1);}
9. . RGBA nav ul ul a: hover {background-color: RGBA (85,85,85, .9);}
10. . Borderradius.rgba nav ul ul li.last {border-left: solid 1px RGBA (0,0,0,0.1); border-bottom: RGBA solid 1px (0,0,0,0.1);-moz-border- radius-bottomleft: 4px;-moz-border-radius-bottomright: 4px;-webkit-border-bottom-kiri-radius: 4px;-webkit-border-bottom-rightright-radius: 4px; border-bottom-kiri-radius : 4px; border-bottom-rightright-radius: 4px;}
11. Csstransforms ul rentang. {-Moz-transform: rotate (-180deg);-webkit-transform: rotate (-180deg);}
/ * CSS3 * /. Borderradius nav {-moz-border-radius: 4px;-webkit-border-radius: 4px; border-radius: 4px;}Cssgradients nav {background-image:-moz-linear-gradient (0% 22px 90deg, # 222, # 999), background-image:.-Webkit-gradient (linear, 0% 0%, 0% 70%, dari ( # 999), untuk (# 222));}. Boxshadow.rgba nav {-moz-box-shadow: 2px 2px 2px RGBA (0,0,0, 75);-webkit-box-shadow: 2px 2px 2px RGBA (0,0,0, 75); box-shadow: 2px 2px 2px RGBA (0,0,0, 75);}Cssgradients nav li: hover {background-image:-moz-linear-gradient (0% 100px 90deg, # 999, # 222), background-image:-webkit-gradient (linear, 0% 0%, 0% 100%. , dari (# 222), untuk (# 555));}. Borderradius nav ul ul {-moz-border-radius-bottomleft: 4px;-moz-border-radius-bottomright: 4px;-webkit-border-bottom-kiri-radius: 4px;-webkit-border-bottom-kanan radius: 4px; border-bottom-kiri-radius: 4px; border-bottom-kanan radius: 4px;}Boxshadow.rgba nav ul ul {background-color: RGBA (0,0,0,0.8);-moz-box-shadow:. 2px 2px 2px RGBA (0,0,0, .8);-webkit-box- shadow: 2px 2px 2px RGBA (0,0,0, .8), box-shadow: 2px 2px 2px RGBA (0,0,0, .8);}. RGBA nav ul ul li {border-left: solid 1px RGBA (0,0,0,0.1); perbatasan-kanan: 1px RGBA padat (0,0,0,0.1);}. RGBA nav ul ul a: hover {background-color: RGBA (85,85,85, .9);}. Borderradius.rgba nav ul ul li.last {border-left: solid 1px RGBA (0,0,0,0.1); border-bottom: RGBA solid 1px (0,0,0,0.1);-moz-border- radius-bottomleft: 4px;-moz-border-radius-bottomright: 4px;-webkit-border-bottom-kiri-radius: 4px;-webkit-border-bottom-kanan radius: 4px; border-bottom-kiri-radius : 4px; border-bottom-kanan radius: 4px;}Csstransforms ul rentang. {-Moz-transform: rotate (-180deg);-webkit-transform: rotate (-180deg);}
Menggunakan kelas ditambahkan ke elemen <html> oleh Modernizr kita dapat dengan mudah dan aman menambahkan CSS3 gaya yang kita inginkan. Kami menggunakan gaya border-radius untuk memberikan elemen <nav> sudut dibulatkan, Kami perlu memberikan deklarasi Mozilla dan WebKit gaya diawali serta perbatasan-radius standar gaya untuk browser yang mendukung mereka, seperti Opera. Kita perlu melakukan ini dengan sebagian besar dari kami CSS3 gaya.
Serta sudut-pembulatan <nav> kita juga memberikan gradien dan drop shadow. Gaya gradien yang cukup kompleks dan berbeda untuk browser Mozilla dan WebKit berbasis, yang merupakan satu-satunya browser saat menerapkannya. Kedua browser menggunakan properti background-image. Dalam Firefox kita menggunakan-moz-linear-gradien untuk menambahkan gradien linier. Hal ini membutuhkan nilai-nilai yang sesuai dengan titik awal dari gradien (0%), titik di mana warna pertama blends ke warna kedua (22px), sudut sumbu gradien (90deg), warna pertama (# 999) dan warna kedua (# 222).
Kita bisa mendapatkan gradien yang sama di Safari atau Chrome menggunakan-webkit-gradient dan sintaks yang agak berbeda, kami menetapkan bahwa ia harus menjadi gradien linier dan kemudian memberikan dua poin yang memberitahu browser mana gradien harus memulai dan mengakhiri. Nilai-nilai dalam contoh sesuai dengan kiri, nilai atas dan kanan dari 0% dan 70% untuk bagian bawah, yang memberi kami gaya yang sama seperti yang digunakan di Firefox. Terakhir kita tentukan warna gradien.
Ketika kita menerapkan drop-shadow kita menggabungkannya dengan kelas Modernizr untuk RGBA serta boxshadow sehingga bayangan kita bisa transparan. Properti untuk Mozilla dan WebKit yang sama, dan kami juga menyediakan properti kotak-bayangan yang sebenarnya untuk mendukung browser. Nilai-nilai yang kita tentukan untuk aturan ini adalah meninggalkan offset (2px), bagian atas offset (2px), jumlah kabur (2px) dan terakhir warna bayangan (0,0,0). Warnanya mana kita menggunakan RGBA, yang memungkinkan kita untuk mengatur opacity menjadi 75% (75).
Gaya lain yang menarik kita gunakan adalah mengubah beberapa teks untuk memutar 180 derajat, ketika kita menulis naskah dalam sekejap, Anda akan melihat bahwa kita menambahkan indikator sub menu dalam bentuk tanda caret untuk setiap item daftar yang berisi submenu - gaya ini akan memutar karakter untuk yang menunjuk ke bawah, yang berarti bahwa dalam mendukung browser kita bahkan tidak perlu menggunakan sebuah gambar untuk fitur ini.
Aturan yang tersisa mengatur gradien yang berbeda, tepi bulat, opacity dengan RGBA dan bayangan pada unsur-unsur lain dalam menu <nav>, seperti sudut bawah bagus bulat dan bayangan drop pada submenu, serta pembalik gradien untuk negara hover menarik . Sekarang menu navigasi kami akan terlihat seperti ini di browser mendukung:
Pada browser yang mendukung kita dapat membuat elemen kita terlihat cukup panas tanpa menggunakan gambar tunggal, yang berarti halaman kami akan memuat lebih cepat dengan permintaan HTTP jauh lebih sedikit. Namun, tidak semua browser akan mendukung styling CSS3, terutama setiap versi IE, sehingga kita masih perlu mendefinisikan gaya fallback kami. Tambahkan kode berikut pada style sheet:melihat plaincopy ke clipboardprint?
1. / * Fallbacks * /
2. .. No-cssgradients nav, ada-js nav {padding-bottom: 4px; border: none; background: url (.. / Fallback / navBG.gif) repeat-x 0 0;}
3. . No-borderradius nav ul, no-js nav ul {background: url (/ fallback / navRight.gif..) No-repeat 100% 0;}.
4. .. No-borderradius nav ul ul, no-js nav ul ul {background: none;}
5. . No-borderradius nav li, no-js nav li {height: 44px;}.
6. No-cssgradients nav li: hover, no-js nav li: hover. {Background: (.. / Fallback / navOverBG.gif) url repeat-x 0 0;}.
7. . No-nav li li borderradius, no-js nav li li. {Height: auto; width: 98%; kiri:-2px;}
8. . No-borderradius nav li: pertama-anak, tidak ada js-nav li: pertama-anak. {Background: url (.. / Fallback / navLeft.gif) no-repeat 0 0;}
9. . No-borderradius nav li: first-child: hover, no-js nav li: first-child: hover. {Background: (.. / Fallback / navOverLeft.gif) url tidak mengulang-0 0;}
10. . No-nav li li borderradius: pertama-anak, tidak ada js-nav li li: first-child {background: none;}.
11. .. No-RGBA nav ul ul, no-js nav ul ul {left: 1px; padding-left: 2px; background: url (.. / Fallback / subnavBG.png) no-repeat 100% 100%;}
12. . No-RGBA nav ul ul, tidak-js nav ul ul a {left: 3px;}.
13. . No-RGBA nav ul ul a: hover {background: url (.. / Fallback / subOverBG.png) ulangi 0 0;}
14. . No-csstransforms ul rentang {height: 7px; width: 12px; margin-top: 8px; text-indent:-5000px; overflow: hidden; background: url (.. / Fallback / indicator.png) no-repeat 0 0;}
15. . No-borderradius ul ul li.last {margin-bottom: 10px;}
16. No-cssgradients.boxshadow nav {box-shadow: none;}.
/ * Fallbacks * /.. No-cssgradients nav, ada-js nav {padding-bottom: 4px; border: none; background: url (.. / Fallback / navBG.gif) repeat-x 0 0;}. No-borderradius nav ul, no-js nav ul {background: url (/ fallback / navRight.gif..) No-repeat 100% 0;}... No-borderradius nav ul ul, no-js nav ul ul {background: none;}. No-borderradius nav li, no-js nav li {height: 44px;}.No-cssgradients nav li: hover, no-js nav li: hover. {Background: (.. / Fallback / navOverBG.gif) url repeat-x 0 0;}.. No-nav li li borderradius, no-js nav li li. {Height: auto; width: 98%; kiri:-2px;}. No-borderradius nav li: pertama-anak, tidak ada js-nav li: pertama-anak. {Background: url (.. / Fallback / navLeft.gif) no-repeat 0 0;}. No-borderradius nav li: first-child: hover, no-js nav li: first-child: hover. {Background: (.. / Fallback / navOverLeft.gif) url tidak mengulang-0 0;}. No-nav li li borderradius: pertama-anak, tidak ada js-nav li li: first-child {background: none;}... No-RGBA nav ul ul, no-js nav ul ul {left: 1px; padding-left: 2px; background: url (.. / Fallback / subnavBG.png) no-repeat 100% 100%;}. No-RGBA nav ul ul, tidak-js nav ul ul a {left: 3px;}.. No-RGBA nav ul ul a: hover {background: url (.. / Fallback / subOverBG.png) ulangi 0 0;}. No-csstransforms ul rentang {height: 7px; width: 12px; margin-top: 8px; text-indent:-5000px; overflow: hidden; background: url (.. / Fallback / indicator.png) no-repeat 0 0;}. No-borderradius ul ul li.last {margin-bottom: 10px;}No-cssgradients.boxshadow nav {box-shadow: none;}.
Modernizr juga akan menambahkan nama kelas yang menunjukkan CSS3 fitur tidak tersedia untuk browser, sehingga kami dengan mudah dapat menyediakan aturan alternatif, yang memanfaatkan berbasis gambar fallbacks mana fitur tidak didukung serta setiap gaya kita mungkin perlu sebagai akibat dari menggunakan gambar.
Anda akan melihat bahwa kita juga menggunakan penyeleksi yang menargetkan no-js kami kelas di sini juga, ini adalah karena ketika JavaScript dinonaktifkan, Modernizr tidak akan berjalan dan tidak akan menambahkan nama kelas kita perlu dokumen, sehingga kami non-CSS3 fallbacks juga menjadi non-js kami fallbacks juga.Langkah 5. Menambahkan Script
Sekarang mari kita tambahkan beberapa script. Hal pertama yang perlu kita lakukan adalah menghapus kelas no-js dari badan halaman ketika JavaScript tidak cacat. Kami ingin melakukan hal ini segera dalam proses render halaman mungkin untuk menghindari flicker ketika gaya berubah. Langsung setelah tag pembuka body tambahkan kode berikut:melihat plaincopy ke clipboardprint?
1. <script>
2. var el = document.getElementsByTagName ("body") [0];
3. el.className = "";
4. </ Script>
<script>var el = document.getElementsByTagName ("body") [0];el.className = "";</ Script>
Semua yang kita lakukan adalah mendapatkan elemen <body> dengan nama tag dan mengatur properti className untuk string kosong. Biasanya kita akan menggunakan jQuery untuk melakukan itu bagi kita, tetapi karena jQuery tidak akan dimuat ketika script ini dijalankan kita tidak bisa menggunakannya. Kita bisa memuat jQuery sebelum ini tentu saja, tapi kita kemudian akan mengambil hit kinerja besar. Script kami hanya 2 baris kode sehingga tidak akan menyebabkan penundaan yang signifikan, dan karena itu akan dieksekusi sebelum browser bahkan telah diproses mark-up untuk elemen <nav>, tidak akan ada flash konten unstyled.
Sekarang kelas telah dihapus dari tubuh kita CSS submenu tidak akan lagi bekerja sehingga kita dapat menambahkan perilaku ini kembali dengan jQuery dan meningkatkannya sedikit pada waktu yang sama. Pada akhir dokumen, langsung setelah referensi script untuk Modernizr menambahkan kode berikut:melihat plaincopy ke clipboardprint?
1. <script>
2. (Function ($) {
3. / / Cache nav
4. var nav = $ ("# topNav");
5. / / Menambahkan indikator dan melayang kepada orang tua submenu
6. nav.find ("li") masing-masing (function (). {
7. if ($ (ini) menemukan ("ul").. panjang> 0) {
8. $ ("<span>") Teks ("^") appendTo.. ($ (Ini) anak (": pertama".));
9. / / Show subnav di hover
10. $ (Ini) mouseenter (function (). {
11. . $ (Ini) menemukan ("ul") berhenti (true, true) slideDown ()..;
12. });
13. / / Sembunyikan submenu pada keluar
14. $ (Ini) mouseleave (function (). {
15. . $ (Ini) menemukan ("ul") berhenti (true, true) slideUp ()..;
16. });
17. }
18. });
19. }) (JQuery);
20. </ Script>
<script>(Function ($) {/ / Cache navvar nav = $ ("# topNav");/ / Menambahkan indikator dan melayang kepada orang tua submenunav.find ("li") masing-masing (function (). {if ($ (ini) menemukan ("ul").. panjang> 0) {$ ("<span>") Teks ("^") appendTo.. ($ (Ini) anak (": pertama".));/ / Show subnav di hover$ (Ini) mouseenter (function (). {. $ (Ini) menemukan ("ul") berhenti (true, true) slideDown ()..;});/ / Sembunyikan submenu pada keluar$ (Ini) mouseleave (function (). {. $ (Ini) menemukan ("ul") berhenti (true, true) slideUp ()..;});}});}) (JQuery);</ Script>
Script relatif lurus ke depan, kami membungkus kode kita dalam penutupan dan lulus dalam objek jQuery aman Nama-spasi dengan tanda dolar, hanya dalam kasus perpustakaan lain sedang digunakan ketika kode ini dimasukkan ke dalam produksi. Kami kemudian cache referensi ke elemen <nav> sehingga kita bisa menyebutnya tanpa memilih dari dokumen berulang kali. Kami kemudian mengolah setiap item daftar dalam menu.
Untuk setiap elemen pencocokan kami memeriksa untuk melihat apakah mengandung unsur <ul> bersarang dan jika tidak kita menambahkan elemen <span> baru ke item daftar. Ini akan menjadi indikator submenu kami. Ketika submenu ditemukan kami juga melampirkan mouseenter () dan mouseleave () pembantu acara untuk item daftar yang berisi menu. Semua pembantu lakukan adalah menampilkan dan menyembunyikan submenu dengan menggesernya ke bawah atau ke atas masing-masing. Perhatikan penggunaan metode stop () yang membantu untuk mencegah pembukaan dan penutupan animasi antri jika pointer mouse berulang kali pindah ke dan dari item daftar target.
Pada titik ini kita harus berada di tempat yang cukup bagus berkaitan dengan situasi yang paling, dalam browser yang mendukung HTML5 menu kami akan terlihat relatif sama terlepas dari apakah CSS3 didukung atau tidak, dan apakah scripting diaktifkan atau tidak. Namun, IE menyajikan kita dengan masalah, ketika JS diaktifkan, script htmlshiv.js membuat IE memahami elemen <nav> dan non-CSS3 kami gaya dijemput dan dilaksanakan - semua sangat baik dan bagus (kita masih memiliki beberapa masalah dengan IE7, seperti antara lain kami auto-kliring: setelah aturan tidak dipahami atau diterapkan, tapi kami akan datang ke dalam beberapa saat).
Namun, masalah dimulai ketika IE digunakan dengan scripting dinonaktifkan - dalam situasi ini, script html5shiv.js tidak dieksekusi dan IE tidak memahami unsur <nav>. Tak satu pun dari kami yang mencakup pemilih nav di dalamnya akan dilaksanakan! Ini bukan akhir dari dunia meskipun, kami dapat menyediakan style sheet alternatif yang hanya digunakan ketika browser memiliki JS dinonaktifkan dan IE. Langsung setelah script yang menghapus kelas no-js dari unsur <body> tambahkan berikut:melihat plaincopy ke clipboardprint?
1. <noscript>
2. <-! [Jika IE]>
3. href="css/ie.css"> rel="stylesheet" <link
4. <[Endif] ->
5. </ Noscript>
<noscript><-! [Jika IE]>href="css/ie.css"> rel="stylesheet" <link<[Endif] -></ Noscript>
Sebuah solusi sederhana memang. Sekarang kita perlu membuat lembar gaya baru, tambahkan aturan berikut ke dokumen baru di editor kode Anda:melihat plaincopy ke clipboardprint?
1. / * Yaitu gaya ketika js dinonaktifkan * /
2. ul {display: block; padding: 0; margin: 0; background: (. / fallback / navRightIE.gif.) url no-ulangi 100% 0; font: 16px Tahoma, Sans-serif;}
3. ul: setelah {isi: "."; display: block; height: 0; jelas: keduanya; visibility: hidden;}
4. li {height: 44px; position: relative; float: left; daftar-gaya-type: none; background: (.. / fallback / navBG.gif) url repeat-x 0 0;}
5. li.last a {border-kanan: none;}
6. li: hover {background: (.. / fallback / navOverBG.gif) url repeat-x 0 0;}
7. li: first-child {background: url no-ulangi 0 0 (. / fallback / navLeftIE.gif.);}
8. li: pertama-anak {border-left: none;}
9. li: first-child: hover {background: (.. / fallback / navOverLeft.gif) url no-ulangi 0 0;}
10. li a {display: block; padding: 10px 20px; border-left: 1px solid # 999; perbatasan-kanan: 1px solid # 222, warna: # eee; text-decoration: none;}
11. li li {width: auto; jelas: kiri;}
12. li li: first-child {background: none;}
13. li li: hover {background-image: none;}
14. ul li li a: hover {border-kanan: none;}
15. ul ul {display: none; padding-left: 2px; position: absolute; kiri: 2px; background: url (.. / fallback / subnavBG.png) no-repeat 100% 100%;}
16. ul li: hover ul {display: block;}
17. li li {height: auto; width: 98%; kiri:-2px;}
18. ul ul a: hover {background: url (.. / fallback / subOverBG.png) ulangi 0 0;}
19. ul rentang {height: 7px; width: 12px; margin-top: 8px; text-indent:-5000px; overflow: hidden; background: (.. / fallback / indicator.png) url no-ulangi 0 0;}
20. ul ul li {background: none;}
21. ul ul li.last {margin-bottom: 10px;}
22. ul ul li a {padding: 5px 10px; border-left: 0; kiri: 3px; font-size: 14px; whitewhite-space: pre;}
/ * Yaitu gaya ketika js dinonaktifkan * /ul {display: block; padding: 0; margin: 0; background: (. / fallback / navRightIE.gif.) url no-ulangi 100% 0; font: 16px Tahoma, Sans-serif;}ul: setelah {isi: "."; display: block; height: 0; jelas: keduanya; visibility: hidden;}li {height: 44px; position: relative; float: left; daftar-gaya-type: none; background: (.. / fallback / navBG.gif) url repeat-x 0 0;}li.last a {border-kanan: none;}li: hover {background: (.. / fallback / navOverBG.gif) url repeat-x 0 0;}li: first-child {background: url no-ulangi 0 0 (. / fallback / navLeftIE.gif.);}li: pertama-anak {border-left: none;}li: first-child: hover {background: (.. / fallback / navOverLeft.gif) url no-ulangi 0 0;}li a {display: block; padding: 10px 20px; border-left: 1px solid # 999; perbatasan-kanan: 1px solid # 222, warna: # eee; text-decoration: none;}li li {width: auto; jelas: kiri;}li li: first-child {background: none;}li li: hover {background-image: none;}ul li li a: hover {border-kanan: none;}ul ul {display: none; padding-left: 2px; position: absolute; kiri: 2px; background: url (.. / fallback / subnavBG.png) no-repeat 100% 100%;}ul li: hover ul {display: block;}li li {height: auto; width: 98%; kiri:-2px;}ul ul a: hover {background: url (.. / fallback / subOverBG.png) ulangi 0 0;}ul rentang {height: 7px; width: 12px; margin-top: 8px; text-indent:-5000px; overflow: hidden; background: (.. / fallback / indicator.png) url no-ulangi 0 0;}ul ul li {background: none;}ul ul li.last {margin-bottom: 10px;}ul ul li a {padding: 5px 10px; border-left: 0; kiri: 3px; font-size: 14px; white-space: pre;}
Simpan ini dalam folder css sebagai ie.css. Seperti yang Anda lihat, kita tidak menargetkan elemen <nav sama sekali dalam style sheet, beberapa gaya yang kita berikan kepada elemen <nav> sebelumnya telah ditambahkan ke elemen <ul> sebaliknya, dan ada beberapa gaya baru yang perlu dimasukkan khusus untuk skenario ini. Pada dasarnya meskipun, style sheet menciptakan efek yang sama seperti sebelumnya, sehingga IE8 dengan cacat JS masih akan muncul seperti ini:
Kami sudah membuat penggunaan gambar beberapa lebih untuk skenario ini karena kita tidak lagi memiliki elemen <nav untuk menggantung latar belakang-ulang pada untuk gradien utama. Jadi itu semua browser modern, dengan JS diaktifkan dan dinonaktifkan, bekerja seperti yang diharapkan - menggunakan CS3 mana fallbacks mungkin dan gambar di mana tidak.
IE7 masih akan menciptakan masalah bagi kita, bahkan dengan scripting diaktifkan, tapi kita dapat memperbaikinya dengan mudah cukup menggunakan satu komentar bersyarat untuk menargetkan IE7 khusus, dan memasok sebuah style sheet baru hanya untuk IE7 yang perbaikan masalah tata letak, sesuatu seperti ini adalah semua yang kita membutuhkan:melihat plaincopy ke clipboardprint?
1. * Gaya untuk memperbaiki IE7 * /
2. ul {display: inline-block;}
3. ul li rentang {position: absolute; rightright: 5px; top: 10px;}
4. ul ul li a {border kanan: none; padding: 5px 10px;}
5. Konten {clear: both;}.
* Gaya untuk memperbaiki IE7 * /ul {display: inline-block;}ul li rentang {position: absolute; kanan: 5px; top: 10px;}ul ul li a {border kanan: none; padding: 5px 10px;}Konten {clear: both;}.
Simpan ini dalam folder css sebagai ie7.css dan menambahkan komentar bersyarat baru untuk kepala <halaman:melihat plaincopy ke clipboardprint?
1. <-! [Jika IE 7]>
2. href="css/ie.css"> rel="stylesheet" <link
3. href="css/ie7.css"> rel="stylesheet" <link
4. <[Endif] ->
<-! [Jika IE 7]>href="css/ie.css"> rel="stylesheet" <link
href="css/ie7.css"> rel="stylesheet" <link<[Endif] ->
Di sana kami pergi, menu navigasi dibangun dan ditata dengan elemen terbaru dan gaya dengan fallbacks dan perbaikan untuk browser lama.
HTML5 membawa ke spec elemen <nav> khusus yang harus digunakan sebagai wadah untuk setiap struktur navigasi utama, seperti menu situs utama vertikal atau horisontal navigasi, atau meja di halaman isi misalnya. IE sayangnya tidak mendukung elemen baru, tapi ada memperbaiki sederhana bisa kita gunakan, yang saya yakin Anda semua sadar.
Menggunakan CSS3 kita dapat melakukan jauh dengan apa yang akan diperlukan penggunaan gambar latar belakang dan mungkin beberapa wadah pembungkus tambahan atau dua dan mengandalkan (hampir) murni pada beberapa properti gaya baru, seperti sudut bulat dan drop-bayangan misalnya, yang tersedia untuk mendukung browser. Sekali lagi, tidak semua browser (batuk, IE!) Mendukung aturan baru, tapi kita bisa sangat mudah memberikan jatuh kembali solusi untuk browser yang tidak dapat menangani gaya kami.Langkah 1. Memulai
Kita akan memerlukan salinan rilis terbaru dari jQuery, versi 1.4.2 pada saat penulisan, serta salinan dari versi saat ini (1.1) dari perpustakaan Modernizr sangat baik, yang akan kita gunakan untuk menargetkan browser yang mendukung dengan CSS3 yang kita gunakan.
Buat folder proyek untuk file-file kita akan membuat suatu tempat pada mesin Anda dan menyebutnya nav, dalam folder ini membuat tiga folder baru, yang disebut js, satu disebut css dan satu disebut fallback. Pastikan salinan dari kedua jQuery dan Modernizr disimpan dalam folder js.Langkah 2. Page mendasari
Mulailah dengan membuat coding halaman berikut di editor kode favorit Anda:melihat plaincopy ke clipboardprint?
1. <DOCTYPE html!>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8">
5. <title> HTML5, CSS3 dan jQuery Navigasi menu </ title>
6. href="css/nav.css"> rel="stylesheet" <link
7. <-! [Jika IE]>
8. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script>
9. <[Endif] ->
10. </ Head>
11. <body class="no-js">
12. <nav id="topNav">
13. <ul>
14. <li> <a href="#" title="Nav Tautan 1"> Tautan Nav 1 </ a> </ li>
15. <li>
16. <a href="#" title="Nav Tautan 1"> Nav Link 2
17. <ul>
18. <li> <a href="#" title="Sub Tautan Nav Nav 1"> Tautan Sub 1 </ a> </ li>
19. <li> <a href="#" title="Sub Nav Nav Tautan 2"> Sub Link 2 </ a> </ li>
20. <li> <a href="#" title="Sub Tautan Nav Nav 3"> Tautan Sub 3 </ a> </ li>
21. <li> <a href="#" title="Sub Tautan Nav Nav 4"> Tautan Sub 4 </ a> </ li>
22. <li class="last"> <a href="#" title="Sub Nav Nav Tautan 5"> Sub Tautan 5 </ a> </ li>
23. </ Ul>
24. </ Li>
25. <li> <a href="#" title="Nav Tautan 1"> Tautan Nav 3 </ a> </ li>
26. <li> <a href="#" title="Nav Tautan 1"> Nav Link 4 </ a> </ li>
27. <li> <a href="#" title="Nav Tautan 1"> Tautan Nav 5 </ a> </ li>
28. </ Ul>
29. </ Nav>
30. <script src="js/jquery.js"> </ script>
31. <script src="js/modernizr.js"> </ script>
32. </ Body>
33. </ Html>
<DOCTYPE html!><html lang="en"><head><meta charset="utf-8"><title> HTML5, CSS3 dan jQuery Navigasi menu </ title>href="css/nav.css"> rel="stylesheet" <link<-! [Jika IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script><[Endif] -></ Head><body class="no-js"><nav id="topNav"><ul>
<li> <a href="#" title="Nav Tautan 1"> Tautan Nav 1 </ a> </ li><li>
<a href="#" title="Nav Tautan 1"> Nav Link 2<ul>
<li> <a href="#" title="Sub Tautan Nav Nav 1"> Tautan Sub 1 </ a> </ li><li> <a href="#" title="Sub Nav Nav Tautan 2"> Sub Link 2 </ a> </ li><li> <a href="#" title="Sub Tautan Nav Nav 3"> Tautan Sub 3 </ a> </ li><li> <a href="#" title="Sub Tautan Nav Nav 4"> Tautan Sub 4 </ a> </ li><li class="last"> <a href="#" title="Sub Nav Nav Tautan 5"> Sub Tautan 5 </ a> </ li>
</ Ul></ Li><li> <a href="#" title="Nav Tautan 1"> Tautan Nav 3 </ a> </ li><li> <a href="#" title="Nav Tautan 1"> Nav Link 4 </ a> </ li><li> <a href="#" title="Nav Tautan 1"> Tautan Nav 5 </ a> </ li></ Ul></ Nav><script src="js/jquery.js"> </ script><script src="js/modernizr.js"> </ script></ Body></ Html>
Simpan ini sebagai nav.html dalam folder nav. Kami memulai dengan DOCTYPE HTML5 minimal, yang memungkinkan kita untuk menentukan jenis dokumen seperempat dari kode kita digunakan untuk menggunakan. Kami juga menentukan bahasa default dan pengkodean karakter, walaupun dokumen masih akan memvalidasi tanpa kedua hal, itu praktek yang baik untuk memasukkan mereka dan halaman akan memicu peringatan validator jika bahasa default tidak ditentukan. Kami kemudian link ke style sheet (kita akan membuat ini berikutnya) dan menggunakan komentar bersyarat yang menargetkan IE untuk memuat naskah baik Remy Sharp html5.js jika diperlukan.
Dalam tubuh halaman kita memiliki elemen <nav> sebagai wadah untuk daftar link tradisional, dan kami telah dilemparkan dalam menu sub-untuk mengukur baik juga. Unsur tidak ajaib membuat menu navigasi bagi kita, dan itu tidak termasuk elemen MENUITEM baru atau sesuatu seperti itu sehingga daftar unordered masih merupakan pilihan yang tepat. Unsur <nav> hanya sebuah wadah semantik untuk menu kami, yang menggambarkan fungsinya dalam dokumen, untuk menggantikan elemen generik & div> yang menyatakan tidak inheren tentang tujuan pada halaman.
Pada akhir tubuh kita link ke file script jQuery dan Modernizr. Kami akan menggunakan jQuery sedikit nanti ketika kita datang untuk menambahkan perilaku untuk menu, tapi Modernizr akan melakukan hal tersebut langsung, mendeteksi kemampuan browser yang digunakan dan menambahkan serangkaian nama kelas untuk elemen HTML, yang kita bisa gunakan untuk menambahkan CSS3 kami sehingga hanya diterapkan pada browser yang dapat memanfaatkannya. Kami juga telah menambahkan nama kelas no-js ke <body> halaman, kami akan menghapusnya nanti jika JavaScript diaktifkan sehingga kita juga dapat menggunakannya untuk menambahkan gaya yang seharusnya hanya diterapkan ketika JavaScript dinonaktifkan.Langkah 3. Beberapa Styling Dasar
Sekarang mari kita menambahkan beberapa styling dasar, menciptakan gaya-sheet berikut:melihat plaincopy ke clipboardprint?
1. / * JS dinonaktifkan gaya * /
2. . No-js nav li: hover ul {display: block;}
3. / * Dasar nav gaya * /
4. nav {display: block; margin: 0 auto 20px; border: 1px solid # 222; position: relative; background-color: # 6a6a6a; font: 16px Tahoma, Sans-serif;}
5. nav ul {padding: 0; margin: 0;}
6. nav li {position: relative; float: left; daftar-gaya-type: none;}
7. nav ul: setelah {isi:; display ".": block; height: 0; jelas: keduanya; visibility: hidden;}
8. nav li a {display: block; padding: 10px 20px; border-left: 1px solid # 999; perbatasan-kanan: 1px solid # 222, warna: # eee; text-decoration: none;}
9. nav li a: focus {outline: none; text-decoration: underline;}
10. nav li: pertama-anak {border-left: none;}
11. nav li.last a {border-kanan: none;}
12. nav rentang {display: block; float: rightright; margin-left: 5px;}
13. nav ul ul {display: none; width: 100%; position: absolute; kiri: 0; background: # 6a6a6a;}
14. nav ul ul li {float: none;}
15. nav ul ul a {padding: 5px 10px; border-left: none; border kanan: none; font-size: 14px;}
16. nav ul ul a: hover {background-color: # 555;}
17. Simpan file ini di direktori css sebagai nav.css. Aturan pertama adalah murni ketika JavaScript dinonaktifkan, dan memungkinkan submenu tersembunyi untuk ditampilkan di hover murni dengan CSS. Sisa kode mendefinisikan satu set gaya dasar bahwa format menu dengan cara yang kita inginkan tanpa menambahkan sesuatu yang terlalu dekoratif. Perhatikan bahwa kita menggunakan: setelah pseudo-pemilih untuk menghapus daftar item mengambang, biasanya ini akan ditambahkan menggunakan nama kelas untuk bahwa hal itu bisa diterapkan pada wadah dari setiap elemen melayang pada halaman. Pada titik ini halaman akan terlihat seperti ini:
/ * JS dinonaktifkan gaya * /. No-js nav li: hover ul {display: block;}/ * Dasar nav gaya * /nav {display: block; margin: 0 auto 20px; border: 1px solid # 222; position: relative; background-color: # 6a6a6a; font: 16px Tahoma, Sans-serif;}nav ul {padding: 0; margin: 0;}nav li {position: relative; float: left; daftar-gaya-type: none;}nav ul: setelah {isi:; display ".": block; height: 0; jelas: keduanya; visibility: hidden;}nav li a {display: block; padding: 10px 20px; border-left: 1px solid # 999; perbatasan-kanan: 1px solid # 222, warna: # eee; text-decoration: none;}nav li a: focus {outline: none; text-decoration: underline;}nav li: pertama-anak {border-left: none;}nav li.last a {border-kanan: none;}nav rentang {display: block; float: right; margin-left: 5px;}nav ul ul {display: none; width: 100%; position: absolute; kiri: 0; background: # 6a6a6a;}nav ul ul li {float: none;}nav ul ul a {padding: 5px 10px; border-left: none; border kanan: none; font-size: 14px;}nav ul ul a: hover {background-color: # 555;}Simpan file ini di direktori css sebagai nav.css. Aturan pertama adalah murni ketika JavaScript dinonaktifkan, dan memungkinkan submenu tersembunyi untuk ditampilkan di hover murni dengan CSS. Sisa kode mendefinisikan satu set gaya dasar yang format menu <nav> dengan cara yang kita inginkan tanpa menambahkan sesuatu yang terlalu dekoratif. Perhatikan bahwa kita menggunakan: setelah pseudo-pemilih untuk menghapus daftar item mengambang, biasanya ini akan ditambahkan menggunakan nama kelas untuk bahwa hal itu bisa diterapkan pada wadah dari setiap elemen melayang pada halaman. Pada titik ini halaman akan terlihat seperti ini:
Langkah 4. CSS3
Selanjutnya kita dapat menambahkan CSS3 kami:melihat plaincopy ke clipboardprint?
1. / * CSS3 * /
2. . Borderradius nav {-moz-border-radius: 4px;-webkit-border-radius: 4px; border-radius: 4px;}
3. Cssgradients nav {background-image:-moz-linear-gradient (0% 22px 90deg, # 222, # 999), background-image:.-Webkit-gradient (linear, 0% 0%, 0% 70%, dari ( # 999), untuk (# 222));}
4. . Boxshadow.rgba nav {-moz-box-shadow: 2px 2px 2px RGBA (0,0,0, 75);-webkit-box-shadow: 2px 2px 2px RGBA (0,0,0, 75); box-shadow: 2px 2px 2px RGBA (0,0,0, 75);}
5. Cssgradients nav li: hover {background-image:-moz-linear-gradient (0% 100px 90deg, # 999, # 222), background-image:-webkit-gradient (linear, 0% 0%, 0% 100%. , dari (# 222), untuk (# 555));}
6. . Borderradius nav ul ul {-moz-border-radius-bottomleft: 4px;-moz-border-radius-bottomright: 4px;-webkit-border-bottom-kiri-radius: 4px;-webkit-border-bottom-rightright- radius: 4px; border-bottom-kiri-radius: 4px; border-bottom-rightright-radius: 4px;}
7. Boxshadow.rgba nav ul ul {background-color: RGBA (0,0,0,0.8);-moz-box-shadow:. 2px 2px 2px RGBA (0,0,0, .8);-webkit-box- shadow: 2px 2px 2px RGBA (0,0,0, .8), box-shadow: 2px 2px 2px RGBA (0,0,0, .8);}
8. . RGBA nav ul ul li {border-left: solid 1px RGBA (0,0,0,0.1); perbatasan-kanan: 1px RGBA padat (0,0,0,0.1);}
9. . RGBA nav ul ul a: hover {background-color: RGBA (85,85,85, .9);}
10. . Borderradius.rgba nav ul ul li.last {border-left: solid 1px RGBA (0,0,0,0.1); border-bottom: RGBA solid 1px (0,0,0,0.1);-moz-border- radius-bottomleft: 4px;-moz-border-radius-bottomright: 4px;-webkit-border-bottom-kiri-radius: 4px;-webkit-border-bottom-rightright-radius: 4px; border-bottom-kiri-radius : 4px; border-bottom-rightright-radius: 4px;}
11. Csstransforms ul rentang. {-Moz-transform: rotate (-180deg);-webkit-transform: rotate (-180deg);}
/ * CSS3 * /. Borderradius nav {-moz-border-radius: 4px;-webkit-border-radius: 4px; border-radius: 4px;}Cssgradients nav {background-image:-moz-linear-gradient (0% 22px 90deg, # 222, # 999), background-image:.-Webkit-gradient (linear, 0% 0%, 0% 70%, dari ( # 999), untuk (# 222));}. Boxshadow.rgba nav {-moz-box-shadow: 2px 2px 2px RGBA (0,0,0, 75);-webkit-box-shadow: 2px 2px 2px RGBA (0,0,0, 75); box-shadow: 2px 2px 2px RGBA (0,0,0, 75);}Cssgradients nav li: hover {background-image:-moz-linear-gradient (0% 100px 90deg, # 999, # 222), background-image:-webkit-gradient (linear, 0% 0%, 0% 100%. , dari (# 222), untuk (# 555));}. Borderradius nav ul ul {-moz-border-radius-bottomleft: 4px;-moz-border-radius-bottomright: 4px;-webkit-border-bottom-kiri-radius: 4px;-webkit-border-bottom-kanan radius: 4px; border-bottom-kiri-radius: 4px; border-bottom-kanan radius: 4px;}Boxshadow.rgba nav ul ul {background-color: RGBA (0,0,0,0.8);-moz-box-shadow:. 2px 2px 2px RGBA (0,0,0, .8);-webkit-box- shadow: 2px 2px 2px RGBA (0,0,0, .8), box-shadow: 2px 2px 2px RGBA (0,0,0, .8);}. RGBA nav ul ul li {border-left: solid 1px RGBA (0,0,0,0.1); perbatasan-kanan: 1px RGBA padat (0,0,0,0.1);}. RGBA nav ul ul a: hover {background-color: RGBA (85,85,85, .9);}. Borderradius.rgba nav ul ul li.last {border-left: solid 1px RGBA (0,0,0,0.1); border-bottom: RGBA solid 1px (0,0,0,0.1);-moz-border- radius-bottomleft: 4px;-moz-border-radius-bottomright: 4px;-webkit-border-bottom-kiri-radius: 4px;-webkit-border-bottom-kanan radius: 4px; border-bottom-kiri-radius : 4px; border-bottom-kanan radius: 4px;}Csstransforms ul rentang. {-Moz-transform: rotate (-180deg);-webkit-transform: rotate (-180deg);}
Menggunakan kelas ditambahkan ke elemen <html> oleh Modernizr kita dapat dengan mudah dan aman menambahkan CSS3 gaya yang kita inginkan. Kami menggunakan gaya border-radius untuk memberikan elemen <nav> sudut dibulatkan, Kami perlu memberikan deklarasi Mozilla dan WebKit gaya diawali serta perbatasan-radius standar gaya untuk browser yang mendukung mereka, seperti Opera. Kita perlu melakukan ini dengan sebagian besar dari kami CSS3 gaya.
Serta sudut-pembulatan <nav> kita juga memberikan gradien dan drop shadow. Gaya gradien yang cukup kompleks dan berbeda untuk browser Mozilla dan WebKit berbasis, yang merupakan satu-satunya browser saat menerapkannya. Kedua browser menggunakan properti background-image. Dalam Firefox kita menggunakan-moz-linear-gradien untuk menambahkan gradien linier. Hal ini membutuhkan nilai-nilai yang sesuai dengan titik awal dari gradien (0%), titik di mana warna pertama blends ke warna kedua (22px), sudut sumbu gradien (90deg), warna pertama (# 999) dan warna kedua (# 222).
Kita bisa mendapatkan gradien yang sama di Safari atau Chrome menggunakan-webkit-gradient dan sintaks yang agak berbeda, kami menetapkan bahwa ia harus menjadi gradien linier dan kemudian memberikan dua poin yang memberitahu browser mana gradien harus memulai dan mengakhiri. Nilai-nilai dalam contoh sesuai dengan kiri, nilai atas dan kanan dari 0% dan 70% untuk bagian bawah, yang memberi kami gaya yang sama seperti yang digunakan di Firefox. Terakhir kita tentukan warna gradien.
Ketika kita menerapkan drop-shadow kita menggabungkannya dengan kelas Modernizr untuk RGBA serta boxshadow sehingga bayangan kita bisa transparan. Properti untuk Mozilla dan WebKit yang sama, dan kami juga menyediakan properti kotak-bayangan yang sebenarnya untuk mendukung browser. Nilai-nilai yang kita tentukan untuk aturan ini adalah meninggalkan offset (2px), bagian atas offset (2px), jumlah kabur (2px) dan terakhir warna bayangan (0,0,0). Warnanya mana kita menggunakan RGBA, yang memungkinkan kita untuk mengatur opacity menjadi 75% (75).
Gaya lain yang menarik kita gunakan adalah mengubah beberapa teks untuk memutar 180 derajat, ketika kita menulis naskah dalam sekejap, Anda akan melihat bahwa kita menambahkan indikator sub menu dalam bentuk tanda caret untuk setiap item daftar yang berisi submenu - gaya ini akan memutar karakter untuk yang menunjuk ke bawah, yang berarti bahwa dalam mendukung browser kita bahkan tidak perlu menggunakan sebuah gambar untuk fitur ini.
Aturan yang tersisa mengatur gradien yang berbeda, tepi bulat, opacity dengan RGBA dan bayangan pada unsur-unsur lain dalam menu <nav>, seperti sudut bawah bagus bulat dan bayangan drop pada submenu, serta pembalik gradien untuk negara hover menarik . Sekarang menu navigasi kami akan terlihat seperti ini di browser mendukung:
Pada browser yang mendukung kita dapat membuat elemen kita terlihat cukup panas tanpa menggunakan gambar tunggal, yang berarti halaman kami akan memuat lebih cepat dengan permintaan HTTP jauh lebih sedikit. Namun, tidak semua browser akan mendukung styling CSS3, terutama setiap versi IE, sehingga kita masih perlu mendefinisikan gaya fallback kami. Tambahkan kode berikut pada style sheet:melihat plaincopy ke clipboardprint?
1. / * Fallbacks * /
2. .. No-cssgradients nav, ada-js nav {padding-bottom: 4px; border: none; background: url (.. / Fallback / navBG.gif) repeat-x 0 0;}
3. . No-borderradius nav ul, no-js nav ul {background: url (/ fallback / navRight.gif..) No-repeat 100% 0;}.
4. .. No-borderradius nav ul ul, no-js nav ul ul {background: none;}
5. . No-borderradius nav li, no-js nav li {height: 44px;}.
6. No-cssgradients nav li: hover, no-js nav li: hover. {Background: (.. / Fallback / navOverBG.gif) url repeat-x 0 0;}.
7. . No-nav li li borderradius, no-js nav li li. {Height: auto; width: 98%; kiri:-2px;}
8. . No-borderradius nav li: pertama-anak, tidak ada js-nav li: pertama-anak. {Background: url (.. / Fallback / navLeft.gif) no-repeat 0 0;}
9. . No-borderradius nav li: first-child: hover, no-js nav li: first-child: hover. {Background: (.. / Fallback / navOverLeft.gif) url tidak mengulang-0 0;}
10. . No-nav li li borderradius: pertama-anak, tidak ada js-nav li li: first-child {background: none;}.
11. .. No-RGBA nav ul ul, no-js nav ul ul {left: 1px; padding-left: 2px; background: url (.. / Fallback / subnavBG.png) no-repeat 100% 100%;}
12. . No-RGBA nav ul ul, tidak-js nav ul ul a {left: 3px;}.
13. . No-RGBA nav ul ul a: hover {background: url (.. / Fallback / subOverBG.png) ulangi 0 0;}
14. . No-csstransforms ul rentang {height: 7px; width: 12px; margin-top: 8px; text-indent:-5000px; overflow: hidden; background: url (.. / Fallback / indicator.png) no-repeat 0 0;}
15. . No-borderradius ul ul li.last {margin-bottom: 10px;}
16. No-cssgradients.boxshadow nav {box-shadow: none;}.
/ * Fallbacks * /.. No-cssgradients nav, ada-js nav {padding-bottom: 4px; border: none; background: url (.. / Fallback / navBG.gif) repeat-x 0 0;}. No-borderradius nav ul, no-js nav ul {background: url (/ fallback / navRight.gif..) No-repeat 100% 0;}... No-borderradius nav ul ul, no-js nav ul ul {background: none;}. No-borderradius nav li, no-js nav li {height: 44px;}.No-cssgradients nav li: hover, no-js nav li: hover. {Background: (.. / Fallback / navOverBG.gif) url repeat-x 0 0;}.. No-nav li li borderradius, no-js nav li li. {Height: auto; width: 98%; kiri:-2px;}. No-borderradius nav li: pertama-anak, tidak ada js-nav li: pertama-anak. {Background: url (.. / Fallback / navLeft.gif) no-repeat 0 0;}. No-borderradius nav li: first-child: hover, no-js nav li: first-child: hover. {Background: (.. / Fallback / navOverLeft.gif) url tidak mengulang-0 0;}. No-nav li li borderradius: pertama-anak, tidak ada js-nav li li: first-child {background: none;}... No-RGBA nav ul ul, no-js nav ul ul {left: 1px; padding-left: 2px; background: url (.. / Fallback / subnavBG.png) no-repeat 100% 100%;}. No-RGBA nav ul ul, tidak-js nav ul ul a {left: 3px;}.. No-RGBA nav ul ul a: hover {background: url (.. / Fallback / subOverBG.png) ulangi 0 0;}. No-csstransforms ul rentang {height: 7px; width: 12px; margin-top: 8px; text-indent:-5000px; overflow: hidden; background: url (.. / Fallback / indicator.png) no-repeat 0 0;}. No-borderradius ul ul li.last {margin-bottom: 10px;}No-cssgradients.boxshadow nav {box-shadow: none;}.
Modernizr juga akan menambahkan nama kelas yang menunjukkan CSS3 fitur tidak tersedia untuk browser, sehingga kami dengan mudah dapat menyediakan aturan alternatif, yang memanfaatkan berbasis gambar fallbacks mana fitur tidak didukung serta setiap gaya kita mungkin perlu sebagai akibat dari menggunakan gambar.
Anda akan melihat bahwa kita juga menggunakan penyeleksi yang menargetkan no-js kami kelas di sini juga, ini adalah karena ketika JavaScript dinonaktifkan, Modernizr tidak akan berjalan dan tidak akan menambahkan nama kelas kita perlu dokumen, sehingga kami non-CSS3 fallbacks juga menjadi non-js kami fallbacks juga.Langkah 5. Menambahkan Script
Sekarang mari kita tambahkan beberapa script. Hal pertama yang perlu kita lakukan adalah menghapus kelas no-js dari badan halaman ketika JavaScript tidak cacat. Kami ingin melakukan hal ini segera dalam proses render halaman mungkin untuk menghindari flicker ketika gaya berubah. Langsung setelah tag pembuka body tambahkan kode berikut:melihat plaincopy ke clipboardprint?
1. <script>
2. var el = document.getElementsByTagName ("body") [0];
3. el.className = "";
4. </ Script>
<script>var el = document.getElementsByTagName ("body") [0];el.className = "";</ Script>
Semua yang kita lakukan adalah mendapatkan elemen <body> dengan nama tag dan mengatur properti className untuk string kosong. Biasanya kita akan menggunakan jQuery untuk melakukan itu bagi kita, tetapi karena jQuery tidak akan dimuat ketika script ini dijalankan kita tidak bisa menggunakannya. Kita bisa memuat jQuery sebelum ini tentu saja, tapi kita kemudian akan mengambil hit kinerja besar. Script kami hanya 2 baris kode sehingga tidak akan menyebabkan penundaan yang signifikan, dan karena itu akan dieksekusi sebelum browser bahkan telah diproses mark-up untuk elemen <nav>, tidak akan ada flash konten unstyled.
Sekarang kelas telah dihapus dari tubuh kita CSS submenu tidak akan lagi bekerja sehingga kita dapat menambahkan perilaku ini kembali dengan jQuery dan meningkatkannya sedikit pada waktu yang sama. Pada akhir dokumen, langsung setelah referensi script untuk Modernizr menambahkan kode berikut:melihat plaincopy ke clipboardprint?
1. <script>
2. (Function ($) {
3. / / Cache nav
4. var nav = $ ("# topNav");
5. / / Menambahkan indikator dan melayang kepada orang tua submenu
6. nav.find ("li") masing-masing (function (). {
7. if ($ (ini) menemukan ("ul").. panjang> 0) {
8. $ ("<span>") Teks ("^") appendTo.. ($ (Ini) anak (": pertama".));
9. / / Show subnav di hover
10. $ (Ini) mouseenter (function (). {
11. . $ (Ini) menemukan ("ul") berhenti (true, true) slideDown ()..;
12. });
13. / / Sembunyikan submenu pada keluar
14. $ (Ini) mouseleave (function (). {
15. . $ (Ini) menemukan ("ul") berhenti (true, true) slideUp ()..;
16. });
17. }
18. });
19. }) (JQuery);
20. </ Script>
<script>(Function ($) {/ / Cache navvar nav = $ ("# topNav");/ / Menambahkan indikator dan melayang kepada orang tua submenunav.find ("li") masing-masing (function (). {if ($ (ini) menemukan ("ul").. panjang> 0) {$ ("<span>") Teks ("^") appendTo.. ($ (Ini) anak (": pertama".));/ / Show subnav di hover$ (Ini) mouseenter (function (). {. $ (Ini) menemukan ("ul") berhenti (true, true) slideDown ()..;});/ / Sembunyikan submenu pada keluar$ (Ini) mouseleave (function (). {. $ (Ini) menemukan ("ul") berhenti (true, true) slideUp ()..;});}});}) (JQuery);</ Script>
Script relatif lurus ke depan, kami membungkus kode kita dalam penutupan dan lulus dalam objek jQuery aman Nama-spasi dengan tanda dolar, hanya dalam kasus perpustakaan lain sedang digunakan ketika kode ini dimasukkan ke dalam produksi. Kami kemudian cache referensi ke elemen <nav> sehingga kita bisa menyebutnya tanpa memilih dari dokumen berulang kali. Kami kemudian mengolah setiap item daftar dalam menu.
Untuk setiap elemen pencocokan kami memeriksa untuk melihat apakah mengandung unsur <ul> bersarang dan jika tidak kita menambahkan elemen <span> baru ke item daftar. Ini akan menjadi indikator submenu kami. Ketika submenu ditemukan kami juga melampirkan mouseenter () dan mouseleave () pembantu acara untuk item daftar yang berisi menu. Semua pembantu lakukan adalah menampilkan dan menyembunyikan submenu dengan menggesernya ke bawah atau ke atas masing-masing. Perhatikan penggunaan metode stop () yang membantu untuk mencegah pembukaan dan penutupan animasi antri jika pointer mouse berulang kali pindah ke dan dari item daftar target.
Pada titik ini kita harus berada di tempat yang cukup bagus berkaitan dengan situasi yang paling, dalam browser yang mendukung HTML5 menu kami akan terlihat relatif sama terlepas dari apakah CSS3 didukung atau tidak, dan apakah scripting diaktifkan atau tidak. Namun, IE menyajikan kita dengan masalah, ketika JS diaktifkan, script htmlshiv.js membuat IE memahami elemen <nav> dan non-CSS3 kami gaya dijemput dan dilaksanakan - semua sangat baik dan bagus (kita masih memiliki beberapa masalah dengan IE7, seperti antara lain kami auto-kliring: setelah aturan tidak dipahami atau diterapkan, tapi kami akan datang ke dalam beberapa saat).
Namun, masalah dimulai ketika IE digunakan dengan scripting dinonaktifkan - dalam situasi ini, script html5shiv.js tidak dieksekusi dan IE tidak memahami unsur <nav>. Tak satu pun dari kami yang mencakup pemilih nav di dalamnya akan dilaksanakan! Ini bukan akhir dari dunia meskipun, kami dapat menyediakan style sheet alternatif yang hanya digunakan ketika browser memiliki JS dinonaktifkan dan IE. Langsung setelah script yang menghapus kelas no-js dari unsur <body> tambahkan berikut:melihat plaincopy ke clipboardprint?
1. <noscript>
2. <-! [Jika IE]>
3. href="css/ie.css"> rel="stylesheet" <link
4. <[Endif] ->
5. </ Noscript>
<noscript><-! [Jika IE]>href="css/ie.css"> rel="stylesheet" <link<[Endif] -></ Noscript>
Sebuah solusi sederhana memang. Sekarang kita perlu membuat lembar gaya baru, tambahkan aturan berikut ke dokumen baru di editor kode Anda:melihat plaincopy ke clipboardprint?
1. / * Yaitu gaya ketika js dinonaktifkan * /
2. ul {display: block; padding: 0; margin: 0; background: (. / fallback / navRightIE.gif.) url no-ulangi 100% 0; font: 16px Tahoma, Sans-serif;}
3. ul: setelah {isi: "."; display: block; height: 0; jelas: keduanya; visibility: hidden;}
4. li {height: 44px; position: relative; float: left; daftar-gaya-type: none; background: (.. / fallback / navBG.gif) url repeat-x 0 0;}
5. li.last a {border-kanan: none;}
6. li: hover {background: (.. / fallback / navOverBG.gif) url repeat-x 0 0;}
7. li: first-child {background: url no-ulangi 0 0 (. / fallback / navLeftIE.gif.);}
8. li: pertama-anak {border-left: none;}
9. li: first-child: hover {background: (.. / fallback / navOverLeft.gif) url no-ulangi 0 0;}
10. li a {display: block; padding: 10px 20px; border-left: 1px solid # 999; perbatasan-kanan: 1px solid # 222, warna: # eee; text-decoration: none;}
11. li li {width: auto; jelas: kiri;}
12. li li: first-child {background: none;}
13. li li: hover {background-image: none;}
14. ul li li a: hover {border-kanan: none;}
15. ul ul {display: none; padding-left: 2px; position: absolute; kiri: 2px; background: url (.. / fallback / subnavBG.png) no-repeat 100% 100%;}
16. ul li: hover ul {display: block;}
17. li li {height: auto; width: 98%; kiri:-2px;}
18. ul ul a: hover {background: url (.. / fallback / subOverBG.png) ulangi 0 0;}
19. ul rentang {height: 7px; width: 12px; margin-top: 8px; text-indent:-5000px; overflow: hidden; background: (.. / fallback / indicator.png) url no-ulangi 0 0;}
20. ul ul li {background: none;}
21. ul ul li.last {margin-bottom: 10px;}
22. ul ul li a {padding: 5px 10px; border-left: 0; kiri: 3px; font-size: 14px; whitewhite-space: pre;}
/ * Yaitu gaya ketika js dinonaktifkan * /ul {display: block; padding: 0; margin: 0; background: (. / fallback / navRightIE.gif.) url no-ulangi 100% 0; font: 16px Tahoma, Sans-serif;}ul: setelah {isi: "."; display: block; height: 0; jelas: keduanya; visibility: hidden;}li {height: 44px; position: relative; float: left; daftar-gaya-type: none; background: (.. / fallback / navBG.gif) url repeat-x 0 0;}li.last a {border-kanan: none;}li: hover {background: (.. / fallback / navOverBG.gif) url repeat-x 0 0;}li: first-child {background: url no-ulangi 0 0 (. / fallback / navLeftIE.gif.);}li: pertama-anak {border-left: none;}li: first-child: hover {background: (.. / fallback / navOverLeft.gif) url no-ulangi 0 0;}li a {display: block; padding: 10px 20px; border-left: 1px solid # 999; perbatasan-kanan: 1px solid # 222, warna: # eee; text-decoration: none;}li li {width: auto; jelas: kiri;}li li: first-child {background: none;}li li: hover {background-image: none;}ul li li a: hover {border-kanan: none;}ul ul {display: none; padding-left: 2px; position: absolute; kiri: 2px; background: url (.. / fallback / subnavBG.png) no-repeat 100% 100%;}ul li: hover ul {display: block;}li li {height: auto; width: 98%; kiri:-2px;}ul ul a: hover {background: url (.. / fallback / subOverBG.png) ulangi 0 0;}ul rentang {height: 7px; width: 12px; margin-top: 8px; text-indent:-5000px; overflow: hidden; background: (.. / fallback / indicator.png) url no-ulangi 0 0;}ul ul li {background: none;}ul ul li.last {margin-bottom: 10px;}ul ul li a {padding: 5px 10px; border-left: 0; kiri: 3px; font-size: 14px; white-space: pre;}
Simpan ini dalam folder css sebagai ie.css. Seperti yang Anda lihat, kita tidak menargetkan elemen <nav sama sekali dalam style sheet, beberapa gaya yang kita berikan kepada elemen <nav> sebelumnya telah ditambahkan ke elemen <ul> sebaliknya, dan ada beberapa gaya baru yang perlu dimasukkan khusus untuk skenario ini. Pada dasarnya meskipun, style sheet menciptakan efek yang sama seperti sebelumnya, sehingga IE8 dengan cacat JS masih akan muncul seperti ini:
Kami sudah membuat penggunaan gambar beberapa lebih untuk skenario ini karena kita tidak lagi memiliki elemen <nav untuk menggantung latar belakang-ulang pada untuk gradien utama. Jadi itu semua browser modern, dengan JS diaktifkan dan dinonaktifkan, bekerja seperti yang diharapkan - menggunakan CS3 mana fallbacks mungkin dan gambar di mana tidak.
IE7 masih akan menciptakan masalah bagi kita, bahkan dengan scripting diaktifkan, tapi kita dapat memperbaikinya dengan mudah cukup menggunakan satu komentar bersyarat untuk menargetkan IE7 khusus, dan memasok sebuah style sheet baru hanya untuk IE7 yang perbaikan masalah tata letak, sesuatu seperti ini adalah semua yang kita membutuhkan:melihat plaincopy ke clipboardprint?
1. * Gaya untuk memperbaiki IE7 * /
2. ul {display: inline-block;}
3. ul li rentang {position: absolute; rightright: 5px; top: 10px;}
4. ul ul li a {border kanan: none; padding: 5px 10px;}
5. Konten {clear: both;}.
* Gaya untuk memperbaiki IE7 * /ul {display: inline-block;}ul li rentang {position: absolute; kanan: 5px; top: 10px;}ul ul li a {border kanan: none; padding: 5px 10px;}Konten {clear: both;}.
Simpan ini dalam folder css sebagai ie7.css dan menambahkan komentar bersyarat baru untuk kepala <halaman:melihat plaincopy ke clipboardprint?
1. <-! [Jika IE 7]>
2. href="css/ie.css"> rel="stylesheet" <link
3. href="css/ie7.css"> rel="stylesheet" <link
4. <[Endif] ->
<-! [Jika IE 7]>href="css/ie.css"> rel="stylesheet" <link
href="css/ie7.css"> rel="stylesheet" <link<[Endif] ->
Di sana kami pergi, menu navigasi dibangun dan ditata dengan elemen terbaru dan gaya dengan fallbacks dan perbaikan untuk browser lama.
Dapatkan berita terupdate dan unik setiap saat hanya di bayarsaja.blogspot.com
Homepage|http://bayarsaja.blogspot.com
0 komentar:
Posting Komentar
Mohon berkomentar dengan baik dan sopan. Komentar bernada spam akan saya hapus