Hôm nay: 12/5/2024, 23:04
Tìm thấy 3 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ỗi thường gặp khi code HTML và CSS
joomla module manager xin giới thiệu các lỗi thường gặp khi viết HTML và CSS:
1 HTML – Sai DOCTYPE
2 Sử dụng id giống nhau.
Trên một trang web, class có thể dùng nhiều lần nhưng bạn chỉ được dùng id cho 1 element riêng. Điều này đặc biệt quan trọng khi áp dụng javascript, ajax.
Sử dụng sai:
<div id=”expl”>Example</div> <div id=”expl”>Other Example</div>
Sử dụng đúng:
<div id=”example”>Example</div> <div id=”otherexampl”>Other Example</div>
3 Đóng thẻ không đúng thứ tự
Việc đóng thẻ đúng thứ tự là rất quan trọng, ví dụ thẻ div chỉ được đóng sau khi tất cả các thẻ trong nó đóng
Sử dụng sai:
<div><b>Example</div></b>
Sử dụng đúng:
<div><b>Example</b></div>
4 Viết hoa tags:
Sẽ không xác thực được mà HTML nếu bạn viết như sau:
<DIV>Example</DIV>
5 Sử dụng style ngay trên thẻ.
Có lợi thế khi sử dụng style trên thẻ HTML là: nhanh hơn khi đưa chúng vào file CSS riêng, ấn định trực tiếp cho thành phần đó. Nhưng điều đó sẽ làm cho bạn rất vất vả khi thay đổi các thẻ giống nhau , khó gỡ rối và làm cho mã HTML của chúng ta nhìn vào rất rối.
ví dụ: <div class=”example” style=”color:#fff; font-family: ‘Arial';font-size: 14px;”>Example</div>
6 Sử dụng các ký tự đặc biệt
hãy chắc chắn rằng bạn sử dụng ký tự đặc biệt đúng cách trong mã HTML vì không phải lúc nào trình duyệt cũng có thể hiểu và xử lý chúng
Sử dụng sai:
<p> ©, & Stuff</p>
Sử dụng đúng:
<p>©, & Stuff</p>
7 Không có thuộc tính alt trong thẻ img
Tại sao phải thêm alt vào trong thẻ img khi không hề có khác biệt? Alt sẽ giúp người đọc xem được thông tin về ảnh khi họ không tải được ảnh đó, nó còn giúp cho SEO
Sử dụng sai:
<img src=”image.jpg” />
Sử dụng đúng:
<img src=”image.jpg” alt=”image alt tag” />
8 Dùng cách viết tắt trong CSS
giả sử bạn có mã:
.ClassName{
margint-top: 10px; margin-bottom:10px; margin-left: 20px; margin-right: 20px;
}
khi cả 4 margin đều có giá trị, ta có thể viết ngắn gọn thành:
.ClassName{
margin: 10px 20px 10px 20px;
}
9 Sử dụng đơn vị cho giá trị bằng 0 trong css
Bạn không cần phải điền đơn vị cho các giá trị bằng 0 vì 0px, 0pt, 0em đều bằng nhau.
/* Thay vì */ margin:0px 0px 10px 0px; /* Bạn nên dùng */ margin:0 0 10px 0;
10 Sử dụng sai position trong CSS
Khi bạn mới bắt đầu học CSS thì position khá khó hiểu. Bạn có thể sử dụng: static, relative, absolute và fixed. Giá trị mặc định của position là static
hiện nay với joomla có phần mềm để nén css và html là joomla minify css và joomla minify html
- on 20/1/2015, 17:43
- Search in: Giới thiệu website
- Chủ đề: Các lỗi thường gặp khi code HTML và CSS
- Trả lời: 1
- Xem: 266
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: 307
|
|
|
