Menu ngang và submenu ngang (CSS )

Chia sẻ: Nguyễn Hải | Ngày: | Loại File: PDF | Số trang:5

Thêm vào BST

Báo xấu

288
lượt xem 41
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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 . ...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: 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 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 . Link Link Subnav Link | Subnav Link | Subnav Link Link
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: 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'}); //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 }); }); Xem demo:http://www.sohtanaka.com/web-design/examples/horizontal-subnav/