Trang chủ Web DevelopmentHTML/CSS [Học CSS] Kỹ thuật tạo menu dọc cơ bản

[Học CSS] Kỹ thuật tạo menu dọc cơ bản

bởi Thạch Phạm
15 bình luận 11971 views
Khuyến mãi hosting

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.

Tạo menu dọc cơ bản

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

<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>

Trước tiên là thêm CSS cho #menu ul để 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 height và thêm line-height 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:

Tạo menu dọc có đổ xuống (dropdown)

Để 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:

<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>

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 về hiển thị kiểurelative.

#menu ul li {
 position: relative;
}

Và chuyển #menu .sub-menu (menu cấp 2) về dạng absolute 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.

menu-doc-co-ban-02

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

Bây giờ chỉ cần viết thêm CSS để .sub-menu ẩn đi và hiện ra khi rê chuột vào #menu li có chứa .sub-menu 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.

Đẹ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.

15 bình luận

Có thể bạn quan tâm

0 0 vote
Article Rating
guest
15 Comments
mới nhất
cũ nhất đánh giá nhiều
Inline Feedbacks
View all comments

[…] Kỹ thuật tạo menu dọc cơ bản […]

Hùng

Mình muốn cho menu cha nằm ở bên phải và menu con nằm ở bên trái menu cha thì làm như thế nào ạ.
Xin cảm ơn

Tuấn Quân

Hay quá Anh Trai Ơi!!!

thằng học code dạo

bạn cho mình hỏi là dùng cách nào thì khi kích chuột vào nó hiện ra nhưng k đóng lại cho đến khi mình kích vào cái khác( mình đã thử với active)

Trường Vũ

Anh Thạch Phạm chỉ em cách để menu con nó ko bị mất khi rê chuột vào

Phát

em vô trang web thegioididong.com em thấy menu của trang đó có ba gạch. vậy đó là loại menu gì anh?

thằng học code dạo

menu thường thôi bạn có j lạ đâu chỉ là cái ảnh thay vì button

Ngọc Anh

Anh Thạch Phạm chỉ em cách để canh khoảng thời gian khi hover vào menu thì hiện ra từ từ được không ạ???

thằng học code dạo

submenu hiện ra từ từ k đc hả :v

Bông

bạn viết bằng gì vậy ạ

Nguyễn Trọng Khôi

giờ mình ko muốn nó nằm bên phải mà hiện ra dưới dạng thư mục cha con thì sao bạn

Tuấn

Cách viết tắt ở đầu video của anh có phải phần mềm nào viết css đều có thể áp dụng không ạ?

15
0
Would love your thoughts, please comment.x
()
x