YOMEDIA
Menu ngang và submenu ngang (CSS )
Chia sẻ: Nguyễn Hải
| Ngày:
| Loại File: PDF
| Số trang:5
297
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 . ...
AMBIENT/
Chủ đề:
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/
Thêm tài liệu vào bộ sưu tập có sẵn:
Báo xấu
LAVA
ERROR:connection to 10.20.1.100:9315 failed (errno=111, msg=Connection refused)
ERROR:connection to 10.20.1.100:9315 failed (errno=111, msg=Connection refused)
Đang xử lý...
Thêm vào BST
Báo xấu
