NTM Solutions

Chủ Nhật, 22 tháng 4, 2018

Tự học CSS - Bài 27 - Menu điều hướng

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>
Sau đó bỏ dấu bullet và định dạng:
ul {
    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ộc tí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;
    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;
}

3.    Thiết lập mục active

Ví dụ:
.active {
    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;
}

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 */
}

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;
}
Thêm lớp active:
.active {
    background-color
: #4CAF50;
}
Đính thanh menu ngang trên vị trí top:
ul {
    position
: fixed;
    top
: 0;
    width
: 100%;
}
Nếu muốn đính dưới vị trí bottom:
ul {
    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;
}

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:

Nguồn: Lớp học vi tính .COM