Cách tạo menu điều hướng thả xuống với HTML5, CSS3 và JQuery

() translation by (you can also view the original English article)

Trong hướng dẫn này, chúng tôi sẽ tìm hiểu và xem chúng ta có thể làm gì với HTML5 và CSS3 khi nói đến một bộ phận các website hiện tại: menu điều hướng drop-down (thả xuống). Chúng tôi cũng sẽ sử dụng jQuery để xử lý các hiệu ứng và bổ sung hoàn thiện cho chúng tôi.

HTML5 mang đến cho một element chuyên biệt nên được sử dụng làm container (vùng chứa) cho bất kỳ cấu trúc điều hướng quan trọng, chẳng hạn như các menu điều hướng trang chính theo chiều dọc hoặc chiều ngang hoặc ví dụ như một bảng mục lục trong trang. Thật không may, IE không hỗ trợ element mới này, nhưng có một cách khắc phục đơn giản mà chúng tôi có thể sử dụng, trong đó tôi chắc chắn rằng bạn đã biết tất cả.

Với CSS3, chúng ta có thể loại bỏ những gì sẽ yêu cầu sử dụng một số hình ảnh nền và có thể là một hoặc hai container bổ sung và hoàn toàn dựa vào một số thuộc tính kiểu mới, chẳng hạn như góc tròn và bóng đổ là ví dụ, chúng thích hợp để hỗ trợ các trình duyệt. Lần nữa, không phải tất cả các trình duyệt (IE!) Đều hỗ trợ các quy tắc mới này, nhưng chúng tôi có thể dễ dàng cung cấp các giải pháp dự phòng cho các trình duyệt không có thể xử lý các kiểu của chúng tôi.

Nhân tiện, Envato Market có rất nhiều menu CSS phong cách để bạn lựa chọn, chẳng hạn như PickArt, một giải pháp đơn giản, gọn gàng, nhã nhặn, sẵn sàng để cài đặt và sử dụng chỉ với $4.

PickArt on Envato Market — PickArt trên Envato Market

Bạn cũng có thể thử một trong những nhà cung cấp dịch vụ chuyên nghiệp trên Envato Studio. Ví dụ: Lukasz Czerwinski sẽ tạo một plugin jQuery hoàn toàn mới cho thông số kỹ thuật của bạn với giá $115 trong vòng 7 ngày, với tỷ lệ hài lòng đến 100%. Các dịch vụ của anh ấy bao gồm menu drop-down, các gallery tích hợp với các dịch vụ xã hội, thanh trượt và hơn thế nữa.

Nếu bạn không thể tìm thấy những gì bạn cần, hoặc nếu bạn muốn mình tự thực hiện điều đó, hãy tiếp tục đọc để biết cách làm thế nào.

Bước 1. Bắt đầu

Chúng tôi sẽ cần một bản copy của phiên bản jQuery mới nhất - 1.4.2 tại thời điểm bài viết, và một bản sao của phiên bản hiện tại (1.1) của thư viện tuyệt vời Modernizr, chúng tôi sẽ sử dụng nó để hướng đến các trình duyệt hỗ trợ CSS3 mà chúng tôi sử dụng.

Tạo một thư mục dự án cho các file mà chúng tôi sẽ tạo ở đâu đó trên máy của bạn và gọi tên là nav, bên trong thư mục này tạo 3 thư mục mới; một cái gọi là js, một cái gọi là css và một cái gọi là fallback. Đảm bảo rằng các bản sao của cả jQuery và Modernizr đều được lưu trong thư mục js.

Bước 2. Trang cơ sở

Bắt đầu code bằng cách tạo trang sau trong code editor yêu thích của bạn:

<!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</a>
					<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>

Lưu trang này dưới dạng nav.html trong thư mục nav. Chúng tôi bắt đầu với HTML5 doctype tối giản, cho phép chúng tôi chỉ định loại tài liệu trong một phần tư code chúng tôi thường sử dụng. Chúng tôi cũng chỉ định ngôn ngữ mặc định và mã hóa ký tự (character encoding); Mặc dù tài liệu vẫn sẽ hợp lệ khi không có hai điều này, nhưng thực tiễn tốt là bao gồm luôn chúng và trang sẽ kích hoạt các cảnh báo xác nhận nếu ngôn ngữ mặc định không được chỉ định. Sau đó, chúng tôi liên kết với một stylesheet (sẽ được tạo ra tiếp theo) và sử dụng một comment điều kiện dành cho IE để tải script html5.js từ Remy Sharp nếu cần.

Trong phần body của trang, chúng ta có element <nav> làm container cho danh sách liên kết truyền thống và chúng tôi đã đưa vào một menu phụ. Phần tử không tạo ra một menu điều hướng cho chúng ta, và nó không bao gồm bất kỳ các phần tử menuitem mới nào hoặc bất cứ điều tương tự để một danh sách không có thứ tự vẫn là một lựa chọn thích hợp. Phần tử <nav> chỉ là một semantic container cho menu của chúng tôi, mô tả chức năng của nó trong tài liệu, để thay thế phần tử <div> vốn không mô tả gì về mục đích của nó trong trang.

Ở phần cuối của phần body, chúng ta liên kết đến các file script jQuery và Modernizr. Chúng ta sẽ sử dụng jQuery sau khi chúng ta thêm hành vi cho menu, nhưng Modernizr sẽ thực hiện ngay việc đó, phát hiện các khả năng của trình duyệt đang sử dụng và bổ sung một loạt tên class vào thành phần HTML, trong đó chúng ta có thể sử dụng để bổ sung CSS3 để nó chỉ được áp dụng cho các trình duyệt có thể sử dụng chúng. Chúng tôi cũng đã bổ sung tên class no-js vào <body> của trang; chúng tôi sẽ xóa nó sau đó nếu JavaScript được bật để chúng tôi cũng có thể sử dụng nó để thêm các kiểu chỉ nên được áp dụng khi JavaScript bị tắt.

Bước 3. Một số style cơ bản

Bây giờ hãy bổ sung một số style cơ bản; tạo style-sheet sau:

/* JS disabled styles */
.no-js nav li:hover ul { display:block; }

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

Bước 4. CSS3

Tiếp theo, chúng ta có thể bổ sung CSS3 của chúng ta:

/* 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); }

Sử dụng các class được bổ sung vào thành phần <html> của Modernizr, chúng ta có thể dễ dàng và an toàn bổ sung các kiểu CSS3 mà chúng ta muốn. Chúng tôi sử dụng kiểu border-radius để cung cấp cho các thành phần <nav> các góc được bo tròn; chúng ta cần đưa ra các khai báo kiểu tiền tố của Mozilla và Webkit cũng như các kiểu tiêu chuẩn border-radius cho các trình duyệt hỗ trợ chúng, chẳng hạn như Opera. Chúng tôi cần phải làm điều này với hầu hết các kiểu CSS3 của chúng tôi.

Cũng như bo tròn góc của <nav>, chúng tôi cũng cung cấp cho nó một gradient và bóng đổ. Các style gradient khá phức tạp và khác nhau đối với các trình duyệt dựa trên Mozilla và Webkit, đây là các trình duyệt duy nhất hiện đang triển khai chúng. Cả hai trình duyệt đều sử dụng thuộc tính background-image. Trong Firefox, chúng tôi sử dụng -moz-linear-gradient để bổ sung gradient tuyến tính. Nó yêu cầu các giá trị tương ứng với điểm bắt đầu của gradient (0%), tại điểm mà màu thứ nhất hòa vào màu thứ hai (22px), góc của trục gradient (90deg), màu đầu tiên (#999) và màu thứ hai (#222).

Chúng tôi có thể có được cùng kết quả gradient trong Safari hoặc Chrome bằng cách sử dụng -webkit-gradient và cú pháp khác nhau một chút; chúng tôi xác định rằng nó phải là một linear gradient và sau đó cung cấp hai điểm để cho trình duyệt biết nơi bắt đầu và kết thúc. Các giá trị trong ví dụ tương ứng với các giá trị bên trái, trên cùng và bên phải là 0% và phía dưới là 70%, điều này mang lại cho chúng ta style giống như được dùng trong Firefox. Cuối cùng, chúng tôi xác định màu sắc của gradient.

Khi chúng ta áp dụng bóng đổ, chúng ta kết hợp nó với class Modernizr cho RGBA cũng như boxshadow để bóng của chúng ta có thể trong suốt. Các thuộc tính cho Mozilla và webkit là như nhau và chúng tôi cũng cung cấp thuộc tính box-shadow thực tế để hỗ trợ các trình duyệt. Các giá trị chúng tôi chỉ định cho quy tắc này là left offset (2px), top offset (2px), mờ (blur) (2px) và cuối cùng là màu của bóng đổ (0,0,0). Màu sắc là nơi chúng tôi sử dụng RGBA, cho phép chúng tôi thiết lập độ mờ (opacity) thành 75% (.75).

Một style thú vị khác mà chúng tôi sử dụng là transform để xoay một số văn bản 180 độ; Khi chúng tôi viết script trong giây lát, bạn sẽ thấy rằng chúng tôi bổ sung một báo hiệu menu phụ dưới dạng dấu hiệu dấu mũ vào bất kỳ mục danh sách nào có chứa menu con - style này sẽ xoay ký tự mà nó đang chỉ xuống có nghĩa là trong việc hỗ trợ các trình duyệt, chúng tôi thậm chí không cần sử dụng hình ảnh cho tính năng này.

Các quy tắc còn lại thiết lập các gradient khác nhau, các cạnh được bo tròn, độ mờ với RGBA và đổ bóng trên các thành phần khác trong menu <nav>, chẳng hạn như các góc được làm tròn đẹp ở phía dưới và bóng thả (drop shadow) trên menu con, cũng như đảo ngược độ dốc cho một trạng thái di chuột (hover) hấp dẫn . Bây giờ menu điều hướng của chúng tôi sẽ trông như thế này trong một trình duyệt được hỗ trợ:

Trong các trình duyệt được hỗ trợ, chúng tôi có thể làm cho các thành phần của chúng tôi trông khá sôi động mà không cần sử dụng hình ảnh, điều đó có nghĩa là các trang của chúng tôi sẽ tải nhanh hơn nhiều với ít các yêu cầu HTTP hơn nhiều. Tuy nhiên, không phải tất cả các trình duyệt sẽ hỗ trợ kiểu CSS3, đáng chú ý là bất kỳ phiên bản IE nào, vì vậy chúng tôi vẫn cần xác định style dự phòng của mình. Thêm code sau vào stylesheet:

/* 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 cũng sẽ thêm các tên class cho biết các tính năng CSS3 nào không có sẵn cho trình duyệt, vì vậy chúng tôi có thể dễ dàng cung cấp các quy tắc thay thế, sử dụng các dự phòng dựa trên hình ảnh trong đó các tính năng không được hỗ trợ cũng như bất kỳ style nào chúng tôi có thể cần do sử dụng các hình ảnh.

Bạn có thể nhận thấy rằng chúng tôi cũng sử dụng các bộ chọn dành cho class no-js của chúng tôi ở đây; điều này là do khi JavaScript bị vô hiệu hóa, Modernizr sẽ không chạy và sẽ không thêm các tên class mà chúng ta cần bổ sung vào tài liệu, do đó, các dự phòng không dùng CSS3 của chúng ta cũng trở thành các dự phòng không dùng js.

Bước 5. Bổ sung script

Bây giờ hãy bổ sung một số script. Điều đầu tiên chúng ta cần làm là xóa clas no-js khỏi phần body của trang khi JavaScript không bị vô hiệu. Chúng tôi muốn thực hiện điều này càng sớm càng tốt trong quá trình render trang để tránh chập chờn khi các style được thay đổi. Ngay sau thẻ mở body bổ sung mã sau đây:

1	<script>
2	var el = document.getElementsByTagName("body")[0];
3	el.className = "";
4	</script>

Tất cả điều chúng ta làm là lấy element <body> theo tên thẻ và đặt thuộc tính className của nó thành một chuỗi rỗng. Thông thường, chúng tôi sẽ sử dụng jQuery để làm điều đó nhưng vì jQuery sẽ không tải lên khi script này được thực thi, chúng tôi không có thể sử dụng nó. Chúng tôi có thể tải jQuery trước script, tất nhiên, nhưng chúng tôi sẽ giảm đi hiệu suất rất lớn. Script của chúng tôi chỉ có 2 dòng code nên nó sẽ không gây ra bất cứ chậm trễ đáng nói nào và vì nó sẽ được thực thi trước khi trình duyệt thậm chí đã xử lý phần mark-up cho thành phần <nav>, sẽ không có nội dung flash nào bị xóa.

Bây giờ class đã bị xóa khỏi phần body, các menu con CSS của chúng ta sẽ không còn hoạt động nữa nên chúng ta có thể thêm hành vi này trở lại với jQuery và cùng lúc cải thiện nó. Ở cuối tài liệu, ngay sau phần tham chiếu của script cho Modernizr, thêm đoạn mã sau:

<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 tương đối đơn giản; chúng tôi wrap mã của mình trong một closure và truyền vào đối tượng jQuery được name-space an toàn cho ký hiệu đô la, trong trường hợp một thư viện khác được sử dụng khi code được đưa vào thực tế. Sau đó, chúng tôi lưu trữ một tham chiếu đến thành phần <nav> để chúng tôi có thể tham chiếu đến nó mà không cần chọn nó từ tài liệu nhiều lần. Sau đó chúng tôi xử lý từng mục danh sách trong menu.

Đối với mỗi element phù hợp, chúng tôi kiểm tra xem nó có chứa bất kỳ phần tử <ul> lồng nhau nào không và nếu có, chúng tôi thêm phần tử <span> mới vào list item. Điều này sẽ trở thành chỉ số menu con của chúng tôi. Khi tìm thấy menu con, chúng tôi cũng đính kèm event helper mouseenter() và mouseleave() vào mục danh sách có chứa menu. Tất cả điều mà helper này làm là hiển thị và ẩn menu con bằng cách trượt nó xuống hoặc lên tương ứng. Lưu ý việc sử dụng phương thức stop() để ngăn chặn việc mở và đóng hình động xếp đang hàng lên nếu con trỏ chuột liên tục được di chuyển lên và xuống khỏi các mục trong danh sách mục tiêu.

Tại thời điểm này, chúng ta nên biết khá nhiều hầu hết các tình huống; trong bất kỳ trình duyệt nào hỗ trợ HTML5, menu của chúng tôi sẽ trông tương đối giống nhau bất kể CSS3 có được hỗ trợ hay không và liệu script có được kích hoạt hay không. Tuy nhiên, IE cho chúng tôi thấy một vấn đề; Khi JS được bật, file htmlshiv.js làm cho IE hiểu phần tử <nav> và các style không phải css3 của chúng tôi được chọn và triển khai - tất cả đều rất tốt (chúng tôi vẫn có một số vấn đề với IE7, như trong số những điều khác chúng tôi auto-clearing :after các quy tắc không được hiểu hoặc áp dụng).

Tuy nhiên, các vấn đề bắt đầu khi IE được sử dụng với script bị vô hiệu hóa - trong tình huống này, file html5shiv.js không được thực thi và IE không hiểu phần tử <nav>. Không có selector nào của chúng tôi có chứa nav trong đó sẽ được triển khai! Không phải là điều tệ nhất; chúng tôi có thể cung cấp một stylesheet thay thế chỉ được sử dụng khi trình duyệt bị tắt JS và là IE. Trực tiếp ngay sau khi script bỏ class no-js khỏi phần tử <body>, bổ sung phần sau đây:

<noscript>
<!--[if IE]>
	<link rel="stylesheet" href="css/ie.css">
<![endif]-->
</noscript>

Một giải pháp thực sự đơn giản. Bây giờ chúng ta cần tạo style-sheet mới; thêm các quy tắc sau vào tài liệu mới trong code editor của bạn:

/* 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; }

Lưu cái này trong thư mục css dưới dạng ie.css. Như bạn có thể thấy, chúng tôi không hướng mục tiêu vào phần tử <nav> trong style-sheet này, một vài style chúng tôi đưa vào phần tử <nav> trước đó đã được bổ sung vào phần tử <ul> và có một vài style mới cần cụ thể đưa vào cho tình huống này. Về cơ bản, stylesheet tạo hiệu ứng giống như trước đây, vì vậy IE8 với JS bị vô hiệu hóa vẫn sẽ trông như thế này:

Chúng tôi đã tận dùng một vài hình ảnh cho trường hợp này bởi vì chúng ta không có phần tử <nav> để đưa background-repeat cho gradient chính. Vậy với tất cả những trình duyệt hiện đại, với JS đã kích hoạt và không kích hoạt, hoạt động như mong đợi - bằng cách dùng CSS3 ở nơi có thể và hình ảnh dự ảnh dự phòng.

IE7 vẫn sẽ mang lại rắc rôi cho chúng tôi, ngay cả khi kích hoạt script, nhưng chúng tôi có thể khắc phục dễ dàng bằng cách sử dụng một comment có điều kiện khác để riêng cho IE7 và cung cấp một stylesheet mới chỉ dành cho IE7 để khắc phục các vấn đề về layout; đây là điều chúng ta cần:

* 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; }

Lưu vào trong thư mục css dưới dạng ie7.css và thêm một comment có điều kiện vào <head> của trang:

1	<!--[if IE 7]>
2	<link rel="stylesheet" href="css/ie.css">
3	<link rel="stylesheet" href="css/ie7.css">
4	<![endif]-->

Chúng ta đã xong một menu điều hướng được xây dựng và tạo kiểu với các yếu tố và style mới nhất với các dự phòng và sửa lỗi cho các trình duyệt cũ hơn.