Tạo Responsive Dropdown Menu

nuong · 13/1/2016

Nếu các bạn đã viết code với việc tạo menu hiển thị không responsive thì khi các bạn cho nhỏ màn hình các item con sẽ bị bung ra không đúng định dạng ban đầu. 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:

- Đố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
- Mens
  - Loafers
  - Sneakers
  - Formal

>> Khóa hoc php cơ bản tại hà nội !
Bước 2: Tạo định dạng trong file .css

Mã:

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

Mã:

.nav li {
position: relative;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}

Xem thêm: Khoa hoc lap trinh 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ử:

Mã:

$(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:

Mã:

@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().

Mã:

$(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

Mã:

$(".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:

Mã:

$(".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

Mã:

.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

Mã:

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

Mã:

$(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()

Mã:

$(".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 khoa hoc photoshop cơ bản nâng cao Vietpro Education

Tạo Responsive Dropdown Menu

nuong

Thành viên

〈 Vui Xuân Bính Thân - Con Nhận Thật Nhiều Quà

Mua máy bơm chữa cháy cột áp 50m,máy bơm cứu hỏa KOSHIN SEM50V giá rẻ nhất 〉

Chủ đề liên quan