menu ngang lật mặt với jquerry

Bước 1 : index.html

PHP Code:

<div id="menu-container">
<ul id="navigationMenu">
<li><a href="#" class="normalMenu">Home</a></li>
<li><a href="#" class="normalMenu">Services</a></li>
<li><a href="#" class="selectedMenu">Our clients</a></li>
<li><a href="#" class="normalMenu">The team</a></li>
<li><a href="#" class="normalMenu">About us</a></li>
<li><a href="#" class="normalMenu">Contact us</a></li>
</ul>
</div>


bạn có thể linh động menu trên

Click this bar to view the full image.

Bước 2 – jQuery

ở hình minh họa bên trên. khi đưa chuột vào menu của bạn sẽ thay đổi là cuộn từ trên xuống và có màu trắng khác với menu chưa được kích hoạt
điều này giúp thuận tiện hơn cho khách xem website

các liên kết # bên trên sẽ được thay thế thành link của bạn

PHP Code:

$(document).ready(function(){
// thực thi đoạn code khi trang đã được nạp xong

$('#navigationMenu li .normalMenu').each(function(){    // tạo vòng lặp cho mỗi hàng

// tạo cách hiển thị cho liên kết bằng cách gán class
$(this).before($(this).clone().removeClass().addClass('hoverMenu'));

});

$('#navigationMenu li').hover(function(){    // sử dụng phương thức khi rê chuột vào..

// chỉ định hành động khi đưa chuột vào
$(this).find('.hoverMenu').stop().animate({marginTop:'0px'},200);
// các hiệu ứng cung cấp của jQuery

},

function(){
// hành động khi đưa chuột ra
$(this).find('.hoverMenu').stop().animate({marginTop:'-25px'},200);

});

});


$(’document’).ready giúp đảm bảm khi trang web đã nạp xong thì thực thi
sau đó tiến hành lặp tất cả và gán cho 1 class mới hoverMenu
hover() xử lí khi đưa chuột vào và khi rời chuột ra. Sự kiện mouseover và mouseout.
marginTop là hiệu ứng của menu
stop() dừng tất cả các chuyển động để tránh trường hợp dữ liệu sẽ đè lên nhau

Bước 3 : CSS

PHP Code:

/* giao diện trang web */

body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{    /* resetting some elements for better browser compatibility */
margin:0px;
padding:0px;
}

body{    /* giao diện của body */
margin-top:20px;
font-family:Arial, Helvetica, sans-serif;
color:#51555C;
height:100%;
font-size:12px;
}

/* giao diện của menu ngang */

ul{    /* danh sách có thứ tự */
height:25px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

ul li{
border:1px solid #444444;
display:inline-block;    /* các đối tượng li sẽ lên nằm cùng 1 dòng */
float:left;    /* canh trái các li */
height:25px;
list-style-type:none;    /* tắt chức năng hiển thị các icon phía trước mỗi li*/
overflow:hidden;    /* ẩn các nội dung bị tràn */
}

ul li a, ul li a:hover,
ul li a:visited{
text-decoration:none;    /* bỏ gạch chân dưới các liên kết */
}

/* styling the links */
.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {/* Các lớp này sẽ được áp dụng khi di chuyển vào đối tượng hay rời khỏi đối tượng */
outline:none;
padding:5px 10px;
display:block;
}

/* styles that are assigned individually */

.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
margin-top:-25px;
background:url(img/grey_bg.gif) repeat-x #eeeeee;
color:#444444;
}

.selectedMenu,.selectedMenu:visited {
margin:0;
}

.normalMenu, .normalMenu:visited{
color:white;
background:url(img/dark_bg.gif) repeat-x #444444;
}