Hôm nay: 6/6/2024, 18:11
Tìm thấy 1 mục
Tạo Menu Responsive kiểu Dropdown
Bài sau đây các bạn sẽ được biết làm thế nào để tạo Responsive Dropdown Menu . Hình ảnh dưới đây sẽ là bài demo các bạn sẽ được học:
Menu
- Shoes
- Womens
- Sandals
- Sneakers
- Wedges
- Heels
- Loafers
- Flats
>> Khóa học lap trinh php cơ bản tại hà nội !
Bước 2: Tạo định dạng trong file .css
body, nav, ul, li, a {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
width: 90%;
max-width: 900px;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#175e4c;
position: relative;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
*zoom: 1;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
z-index: 200;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
z-index: 100;
}
.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index:100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background:#249578;
z-index:200;
border-top: 1px solid #1d7a62;
}
Kết quả:
.nav li {
position: relative;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
Xem thêm: Khóa học lâp trình android tại hà nội!
Thêm mã Jquery đơn giản cho lớp .hover trong danh sách các phần tử:
$(document).ready(function() {
$(".toggleMenu").css("display", "none");
$(".nav li").hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
Kết quả:
Hãy thêm một vài định dạng cho list nằm ngang:
@media screen and (max-width: 800px) {
.nav > li {
float: none;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
$(document).ready(function() {
var ww = document.body.clientWidth;
if (ww < 800) {
$(".toggleMenu").css("display", "inline-block");
$(".nav li a").click(function() {
$(this).parent("li").toggleClass('hover');
});
} else {
$(".toggleMenu").css("display", "none");
$(".nav li").hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
}
});
- Đối với sự kiện Click() chúng ta phải thay đổi mục tiêu từ danh sách các item đến các item cha. KHi danh sách dã lồng vào nhau khi các bạn click 1 item cha. Hãy thêm một đoạn mã code Jquery thêm lớp .parent
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
if (ww < 800) {
$(".toggleMenu").css("display", "inline-block");
$(".nav li a.parent").click(function(e) {
e.preventDefault();
$(this).parent("li").toggleClass('hover');
});
} else {
... }
Bước 6: Chuyển sang chế độ Menu Menu của chúng ta sẽ trông thẩm mỹ hơn khi chuyển trang chế độ mobile:
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(".nav").toggle();
});
if (ww < 800) {
$(".toggleMenu").css("display", "inline-block");
$(".nav").hide();
} else {
...
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
@media screen and (max-width: 800px) {
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
}
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(".nav").toggle();
});
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
adjustMenu();
});
function adjustMenu() {
if (ww < 800) {
$(".toggleMenu").css("display", "inline-block");
$(".nav").hide();
$(".nav li a.parent").click(function(e) {
e.preventDefault();
$(this).parent("li").toggleClass('hover');
});
} else {
$(".toggleMenu").css("display", "none");
$(".nav li").hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
}
}
Bước 9: Chế độ hiển thị và chế độ ẩn Menu
$(document).ready(function() {
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
});
if (ww < 800) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li a.parent").click(function(e) {
e.preventDefault();
$(this).parent("li").toggleClass('hover');
});
} ...
Bước 10:Unbinding Hover Events Để xử lý sự kiện với kích thước của size mobile, các bạn phải có unbind()
$(".nav li").unbind('mouseenter mouseleave');
Sửa lại code với các lớp .click() và .hover() sử dụng .bind()
if (ww < 800) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind("click").bind("click", function(e){
e.preventDefault();
$(this).parent("li").toggleClass('hover');
});
} else {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind("click");
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
$(this).toggleClass('hover');
});
}
------------ Trung tâm đào tạo khóa học photoshop cơ bản nâng cao Vietpro Education
- on 13/1/2016, 16:10
- Search in: 1. CHỢ LINH TINH
- Chủ đề: Tạo Menu Responsive kiểu Dropdown
- Trả lời: 0
- Xem: 170
|
|
|
