Đầu tiên để học được HTML & CSS & Bootstrap thì mọi người nên thực hành nhiều về nó để nhớ các cấu trúc câu lệnh mà sau này mình sẽ thực hành áp dụng vào trong khi học PHP sau này.
sau đây mình cũng chia sẻ thêm cách tạo Dropdow Menu cho những ai chưa biết và tạo cảm hứng cho những newbie.
Dành cho những newbie mới tập tành muốn tìm hiểu về code:
Vì nhu cầu sử dụng muốn tối giản tiện ích thanh menu trên trình duyệt web của mình, nên mình sẽ giới thiệu với mọi người cách làm thanh Dropdow Menu đơn giản và hiệu quả chỉ dùng CSS để style: Demo Dropdow Menu
* Đầu tiên mình tạo file HTML & CSS ở trong cùng một thư mục:
- Đầu tiên mình sẽ viết đoạn HTML như bình thường chỉ có mỗi thanh menu thui nhé:
<html>
<head>
<title>menudropdow</title>
<meta name="description" content="">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sản Phẩm</a>
<ul>
<li><a href="#">Máy Tính</a></li>
<li><a href="#">Điện Thoại</a></li>
<li><a href="#">Máy Ảnh</a></li>
</ul>
</li>
<li><a href="#">Tin Tức</a>
<ul>
<li><a href="#">Tin Quốc Tế</a></li>
<li><a href="#">Tin Nội Bộ</a></li>
</ul>
</li>
<li><a href="#">Giới Thiệu</a></li>
<li><a href="#">Liên Hệ</a></li>
</ul>
</div><!–end #container–>
</body>
</html>
~> xác định phương hướng mình sẽ phải làm những gì ở trong đầu để cho nó thành một thanh Dropdow Menu ví dụ như tạo đường viền quanh thanh menu, màu nền cho thanh menu, màu chữ, xổ xuống ở đâu…
– Và bây giờ mình sẽ style nó:
B1: đầu tiên bạn tạo một cái đường viền border với nét liền bao quoanh dòng menu mình muốn tạo, và thêm vào đó là thêm background cho mình có thể dễ thấy, sau đó mình style nó sang trái hết dùng lệnh float.
code:
#container{
border: 1px solid #333;
background:linear-gradient(#3380cb,#51a9ff);
float: left;
}
<mình dùng một chút CSS3 cho đẹp nhé>
B2: khi này mình sẽ thấy có những dầu chấm đầu dòng mình sẽ bỏ dấu chấm bằng lệnh list-style
#container ul{
float: left;
list-style: none;
}
B3: cấu hình thành hàng ngang và thuộc tính mẹ
#container ul li{
float: left;
position: relative;
}
B4: công việc tiếp theo khi thanh menu của mình đã thành hàng ngang là thêm những thuộc tính màu sắc, kiểu chữ… tùy mọi người nhé:
#container ul li a{
color: #fff;
font-weight: bold;
text-decoration: none;
padding: 10px;
display: block;
}
B5: điều chỉnh màu sắc và background khi mình hover qua:
#container ul li a:hover{
color: #fff;
background: #0055a8;
}
B6: mình sẽ ẩn những thuộc tính con cho nó không show ra mặc định nữa
#container li ul{
position: absolute;
display: none;
width: 7em;
}
B7: làm cho nó hiện ra khi mình hover qua
#container li:hover ul{
display: block;
}
B8: Hoàn thiện và làm đẹp cho thanh menu của mình nữa thôi
#container ul li ul li{
width: 100%;
background: linear-gradient(#3380cb,#51a9ff);
}
Các Bạn có thể down bản hoàn thiện Dropdow Menu ở đây
Ở đây mình chia ra thành nhiều bước cho mọi người dễ hiểu thôi nhé.
Mong rằng qua đây sẽ có nhiều người chở nên thích thú với môn code này.
Nguồn : Read more: http://hocthietkeweb.org/lam-sao-de-hoc-phphoc-lap-trinh-php-hoc-lap-trinh-web-hieu-qua-nhat/#ixzz3CziMOOfe
Đăng nhận xét