Thứ bảy, ngày 3 tháng 12 năm 2016

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

Ngày đăng: 18/4/2012, 8:26:47AM | Lượt xem: 1,936
Hot!

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

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

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.