CSS3 – Tạo Collapsible Menu với selector :target

jQuery - Auto Collapsible Navigation Menu:target là một selector mới của CSS3 với mục đích chọn lựa đối tượng dựa vào id của nó và được xác định dựa vào chuỗi URI. Selector này được sử dụng kết hợp với các thẻ <a> với thuộc tính href chỉ đến id của thẻ cần chỉ đến. Tính năng này giúp bạn có thể thiết kế các giao diện tương tác mà không cần dùng đến mã javascript.

Trong bài viết này tôi sẽ thực hiện lại ví dụ làm collapsible menu bằng cách sử dụng jQuery. Menu của tôi có dạng như sau:

<aside>
	<section id="cat1">
		<a href="#cat1">Web Development</a>
		<ul>
			<li>Ajax</li>
			<li>ASP.NET</li>
			<li>HTML / CSS</li>
			<li>PHP</li>
		</ul>
	</section>

	<section id="cat2">
		<a href="#cat2">Mobile Development</a>
		<ul>
			<li>iPhone</li>
			<li>Android</li>
			<li>Windows Mobile</li>
			<li>Palm and WebOS</li>
		</ul>
	</section>

	<section id="cat3">
		<a href="#cat3">Multimedia</a>
		<ul>
			<li>DirectX</li>
			<li>GDI+</li>
			<li>OpenGL</li>
		</ul>
	</section>
</aside>

Tiếp đến là các mã CSS để định dạng menu, ở đây tôi sẽ thiết lập display: none cho các thẻ <ul> để chúng được ẩn đi. Chỉ duy nhất một thẻ <ul> được hiện ra khi người dùng click vào header của mỗi phần trong menu (các header này là thẻ <a> với href chỉ đến id của <section>):

aside{
	font: 14px arial, verdana, sans-serif;
	width: 12em;
	background: #fe9900;
	border-color: #fe9900;
	border-width: 1px;
	border-style: solid;
}

aside section ul{
	display: none;
	list-style: none;
	margin: 0px;
	padding: 0px;
}
aside section li{
	padding: 2px 3px;
	background: #fff8de;
	cursor: pointer;
}
aside section li:hover{
	background: #ffcc66;
}
aside section a {
	font-weight: bold;
	display: block;
	border: 1px solid #fe9900;
	padding: 2px 3px;
	background: #ffcc66;
	text-decoration: none;
}

Phần chính của ví dụ là định dạng thẻ được xác định với selector :target. Tôi sẽ làm cho thẻ

    được chọn hiển thị lên bằng cách đặt display: block.
aside section:target ul
{
	display: block;
}

Mã nguồn hoàn chỉnh:

Khi chạy ví dụ này, bạn sẽ thấy thanh địa chỉ của trình duyệt thay đổi dựa vào header được click.

<html>
	<head>
	<title>CSS3-Only Navigation Menu</title>
	<style>
aside{
	font: 14px arial, verdana, sans-serif;
	width: 12em;
	background: #fe9900;
	border-color: #fe9900;
	border-width: 1px;
	border-style: solid;
}

aside section ul{
	display: none;
	list-style: none;
	margin: 0px;
	padding: 0px;
}
aside section li{
	padding: 2px 3px;
	background: #fff8de;
	cursor: pointer;
}
aside section li:hover{
	background: #ffcc66;
}
aside section a {
	font-weight: bold;
	display: block;
	border: 1px solid #fe9900;
	padding: 2px 3px;
	background: #ffcc66;
	text-decoration: none;
}

aside section:target ul
{
	display: block;
}
	</style>

</head>
	<body>
<aside>
	<section id="cat1">
		<a href="#cat1">Web Development</a>
		<ul>
			<li>Ajax</li>
			<li>ASP.NET</li>
			<li>HTML / CSS</li>
			<li>PHP</li>
		</ul>
	</section>

	<section id="cat2">
		<a href="#cat2">Mobile Development</a>
		<ul>
			<li>iPhone</li>
			<li>Android</li>
			<li>Windows Mobile</li>
			<li>Palm and WebOS</li>
		</ul>
	</section>

	<section id="cat3">
		<a href="#cat3">Multimedia</a>
		<ul>
			<li>DirectX</li>
			<li>GDI+</li>
			<li>OpenGL</li>
		</ul>
	</section>
</aside>
	</body>
</html>

Kết quả:

jQuery - Auto Collapsible Navigation Menu

YinYang’s Programming Bbog

Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s