Có rất nhiều cách để bạn có thể tạo được một menu sổ ngang như thế nàyThườ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:
. Trong mỗi thẻ 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à:
Chúc các bạn thành công.
Đầ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:
- Code:
<!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>
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à:
- Code:
/*------------------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;
}
Chúc các bạn thành công.