http://nettuts.s3.amazonaws.com/699_nav/html5_nav_code.zip
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
Step 1. Getting Started
Kita akan
memerlukan salinan rilis terbaru dari jQuery, versi 1.4.2 pada saat penulisan,
juga 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.
Step 2. the Underlying Page
Mulailah dengan membuat coding halaman berikut
di editor kode favorit
Anda:
<!DOCTYPE
html>
<html lang="en">
<head>
<meta
charset="utf-8">
<title>HTML5,
CSS3 and jQuery Navigation menu</title>
<link
rel="stylesheet" href="css/nav.css">
<!--[if
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 Link 1">Nav Link
1</a></li>
<li>
<a href="#" title="Nav Link
1">Nav Link 2
<ul>
<li><a href="#" title="Sub Nav
Link 1">Sub Nav Link 1</a></li>
<li><a
href="#" title="Sub Nav Link 2">Sub Nav Link
2</a></li>
<li><a
href="#" title="Sub Nav Link 3">Sub Nav Link
3</a></li>
<li><a
href="#" title="Sub Nav Link 4">Sub Nav Link
4</a></li>
<li
class="last"><a href="#" title="Sub Nav Link
5">Sub Nav Link 5</a></li>
</ul>
</li>
<li><a
href="#" title="Nav Link 1">Nav Link
3</a></li>
<li><a
href="#" title="Nav Link 1">Nav Link
4</a></li>
<li><a
href="#" title="Nav Link 1">Nav Link
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
menambah gaya yang seharusnya
hanya diterapkan ketika JavaScript
dinonaktifkan.
Step 3. Some Basic Styling
Sekarang mari kita menambahkan beberapa styling dasar, menciptakan style-sheet berikut:
/*
base nav styles */
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; list-style-type:none; }
nav
ul:after { content:"."; display:block; height:0; clear:both;
visibility:hidden; }
nav
li a { display:block; padding:10px 20px; border-left:1px solid #999;
border-right:1px solid #222; color:#eee; text-decoration:none; }
nav
li a:focus { outline:none; text-decoration:underline; }
nav
li:first-child a { border-left:none; }
nav
li.last a { border-right:none; }
nav
a span { display:block; float:right; margin-left:5px; }
nav
ul ul { display:none; width:100%; position:absolute; left:0;
background:#6a6a6a; }
nav
ul ul li { float:none; }
nav
ul ul a { padding:5px 10px; border-left:none; border-right:none;
font-size:14px; }
nav
ul ul a:hover { background-color:#555; }
Save
this file in the css directory as nav.css. The first rule is purely for when
JavaScript is disabled, and allows the hidden submenu to be displayed on hover
purely with CSS. The rest of the code defines a set of base styles that format
the <nav> menu in the way that we want without adding anything too
decorative. Note that we’re using the :after pseudo-selector to clear the
floated list items; normally this would be added using a class name to that it
could be applied to the containers of any floated elements on the page. At this
point our page should look like this:
Step 4. CSS3
Selanjutnya
kita dapat
menambahkan CSS3 kami:
/* 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%, from(#999), to(#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%, from(#222), to(#555)); }
.borderradius nav ul ul { -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-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:1px solid rgba(0,0,0,0.1); border-right:1px solid rgba(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:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1); -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
.csstransforms ul a span { -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:
New! Click the words above to edit and view
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:
/* fallbacks */
.no-cssgradients nav, .no-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:url(../fallback/navOverBG.gif) repeat-x 0 0; }
.no-borderradius nav li li, .no-js nav li li {
height:auto; width:98%; left:-2px; }
.no-borderradius nav li:first-child, .no-js nav
li:first-child { background:url(../fallback/navLeft.gif) no-repeat 0 0; }
.no-borderradius nav li:first-child:hover, .no-js nav
li:first-child:hover { background:url(../fallback/navOverLeft.gif) no-repeat 0
0; }
.no-borderradius nav li li:first-child, .no-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 a, .no-js nav ul ul a { left:3px; }
.no-rgba nav ul ul a:hover {
background:url(../fallback/subOverBG.png) repeat 0 0; }
.no-csstransforms ul a span { 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.
Step 5. Adding the 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:
<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. Kami 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:
<script>
(function($){
//cache
nav
var
nav = $("#topNav");
//add
indicators and hovers to submenu parents
nav.find("li").each(function()
{
if
($(this).find("ul").length > 0) {
$("<span>").text("^").appendTo($(this).children(":first"));
//show
subnav on hover
$(this).mouseenter(function()
{
$(this).find("ul").stop(true,
true).slideDown();
});
//hide
submenus on exit
$(this).mouseleave(function()
{
$(this).find("ul").stop(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:
<noscript>
<!--[if IE]>
<link
rel="stylesheet" href="css/ie.css">
<![endif]-->
</noscript>
Sebuah
solusi sederhana
memang. Sekarang kita perlu membuat lembar gaya baru, tambahkan aturan berikut ke dokumen baru di editor kode Anda:
/* ie styles for when js disabled */
ul { display:block; padding:0; margin:0;
background:url(../fallback/navRightIE.gif) no-repeat 100% 0; font:16px Tahoma,
Sans-serif; }
ul:after { content:"."; display:block;
height:0; clear:both; visibility:hidden; }
li { height:44px; position:relative; float:left;
list-style-type:none; background:url(../fallback/navBG.gif) repeat-x 0 0; }
li.last a { border-right:none; }
li:hover { background:url(../fallback/navOverBG.gif)
repeat-x 0 0; }
li:first-child { background:url(../fallback/navLeftIE.gif)
no-repeat 0 0; }
li:first-child a { border-left:none; }
li:first-child:hover {
background:url(../fallback/navOverLeft.gif) no-repeat 0 0; }
li a { display:block; padding:10px 20px; border-left:1px
solid #999; border-right:1px solid #222; color:#eee; text-decoration:none; }
li li { width:auto; clear:left; }
li li:first-child { background:none; }
li li:hover { background-image:none; }
ul li li a:hover { border-right:none; }
ul ul { display:none; padding-left:2px;
position:absolute; left:2px; background:url(../fallback/subnavBG.png) no-repeat
100% 100%; }
ul li:hover ul { display:block; }
li li { height:auto; width:98%; left:-2px; }
ul ul a:hover { background:url(../fallback/subOverBG.png)
repeat 0 0; }
ul a span { height:7px; width:12px; margin-top:8px;
text-indent:-5000px; overflow:hidden; background:url(../fallback/indicator.png)
no-repeat 0 0; }
ul ul li { background:none; }
ul ul li.last { margin-bottom:10px; }
ul ul li a { padding:5px 10px; border-left:0; left: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:
* styles to fix IE7 */
ul { display:inline-block; }
ul li a span { position:absolute; right:5px; top:10px; }
ul ul li a { border-right:none; padding:5px 10px; }
.content { clear:both; }
Simpan ini dalam folder css sebagai ie7.css dan menambahkan komentar bersyarat baru untuk <head pada halaman:
* styles to fix IE7 */
ul { display:inline-block; }
ul li a span { position:absolute; right:5px; top:10px; }
ul ul li a { border-right:none; padding:5px 10px; }
.content { clear:both; }
Di
sana kami pergi, menu navigasi dibangun dan ditata dengan elemen terbaru dan gaya dengan fallbacks dan perbaikan untuk browser lama.
