Quay về MỤC LỤC TỰ HỌC CSS
1. Menu điều hướng là 01 danh sách các liên kết
Ví dụ:
Ban đầu, ta tạo danh sách các liên kết:
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Sau đó bỏ dấu bullet và định dạng:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
list-style-type: none;
margin: 0;
padding: 0;
}
Nếu muốn hiển thị menu nằm ngang
ta có 02 cách thiết lập với li:
li { float: left; }
Cách này các bạn nhớ khống chế thẻ
div tiếp theo bằng thuộc tính clear ( xem lại bài Tự học CSS - Bài 20 - Thuộctính float và clear).
Hoặc cũng có thể thiết lập như sau
với thẻ li:
li { display: inline; }
Mấy phần “râu ria” như tô màu nền, bỏ gạch dưới trong liên kết,
hiệu ứng hover,… các bạn tự mày mò xem sao.
2. Thanh menu nằm dọc
Ví dụ:
li a {
display: block;
width: 60px;
display: block;
width: 60px;
background-color: #dddddd;
}
}
và sau đây là toàn bộ code thanh menu dọc sau khi đã “trang
trí”:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
3. Thiết lập mục active
Ví dụ:
.active {
background-color: #4CAF50;
color: white;
}
background-color: #4CAF50;
color: white;
}
4. Canh giữa các liên kết và thêm đường viền:
Ví dụ:
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
5. Tạo thanh menu dọc tràn hết chiều cao màn hình và “đính lại” không chạy theo khi cuộn trang
Ví dụ:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
6. Tạo thanh menu ngang tràn hết chiều ngang màn hình
Ví dụ:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
Thêm lớp active:
.active {
background-color: #4CAF50;
}
background-color: #4CAF50;
}
Đính thanh menu ngang trên vị trí
top:
ul {
position: fixed;
top: 0;
width: 100%;
}
position: fixed;
top: 0;
width: 100%;
}
Nếu muốn đính dưới vị trí bottom:
ul {
position: fixed;
bottom: 0;
width: 100%;
}
position: fixed;
bottom: 0;
width: 100%;
}
Cuộn màn hình rồi mới đính thanh
menu (sticky)
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
7. Tạo menu nhiều cấp
Ví dụ: tạo menu xổ xuống (dropdown) 01 cấp)
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type:
none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:
#333;
}
li {
float: left;
}
li a, .dropbtn {
display:
inline-block;
color: white;
text-align:
center;
padding: 14px
16px;
text-decoration:
none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color:
red;
}
li.dropdown {
display:
inline-block;
}
.dropdown-content {
display: none;
position:
absolute;
background-color:
#f9f9f9;
min-width: 160px;
box-shadow: 0px
8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px
16px;
text-decoration:
none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a
href="#home">Home</a></li>
<li><a
href="#news">News</a></li>
<li
class="dropdown">
<a
href="javascript:void(0)"
class="dropbtn">Dropdown</a>
<div
class="dropdown-content">
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a
href="#">Link 3</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the
dropdown menu.</p>
</body></html>
8. Responsive topnav
Ví dụ: tạo thanh menu responsive (hiển thị đa thiết bị) ở vị
trí topnav
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
body {margin: 0;}
ul.topnav {
list-style-type:
none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:
#333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align:
center;
padding: 14px
16px;
text-decoration:
none;
}
ul.topnav li a:hover:not(.active) {background-color: #111;}
ul.topnav li a.active {background-color: #4CAF50;}
ul.topnav li.right {float: right;}
@media screen and (max-width: 600px){
ul.topnav
li.right,
ul.topnav li
{float: none;}
}
</style>
</head>
<body>
<ul class="topnav">
<li><a
class="active" href="#home">Home</a></li>
<li><a
href="#news">News</a></li>
<li><a
href="#contact">Contact</a></li>
<li
class="right"><a
href="#about">About</a></li>
</ul>
<div style="padding:0 16px;">
<h2>Responsive
Topnav Example</h2>
<p>This
example use media queries to stack the topnav vertically when the screen size
is 600px or less.</p>
<p>You will
learn more about media queries and responsive web design later in our CSS
Tutorial.</p>
<h4>Resize the
browser window to see the effect.</h4>
</div>
</body>
</html>
9. Responsive menu ngang
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}
ul.sidenav {
list-style-type:
none;
margin: 0;
padding: 0;
width: 25%;
background-color:
#f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
ul.sidenav li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration:
none;
}
ul.sidenav li a.active {
background-color:
#4CAF50;
color: white;
}
ul.sidenav li a:hover:not(.active) {
background-color:
#555;
color: white;
}
div.content {
margin-left: 25%;
padding: 1px 16px;
height: 1000px;
}
@media screen and (max-width: 900px) {
ul.sidenav {
width: 100%;
height: auto;
position:
relative;
}
ul.sidenav li a {
float: left;
padding: 15px;
}
div.content
{margin-left: 0;}
}
@media screen and (max-width: 400px) {
ul.sidenav li a {
text-align:
center;
float: none;
}
}
</style>
</head>
<body>
<ul class="sidenav">
<li><a
class="active" href="#home">Home</a></li>
<li><a
href="#news">News</a></li>
<li><a
href="#contact">Contact</a></li>
<li><a
href="#about">About</a></li>
</ul>
<div class="content">
<h2>Responsive
Sidenav Example</h2>
<p>This
example use media queries to transform the sidenav to a top navigation bar when
the screen size is 900px or less.</p>
<p>We have
also added a media query for screens that are 400px or less, which will
vertically stack and center the navigation links.</p>
<p>You will
learn more about media queries and responsive web design later in our CSS
Tutorial.</p>
<h3>Resize the
browser window to see the effect.</h3>
</div>
</body>
</html>
Nếu vẫn chưa rõ các bạn xem video clip sau:
Tác giả: #drM
Nguồn: Sưu Tầm
Nguồn: Sưu Tầm
Không có nhận xét nào:
Đăng nhận xét