Tạo Menu xổ ngang dùng html và css

Thứ Hai, 4 tháng 6, 2012

Có rất nhiều cách để bạn có thể tạo được một menu sổ ngang như thế này
 
Thường thì khi làm menu sổ ngang như vậy thì mọi người nghĩ ngay đến việc sử dụng javascript. Ít ai biết được rằng chỉ với những kiến thức cơ bản về html và css bạn cũng hoàn toàn có thể tự tạo cho mình một menu sổ ngang chẳng kém ai mà không cần phải sử dụng đến những hàm javascript loằng ngoằng và khó điều khiển.
Đầu tiên bạn bắt đầu với mã html để tạo ra menu. Bạn tạo ra một file html mới đặt tên là menu.html và viết code với nội dung như sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="vn" lang="vn">
<head>
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
<div id="mainNav">
<ul id="nav">
<li><a href="#">Main 1</a>
<ul>
<li><a href="/">Sub 1</a></li>
<li><a href="/">Sub 2</a></li>
<li><a href="/">Sub 3</a></li>
<li><a href="/">Sub 4</a></li>
<li><a href="/">Sub 5</a></li>
<li><a href="/">Sub 6</a></li>
</ul>
</li>
<li><span>Main 2</span>
<ul>
<li><a href="/">Sub 1</a></li>
<li><a href="/">Sub 2</a></li>
<li><a href="/">Sub 3</a></li>
<li><a href="/">Sub 4</a></li>
<li><a href="/">Sub 5</a></li>
<li><a href="/">Sub 6</a></li>
</ul>
</li>
<li><span>Main 3</span>
<ul>
<li><a href="/">Sub 1</a></li>
<li><a href="/">Sub 2</a></li>
<li><a href="/">Sub 3</a></li>
<li><a href="/">Sub 4</a></li>
<li><a href="/">Sub 5</a></li>
<li><a href="/">Sub 6</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Mình xin giải thích một chút về ý đồ của mình. Menu mình tạo ra bởi các thẻ <li>. Trong mỗi thẻ <li> này sẽ chứa tiêu đề của menu và một menu con (sub menu). Mặc định menu con (sub menu) sẽ ở trạng thái ẩn (display: none) chỉ khi nào trỏ chuột vào menu chính thì menu con (sub menu) chưa trong nó mới chuyển sang trạng thái hiển thị. 
Sau khi tạo xong file menu.html. Bạn save lại và tạo một file mới có tên style.css (đặt cùng cấp với file menu.html. Và đoạn code cho file style.css này sẽ là:
/*------------------MENU------------------------*/
ul{
margin: 0;
padding: 0;
}
div#mainNav {
width: 200px;
line-height: 100%;
z-index:99999999;
}
div#mainNav ul {
list-style: none;
z-index:99999;
border: 1px solid #333333;
border-bottom: 0 none;
display: block;
width: 200px;
}
div#mainNav ul li {
position: relative;
border-bottom: 1px solid #333333;
z-index:99999;
cursor: pointer;
}
div#mainNav ul li:hover{
background:#ffffff;
background-color: #99CCFF;
}
div#mainNav ul li a , div#mainNav ul li span{
text-decoration: none;
font-weight:normal;
display: block;
color: #FF0033;
padding: 5px;
}
div#mainNav ul li a:hover, div#mainNav ul li span:hover{
text-decoration: none;
color: #0000FF;
}
div#mainNav ul li ul li{
border-bottom: 1px solid #333333;
padding-left:8px;
}
div#mainNav ul li ul li a{
color: #FF0033;
font-weight:normal;
display: block;
}
div#mainNav ul li ul li a:hover{
color: #0000FF;
text-decoration: none;
}
div#mainNav ul li:hover ul {
display: block;
width: 200px;
}
div#mainNav ul li ul
{
border: 1px solid #333333;
border-bottom: 0 none;
background:#ffffff ;
position: absolute;
top: -1px;
left: 202px;
display: none;
z-index:9999999;
}
Vậy là bạn đã tự tạo cho mình được một menu sổ ngang chỉ với kiến thức cơ bản về html và css.
Chúc các bạn thành công.
Xem thêm bài viết cùng chuyên mục:

Ý kiến bạn đọc [ 0 ]


Ý kiến của bạn