Hôm nay: 13/5/2024, 20:45
Tìm thấy 2 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: 167
Các lệnh hay dùng trong css
joomla compress css xin giới thiệu tới các bạn các lệnh thường dùng trong CSS. Việc đầu tiên cần phải quan tâm đối với CSS đó chính là sự tương thích với các trình duyệt web. Hiện nay có rất nhiều trình duyệt khác nhau, nhưng có lẽ dùng nhiều nhất là Chrome và Mozila . Vì vậy mà viết các đoạn mã CSS sao cho tất cả các trình duyệt đều hiểu được không phải là dễ, nhưng cũng không phải là quá khó
1. Lệnh margin
gồm có:
.ClassName{
margin-left:20px ;
margin-right:20px ;
margin-top:20px ;
margin-bottom:20px ;
}
ta có thể viết gộp lại như sau:
.ClassName{
margin: 20px;
}
hoặc
.ClassName{
margin: 20px 30px;
}
căn lề trên và dưới 20px, lề trái và phải là 30px.
hoặc:
.ClassName{
margin: 20px 30px 50px;
}
lề trên căn 20px, lề trái và phải căn 30px, lề dưới căn 50px;
hoặc:
.ClassName{
margin: 20px 30px 40px 50px;
}
sẽ có thứ tự là margin: top right bottom left;
2. Lệnh padding.
Cũng có các thành phần và cách viết gộp như margin nên mình không nhắc lại nữa.
Sự khác nhau giữa lệnh padding và lệnh margin là:
- Khi dùng margin để căn lề thì kích thước của khung nội dung được giữ nguyên.
- Khi dùng padding thì kích thước nội dung sẽ thay đổi. Ví dụ: khung nội dung có độ rộng 200px, dùng dùng căn lề trái là padding-left: 20px, khu sẽ bị dịch sang phải 20px đồng thời độ rộng của khung sẽ được cộng thêm 20px thành 220px.
3. Lệnh background.
.ClassName{
background-color: transparent; // làm trong nền trong suốt
background-image: url(‘/image.jpg’); // ảnh nền
background-repeat: no-repeat; // thuộc tính lặp lại
background-position: top right; // vị trí nền
background-attachment: scroll; // nền trượt
}
- ví dụ như bạn muốn tạo ảnh nền trong suốt, nằm trên cùng bên phải, không lặp lại, và di chuyển theo chuột, lệnh sẽ là:
CODE .ClassName {
background: transparent url(‘image.jpg’) no-repeat top right scroll;
}
4. Lệnh font:
.ClassName {
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:1.4em;
font-family:Georgia, serif;
}
5.Lệnh cho list (ul):
ul {
list-style-type: decimal-leading-zero;
list-style-position:inside;
list-style-image: none; // sử dụng ảnh, nếu muốn sử dụng ảnh cho list, bạn chỉ việc thay none bằng url(‘link ảnh’)
}
để đơn giản ta gộp các thuộc tính chung lại:
ul {
list-style: decimal-leading-zero inside url(‘image.jpg’);
}
6.lệnh Border- đường bao)
.ClassName {
border-width:2px; // độ rộng đường bao
border-style: solid; // kiểu
border-color: #333FFF; // màu có thể thay bằng rgb()
}
đơn giản có thể viết
.ClassName {
border: 2px solid #333FFF;
}
7.Lệnh màu : có thể sử dụng 1 trong các cách dưới đều được
.ClassName {
color: #FFFFFF;
}
.ClassName {
color: #FFF;
}
.ClassName {
color: #fff;
}
.ClassName {
color: rgb(255, 255, 255);
}
joomla minify css xin giới thiệu thêm một số lệnh nâng cao hơn 1 chút:
8. Cross browser transparency: – thiết lập cho từng trình duyệt
.ClassName {
filter:alpha(opacity=50); // trình duyệt IE
-moz-opacity:0.5; // trình duyệt mozilla
-khtml-opacity: 0.5; // trình duyệt Safari
opacity: 0.5; // hầu hết các trình duyệt, nhưng IE thì không.
}
9. First-child selectors
Ví dụ bên dưới tạo màu chữ riêng cho lớp đầu tiên thẻ p
.p:first-child {
color:#fff;
}
10. Drop shadow (tạo bóng đổ)
.your_shadow {
width:400px;
height:200px;
background-color:#000;
-webkit-box-shadow: 5px 5px 2px #ccc;
}
11. Resize
.ClassName{
min-width:100px;
min-height:100px;
max-width:900px;
max-height:900px;
resize:both;
background-color:#ccc;
border:2px solid #666;
overflow:auto;
}
12.dùng dấu “,” để gộp chung các class khi có cùng thuộc tính:
h1, h2, h3, h4, h5, h6 {
font-family: ‘Arial';
}
- on 16/1/2015, 17:29
- Search in: Giới thiệu website
- Chủ đề: Các lệnh hay dùng trong css
- Trả lời: 1
- Xem: 308
|
|
|
