Menu ngang và submenu ngang (CSS ) doc

Menu ngang và submenu ngang CSS Trong hầu hết mọi trường hợp khi sử lý CSS bạn đều rất đau đầu khi cần ie6 hiểu ý bạn.. Cách thức tạo menu subnav dưới đây sử dụng css kết hợp Jquery rất

Menu ngang và submenu ngang (CSS )

Trong hầu hết mọi trường hợp khi sử lý CSS bạn đều rất đau đầu khi cần ie6 hiểu ý bạn Cách thức tạo menu subnav dưới đây sử dụng css kết hợp Jquery rất đơn giản tuy nhiên hiệu quả thật mỹ mãn Bạn hoàn toàn có thể kết hợp với việc truy vấn từ DB

Điều cần thiết khi tạo sub menu là bạn cần tách biệt sub menu ra khỏi menu chính bằng thẻ Tất nhiên bạn có thể

có lựa chọn khác như dùng tiếp thẻ ul

<ul id="topnav">

<li><a href="#">Link</a></li>

<li>

<a href="#">Link</a>

<! Subnav Starts Here >

<span>

<a href="#">Subnav Link</a> |

<a href="#">Subnav Link</a> |

<a href="#">Subnav Link</a>

</span>

<! Subnav Ends Here >

</li>

<li><a href="#">Link</a></li>

Với code html trên menu của bạn thể hiện như sau:

Không giống với đa số các menu thả xuống (dropdown menu) khác, ở đây submenu (menu cấp 2) được nằm trên cùng 1 dòng

Các submenu có thứ tự từ trái qua phải, theo các thẻ dịnh dạng css của bạn

Định dạng cho CSS

ul#topnav {

margin: 0; padding: 0;

float: left;

width: 970px;

list-style: none;

position: relative; /* thiết lập vị trí của ul chưa menu */

font-size: 1.2em;

background: url(topnav_stretch.gif) repeat-x;

}

ul#topnav li {

float: left;

margin: 0; padding: 0;

border-right: 1px solid #555; /* các menu li */

}

ul#topnav li a {

padding: 10px 15px;

display: block;

color: #f0f0f0;

text-decoration: none;

}

ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; }

ul#topnav li span {

float: left;

padding: 15px 0;

position: absolute;

left: 0; top:35px;

display: none; /* mặc định menu cấp 2 là ẩn */

width: 970px;

background: #1376c9;

color: #fff;

/* Bottom right rounded corner */

-moz-border-radius-bottomright: 5px;

-khtml-border-radius-bottomright: 5px;

-webkit-border-bottom-right-radius: 5px;

/* Bottom left rounded corner */

-moz-border-radius-bottomleft: 5px;

-khtml-border-radius-bottomleft: 5px;

-webkit-border-bottom-left-radius: 5px;

}

ul#topnav li:hover span { display: block; } /* hiển thị menu cấp 2 khi đưa chuột vào */

ul#topnav li span a { display: inline; } /* tất cả các menu câp 2 cùng nằm trên 1 dòng */

ul#topnav li span a:hover {text-decoration: underline;}

Bạn cần chèn jquery vào bằng cách download rồi chèn hoặc chèn trực tiếp từ link:

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Chèn thêm vào code java sử lý sự kiện khi di chuột vào menu

<script type="text/javascript">

$(document).ready(function() {

$("ul#topnav li").hover(function() { //sự kiện khi đưa chuột vào menu

$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item

$(this).find("span").show(); //hiễn thị menu cấp 2

} , function() { //on hover out

$(this).css({ 'background' : 'none'});

$(this).find("span").hide(); //ẩn menu cấp 2

});

});

</script>

Xem demo:http://www.sohtanaka.com/web-design/examples/horizontal-subnav/