-------
Phần 34.
Tạo navigation với jQuery
Phần này sẽ tập làm một sản phầm nhỏ nhỏ với jQuery.
Cùng xem và làm theo phần hướng dẫn tạo navigation với
jQuery, clip này được chia sẻ bởi Demon Warlock. Clip này tác giả làm từ năm
2010 (bản gốc tại đây: https://www.izwebz.com/video-tutorials/navigation-gia-flash-voi-jquery/)
[7/10/2017 bản gốc không còn truy cập được]
Đây là bản trên youtube: https://www.youtube.com/watch?v=2UjpScjIb5Q&list=PLAxmMVqEIFdemZOwyf2bP-g2Ae3WLD7tX&index=2
Để ý và học theo cách viết code, viết ghi chú của tác giả.
Đọc thêm về overflow:hidden tại đây: http://www.ducanhplus.com/2013/11/thuoc-tinh-overflow-trong-css/
Để căn giữa chữ trong một khung: thiết lập line-height và
height bằng nhau. Ví dụ:
ul#nav a, ul#nav span {
padding:
10px, 20px;
float:
left; clear: both;
color:
white; text-decoration: none;
line-height:
20px;
width:
100%; height: 20px;
background:
url(bg.jpg) repeat-x top left;
}
Có thể lấy cái hình bg.jpg tại đây: https://drive.google.com/open?id=0B4FOelgeetqJSVVKemsyS2ZMckE)
Chỗ này chưa hiểu ý nghĩa của top, left trong dòng lệnh: background: url(bg.jpg) repeat-x top left;
xem thêm về nó tại: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position => vị trí đặt hình nền: bắt đầu từ phía trên, bên
trái của element được đặt.
Trong ví dụ này, tác giả đã ứng dụng viết code theo kiểu
progressive enhancement. Sẽ tìm hiểu về progressive enhancement ở phần sau.
Để ý chức năng của phương thức stop(): không cho hiệu ứng
lặp lại nhiều lần.
Đoạn mã tham khảo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>Document</title>
<style>
* {
margin:
0;
padding:
0;
}
#wrapper
{
margin:
20px auto;
width:
700px;
}
ul#nav
{
list-style-type:
none;
float:
left;
}
ul#nav
li {
overflow:
hidden;
float:
left;
height:
40px;
}
ul#nav
span, ul#nav a {
padding:
10px 20px;
float:
left;
clear:
both;
color:
white; text-decoration: none;
line-height:
20px;
width:
100%; height: 20px;
background:
url('bg.jpg') repeat-x top left;
}
ul#nav
span {
background-position:
left top; /* cho hiển thị nửa trên của bg.jpg */
}
ul#nav
a {
background-position:
left bottom; /* cho hiển thị nửa dưới của bg.jpg */
}
</style>
<script
src="jquery.js"></script>
<script>
$(function(){
var
$navLi = $('#nav li')
$('<span></span>').insertBefore('#nav
li a'); // làm cho element a bị đẩy xuống hàng trong box của li và không thấy
trên giao diện
$navLi.each(function(){
var
linkText = $(this).find('a').text();
$(this).find('span').text(linkText);
});
$navLi.hover(function(){
$(this)
.find('span')
.stop()
// không cho hiệu ứng lặp lại nhiều lần
.animate({marginTop:
'-40px'}, 300);
},
function(){
$(this)
.find('span')
.stop()
.animate({marginTop:
'0px'}, 300);
});
});
</script>
</head>
<body>
<div
id="wrapper">
<ul
id="nav">
<li><a
href="#">Home</a></li>
<li><a
href="#">About</a></li>
<li><a
href="#">Clients</a></li>
<li><a
href="#">Contact Us</a></li>
<li><a
href="#">Forum</a></li>
<li><a
href="#">Testimonial</a></li>
</ul>
</div>
</body>
</html>
-----------
Cập nhật [8/10/2017][9/10/2016]
-----------