Nguyễn Lợi: Tạo một thanh navigation bar đẹp mắt

Một câu hỏi tôi thường nhận được là làm thế nào để tạo một thanh navigation bar(còn gọi là thanh điều hướng, thanh menu,...) dành cho một websites. Bài viết này hướng dẫn các bạn tạo một thanh navigation bar với HTML/ CSS và một chút code javascript đi kèm với thư viện jQuery.
Cấu trúc của thanh navigation

Ở đây là một vài đoạn code HTML "chuẩn" dùng để thực hiện việc tạo thanh navigation :

<div id="nav"> 

<ul>

<li>item 

<ul> 

<li>sub item</li>
</ul>
</li>
<ul>
</div>

Còn đây là đoạn code mà tôi đã sử dụng trong bài viết (dựa theo cấu trúc chuẩn ở trên:

<div id="nav">

<ul>

<li><a href="#">Web Design</a>
<ul class="submenu">
<li><a href="http://google.com">Google</a></li>
<li><a href="http://zing.vn">Zing</a></li>
</ul>
</li>

<li><a href="#">Tech News</a>
<ul class="submenu">
<li><a href="http://genk.vn">Genk</a></li>
<li><a href="http://www.cnet.com">CNET</a></li>
</ul>
</li>

<ul>
<div>

Code CSS

Ở phần này tôi không giải thích tác dụng của code CSS mà chủ yếu để các bạn đọc hiểu vì yêu cầu của bài là phải nắm rõ CSS và HTML.

#nav{

height:32px;
line-height:32px;
background:#3B5998;
padding:0 10px;
}

#nav ul,
#nav ul li {

margin:0;
padding:0;
list-style:none;
}
#nav ul li{

float:left;
display:block;
}

#nav ul li a:link,
#nav ul li a:visited{

color:#FFF;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 20px 0 6px;
display:block;
}
#nav ul li a:hover{

color:#EBEFF7;
}
#nav ul li ul li{

float:none;
display:block;
}
#nav ul li ul li a:link,
#nav ul li ul li a:visited{

color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
}
#nav ul li ul li a:hover{

color:#3B5998;
background:#EBEFF7;
}

Tiếp tục thêm các dòng code sau vào file CSS:

.submenu {

position: absolute;
width: 160px;
background: #FFF;
padding: 10px;
border: solid 1px #2E4B88;
border-top: none;
display: none;
line-height: 26px;
z-index: 1000;
}

Lưu ý ta cần liên kết file CSS lại với file HTML.

Code JQuery
Bây giờ chúng ta dùng các sự kiện mouseover và mouseleave để hiện hoặc ẩn các submenu. Lưu ý cần liên kết đến file jquery.js bằng dòng mã sau ở thẻ <head> :

<script type="text/javascript" src="jquery.js"></script>

Để tìm ra file jquery.js các bạn download tại : jquery.com
Và sau đó tiếp tục thêm các dòng mã sau :

<script type="text/javascript">
function nav(){

$('div#nav ul li').mouseover(function() {

$(this).find('ul:first').show();
});

$('div#nav ul li').mouseleave(function() {

$('div#nav ul li ul').hide();
});

$('div#nav ul li ul').mouseleave(function() {

$('div#nav ul li ul').hide();;
});
};

$(document).ready(function() {

nav();
});
</script>

Ngoài ra bạn có thể thêm đoạn code javascript trên bằng một file với đuôi .js riêng biệt.

Kết quả :
nguyenloi

Nguyễn Lợi

Pages

Monday, April 9, 2012

Tạo một thanh navigation bar đẹp mắt

No comments:

Post a Comment