Tạo Menu Responsive kiểu Dropdown
Trang 1 trong tổng số 1 trang • Share
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
Mens
Loafers
Sneakers
Formal
>> 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
- Đối với màn hình lớn, menu sẽ hiển thị đúng 2 cấp bậc - Đối với màn hình nhỏ, menu sẽ thu hẹp lại đúng với kích cỡ của màn hình và theo kiểu cha-con Bước 1: Vẫn như những bài trước, bước đầu tiên là khởi tạo khung xương cho việc hiển thị:
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ả:
Bước 3: Tạo liên kết cho menu nằm ngang (Horizontal Dropdown Menu) Sử dụng :hover trong css cho các li
.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ả:
Bước 4: Tạo liên kết cho menu nằm dọc (Vertical Dropdown Menu) sử dụng meta với kiểu:
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;
}
}
Bước 5:Chuyển đổi tử Hover sang Click Khi bạn không thể hover nữa, bạn sẽ tạo một số điều kiện trong code để kiểm tra điều kiện chiều rộng của màn hình, với các sự kiện click() và hover().
$(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 {
...
}
Bước 7: Thêm một số định dạng
.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%;
}
}
Bước 8: Sự kiện khi hiển thị với các loại thiết bị khác nhau
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
nuong- Cấp 1
- Bài gửi : 23
Điểm : 3328
Like : 0
Tham gia : 02/12/2015
Similar topics
» In menu bìa da, menu bìa cứng, menu nhà hàng, quán ăn giá rẻ
» Bán bìa menu bằng da, bìa menu bằng da, làm sổ menu bằng da, địa chỉ làm sổ menu, cuốn thực đơn bằng da, hộp khăn giấy bằng da,
» [TP.HCM] Xưởng sản xuất sổ menu, làm bìa sổ menu, làm bile tính tiền, làm sổ kẹp tiền
» Nhận Đặt Làm Quyển Menu, In Menu, Bán Quyển Menu Bìa Da Cao Cấp,
» In Menu Quận Bình Thạnh – Menu Cà Phê, Nhà Hàng, Quán Ăn
» Bán bìa menu bằng da, bìa menu bằng da, làm sổ menu bằng da, địa chỉ làm sổ menu, cuốn thực đơn bằng da, hộp khăn giấy bằng da,
» [TP.HCM] Xưởng sản xuất sổ menu, làm bìa sổ menu, làm bile tính tiền, làm sổ kẹp tiền
» Nhận Đặt Làm Quyển Menu, In Menu, Bán Quyển Menu Bìa Da Cao Cấp,
» In Menu Quận Bình Thạnh – Menu Cà Phê, Nhà Hàng, Quán Ăn
Trang 1 trong tổng số 1 trang
Permissions in this forum:
Bạn không có quyền trả lời bài viết
|
|