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 . ...
Nội dung trích xuất từ tài liệu:
Menu ngang và submenu ngang (CSS ) 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 menusubnav 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 . Link Link Subnav Link | Subnav Link | Subnav Link LinkVớ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êncù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 CSSul#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ộtvào--*/ul#topnav li span a { display: inline; } /*-- tất cả các menu câp 2 cùng nằm trên 1dò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: Chèn thêm vào code java sử lý sự kiện khi di chuột vào menu$(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}); //Addbackground 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 });});Xem demo:http://www.sohtanaka.com/web-design/examples/horizontal-subnav/