CSS – Làm menu đổ | Dropdown Menu

Bài viết này hướng dẫn các bạn cách tạo một menu đổ (dropdown menu) thuần CSS – chỉ sử dụng CSS và hoàn toàn không có JavaScript.

CSS – Làm menu đổ | Dropdown Menu

CSS – Làm menu đổ | Dropdown Menu

[button link=”http://cosmospham.com/demo/drop-down-menu-css/” color=”#AAAAAA” size=”3″ style=”1″ dark=”0″ radius=”auto” target=”self”]DEMO[/button]

[button link=”https://www.dropbox.com/s/cg6p1e4nvy0drlo/drop-down-menu-css.zip” color=”#AAAAAA” size=”3″ style=”1″ dark=”0″ radius=”auto” target=”self”]SOURCE CODE[/button]

Chuẩn bị HTML cho dropdown menu

Đầu tiên, tạo thẻ div để chứa menu:

<div class="menu"></div>

Sau đó, tạo một unorder list (ul):

<div class="menu">
<ul></ul>
</div>

Tạo các mục trên menu chính:

<div class="menu">
<ul>
	<li><a href="http://cosmospham.com/">Cosmos Pham's Blog</a></li>
	<li class="parent-item"><a href="#">Sản phẩm</a></li>
	<li></li>
	<li><a href="#">Bảng giá</a></li>
	<li></li>
	<li><a href="#">Liên hệ</a></li>
</ul>

Mục nào có menu con (submenu) thì đặt tên class cho nó:

<li class="parent-item">

Rồi thêm một unorder list vào bên trong. List này chứa các mục con:

<ul>
	<li><a href="#">Sản phẩm 1</a></li>
	<li class="parent-item">
		<a href="#">Sản phẩm 2</a>
		<ul>
			<li><a href="#">Sản phẩm a</a></li>
			<li><a href="#">Sản phẩm b</a></li>
			<li><a href="#">Sản phẩm c</a></li>
		</ul>
	</li>
	<li><a href="#">Sản phẩm 3</a></li>
</ul>

Nếu mục con trong submenu nào có chứ submenu thì làm tương tự: thêm class và thêm unorder list. Xem tổng quát:

<div class="menu">
<ul>
<li><a href="http://cosmospham.com/">Cosmos Pham's Blog</a></li >
<li class="parent-item">
	<a href="#">Sản phẩm</a>
	<ul>
		<li><a href="#">Sản phẩm 1</a></li>
		<li class="parent-item">
			<a href="#">Sản phẩm 2</a>
			<ul>
				<li class="parent-item">
					<a href="#">Sản phẩm 2</a>
					<ul>
						<li><a href="#">Sản phẩm 2a</a></li>
						<li><a href="#">Sản phẩm 2b</a></li>
						<li><a href="#">Sản phẩm 2c</a></li>
					</ul>
				</li>
				<li><a href="#">Sản phẩm 2b</a></li>
				<li class="parent-item">
					<a href="#">Sản phẩm 2</a>
					<ul>
						<li><a href="#">Sản phẩm 2a</a></li>
						<li><a href="#">Sản phẩm 2b</a></li>
						<li><a href="#">Sản phẩm 2c</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Sản phẩm 3</a></li>
	</ul>
</li>
<li><a href="#">Bảng giá</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>
</div>

Định dạng dropdown menu với CSS

Định dạng chung:

body {
	font-family: arial;
	font-size: 10pt;
}

a {
	text-decoration: none;
}

Quy định các mục trên menu chính nằm trên một dòng:

.menu ul li {
	display: inline;
	float: left;
}

Thiết lập vị trí cho các submenu:

.menu .parent-item {
	position: relative;
}

.menu .parent-item ul {
	display: none;
	position: absolute;
	top: 40px;
	left: 0;
	padding: 0;
	text-align: left;
}

Lúc rà chuột lên menu cha, nếu mục đó có submenu, nó sẽ hiện ra:

.menu .parent-item:hover>ul {
	display: block;
}

Thêm màu mè:

.menu .parent-item ul li {
	background: #eaffee;
	width: 150px;
}

.menu .parent-item ul li a {
	background: #eaffee;
	line-height: 40px;
	display: block;
	padding-left: 1em;
	padding-right: 1em;
}

.menu .parent-item ul li a:hover {
	background: #ceffd0;
}

.menu .parent-item .parent-item ul {
	margin-left: 0;
	left: 150px;
	padding: 0;
	top: 0;
}

.menu .parent-item .parent-item>a:after {
	content: ">>";
	padding-left: 1em;
}

.menu a {
	line-height: 40px;
	padding: 1em;
	font-weight: bold;
	background: #dbf4d9;
}

.menu a:hover {
	background: #ffffff;
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s