Hướng dẫn thiết kế menu html

Menu ngang là một phần không thể thiếu trong các website tin tức, bán hàng. Vậy cách làm nó như thế nào trong nội dung bài này tôi sẽ hướng dẫn bạn từng bước.

Nội dung chính Show

Ý tưởng
Tạo menu dọc cơ bản
Tạo menu dọc có đổ xuống (dropdown)

Ý tưởng

Trước hết bạn cần xác định cấu trúc html của menu nang một cấp. Các phần tử menu có tính chất giống nhau chính vì vậy bạn nên sử dụng cấu trúc ul li. #wrapper chính là div bao quanh toàn bộ thân website.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Menu ngang 1 cấp</title>
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <ul id="main-menu">
                <li><a href="">HTML CSS</a></li>
                <li><a href="">PHP MASTER</a></li>
                <li><a href="">BOOTSTRAP AZ</a></li>
                <li><a href="">JQUERY</a></li>
                <li><a href="">RESPONSIVE</a></li>
            </ul>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
</body>
</html>

Trước hết bây giờ chúng ta cần thực hiện reset lại css. Đây là bước hủy bỏ những thiết lập mặt định lên các đối tượng html để dễ dàng định dạng hiển thị theo ý mình.

*{
    margin: 0px;
    padding: 0px;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}

Chúng ta sẽ tạo phân thân website căn giữa và có độ rộng 960px

#wrapper{
    width: 960px;
    margin: 0px auto;
}

Để thiết lập các phần tử của menu nằm ngang chúng ta thiết lập d

*{
    margin: 0px;
    padding: 0px;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}

0 cho

*{
    margin: 0px;
    padding: 0px;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}

ul#main-menu{
    display: flex;
    background: orange;
}

Tiếp tục định dạng cho thẻ a của từng menu

ul#main-menu a{
    padding: 5px 10px;
    display: block;
    color: #ffffff;
}

Sau khi hoàn thành bước trên ta có được kết quả như bên dưới

Bây giờ chúng ta sẽ làm thiết lập hiệu ứng khi hover vào menu.

ul#main-menu li:hover a{
    color: #4f4242;
}

Bên dưới là hết quả sau khi hover

Bên dưới là nội dung file

*{
    margin: 0px;
    padding: 0px;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}

*{
    margin: 0px;
    padding: 0px;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}

#wrapper{
    width: 960px;
    margin: 0px auto;
}

ul#main-menu{
    display: flex;
    background: orange;
}

ul#main-menu a{
    padding: 5px 10px;
    display: block;
    color: #ffffff;
}

ul#main-menu li:hover a{
    color: #4f4242;
}

#content {
    padding: 20px 0px;
}

Kết luận

Vậy chúng ta đã xây dựng được menu ngang 1 cấp bằng html css vô cùng nhanh chóng. Bây giờ bạn hoàn toàn có thể dựa vào ý tưởng này để thay đổi màu sắc, background, font chữ để có được menu đúng theo nhu cầu của mình. Trong một bài viết khác tôi sẽ tiếp tục hướng dẫn bạn xây dựng menu ngang đa cấp.

Mặc dù menu ngang vẫn được sử dụng nhiều hơn nhưng bên cạnh đó mình biết có rất nhiều bạn vẫn muốn làm các menu hiển thị kiểu dọc. Nên ở bài này mình sẽ hướng dẫn qua cho các bạn một kỹ thuật để tạo menu dọc đơn giản nhưng vẫn đẹp mắt.

Về cách tạo menu dọc thì chúng ta có thể làm giống như tạo menu ngang, đó là tạo một cái danh sách với <ul> rồi xóa list-style-type cho các thẻ <li> bên trong là được chứ không cần làm nhiều bước như khi làm menu ngang.

Ban đầu mình sẽ có một danh sách menu như sau:

[html]
<div id="menu">
<ul>
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Tin tức</a></li>
<li><a href="#">Sản phẩm</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>
</div>
[/html]

Trước tiên là thêm CSS cho



#menu li {

  width: auto;

  height: 40px;

  line-height: 40px;

  border-bottom: 1px solid #e8e8e8;

  padding: 0 1em;

}

0 để thêm màu nền này nọ một xíu cho đẹp, và nhất là bỏ đi mấy cái dấu chấm đầu dòng của danh sách..



#menu ul {

  background: #8AD385;

  width: 250px;

  padding: 0;

  list-style-type: none;

  text-align: left;

}

Sau đó viết CSS cho các thẻ <li> để thêm chiều cao cho nó với



#menu li {

  width: auto;

  height: 40px;

  line-height: 40px;

  border-bottom: 1px solid #e8e8e8;

  padding: 0 1em;

}

2 và thêm



#menu li {

  width: auto;

  height: 40px;

  line-height: 40px;

  border-bottom: 1px solid #e8e8e8;

  padding: 0 1em;

}

3 bằng với chiều cao để nó đứng giữa block.



#menu li {

  width: auto;

  height: 40px;

  line-height: 40px;

  border-bottom: 1px solid #e8e8e8;

  padding: 0 1em;

}

Cuối cùng là viết CSS cho thẻ a bên trong menu, chuyển nó qua thành block và thêm các style cần thiết, đồng thời tạo thêm hiệu ứng background khác khi rê chuột vào mục menu.



#menu li a {

  text-decoration: none;

  color: #333;

  font-weight: bold;

  display: block;

}

#menu li:hover {

  background: #CDE2CD;

}

Kết quả ta có thế này:

[codepen id=”myNbod”]

Để tránh việc sử dụng đến jQuery trong serie CSS cơ bản này nên mình sẽ hướng dẫn bạn làm một menu dọc có đổ xuống nhưng không có hiệu ứng mà là nó sẽ xổ ra bên phải của menu mẹ khi rê chuột vào.

Bây giờ bạn hãy làm lại cái menu đơn giản phía trên và bổ sung các menu con vào như thế này:

[html highlight=”4-10″]
<div id="menu">
<ul>
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Tin tức</a>
<ul class="sub-menu">
<li><a href="#">WordPress</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</li>
<li><a href="#">Sản phẩm</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>
</div>
[/html]

Và sử dụng lại CSS ở phần trên:

body {

 font-family: sans-serif;

 font-size: 15px;

}

#menu ul {

 background: #8AD385;

 width: 250px;

 padding: 0;

 list-style-type: none;

 text-align: left;

}

#menu li {

 width: auto;

 height: 40px;

 line-height: 40px;

 border-bottom: 1px solid #e8e8e8;

 padding: 0 1em;

}

#menu li a {

 text-decoration: none;

 color: #333;

 font-weight: bold;

 display: block;

}

#menu li:hover {

 background: #CDE2CD;

}

Bây giờ bạn có thể thấy các menu con trong mục Tin tức bị lỗi hiển thị, nên chúng ta sẽ viết thêm CSS cho nó như sau.

Trước tiên là bạn hãy đưa thằng



#menu li {

  width: auto;

  height: 40px;

  line-height: 40px;

  border-bottom: 1px solid #e8e8e8;

  padding: 0 1em;

}

4 về hiển thị kiểu



#menu li {

  width: auto;

  height: 40px;

  line-height: 40px;

  border-bottom: 1px solid #e8e8e8;

  padding: 0 1em;

}



#menu ul li {

 position: relative;

}

Và chuyển



#menu li {

  width: auto;

  height: 40px;

  line-height: 40px;

  border-bottom: 1px solid #e8e8e8;

  padding: 0 1em;

}

6 (menu cấp 2) về dạng



#menu li {

  width: auto;

  height: 40px;

  line-height: 40px;

  border-bottom: 1px solid #e8e8e8;

  padding: 0 1em;

}

7 rồi chỉnh vị trí hiển thị của nó thụt sang bên phải là 250px (bằng với chiều rộng menu), đồng thời đưa nó về sát mép top của phần tử mẹ.



#menu .sub-menu {

 position: absolute;

 left: 250px;

 top: 0;

}

Kết quả là bây giờ nó đã thụt qua một bên rồi.

Ảnh này chưa có thuộc tính top: 0

Bây giờ chỉ cần viết thêm CSS để



#menu li {

  width: auto;

  height: 40px;

  line-height: 40px;

  border-bottom: 1px solid #e8e8e8;

  padding: 0 1em;

}

8 ẩn đi và hiện ra khi rê chuột vào



#menu li {

  width: auto;

  height: 40px;

  line-height: 40px;

  border-bottom: 1px solid #e8e8e8;

  padding: 0 1em;

}

4 có chứa



#menu li {

  width: auto;

  height: 40px;

  line-height: 40px;

  border-bottom: 1px solid #e8e8e8;

  padding: 0 1em;

}

8 nhé.



#menu .sub-menu {

 position: absolute;

 left: 250px;

 top: 0;

 display: none;

}

#menu li:hover .sub-menu {

 display: block;

}

Kết quả như dưới.

[codepen id=”emqYjx”]

Đẹp chưa nè? Và mình xin nói thêm là đó chỉ là một menu đơn giản thôi nhưng bạn muốn làm các menu đẹp hơn thì phải rõ cách làm một menu đơn giản như vậy, rồi sau này bạn có thể tham khảo thêm một số tutorial trên mạng để làm theo.