How to Create a Drop-down Nav Menu With HTML5, CSS3 and JQuery ~ putra empat lawang

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>

<head>

<title>HTML5, CSS3 and jQuery Navigation menu</title>

<!--[if IE]>

<![endif]-->

</head>

<ul>

<li>

<a href="#" title="Nav Link 1">Nav Link 2

<ul>

</ul>

</li>

</ul>

</nav>

</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:

Deskripsi: http://d2o0t5hpnwv4c1.cloudfront.net/699_nav/img1.jpg

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.

Deskripsi: http://pagead2.googlesyndication.com/simgad/16985077000110968995

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:

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:

(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:

<!--[if IE]>

<![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:

Deskripsi: http://d2o0t5hpnwv4c1.cloudfront.net/699_nav/img3.jpg

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.

Baca Sumber asli : http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/

putra empat lawang

2012/09/05