Menu xổ dọc là một trong những menu hay được mọi người sử dụng khi làm website ưu điểm nó sẽ ít chiếm diện tích của trang. Để biết cách tạo menu xổ dọc trong HTML thì cũng khá là đơn giản các bạn có thể làm theo hướng dẫn của bài viết này để biết được cách tạo menu xổ dọc trong HTML. Trong bài viết này, lamweb.vn sẽ viết bài viết Cách tạo menu xổ dọc trong html mới nhất 2020.
Cách tạo menu xổ dọc trong html mới nhất 2020
Mặc dù menu ngang vẫn được dùng nhiều hơn nhưng ngoài ra mình biết có rất nhiều bạn vẫn mong muốn làm các menu hiển thị kiểu dọc. Nên ở bài này mình sẽ tut qua cho các bạn một kỹ thuật để tạo thực đơn dọc không khó khăn nhưng luôn luôn đẹp đẽ.
Về mẹo tạo thực đơn dọc thì chúng ta có thể làm như tạo menu ngang, đó là tạo một cái danh mục với
- Rồi xóa
list-style-type
cho các thẻ - Bên trong là được chứ không cần làm nhiều bước giống như khi sử dụng thực đơn ngang.
Tạo menu dọc cơ bản
Ban đầu mình sẽ có một danh sách menu như sau:
0102030405060708<
div
id
=
"menu"
>
<
ul
>
<
li
><
a
href
=
"#"
>Trang chủa>li>
<li><a href="#">Tin tứca>li>
<li><a href="#">Sản phẩma>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 định dạng của danh sách..01020304050607#menu ul
background
:
#8AD385
;
width
:
250px
;
padding
:
0
;
list-style-type
:
none
;
text-align
:
left
;
Sau đó viết CSS cho các thẻ
- Để thêm chiều cao cho nó với
height
và thêmline-height
bằng với chiều cao để nó đứng giữa block.01020304050607#menu li
width
:
tự động
;
height
:
40px
;
line-height
:
40px
;
border-bottom
:
1px
solid
#e8e8e8
;
padding
:
0
1em
;
Cuối cùng là vạch CSS cho thẻ a bên trong thực đơn, chuyển nó qua thành block và thêm các phong cách quan trọng, cùng lúc tạo thêm hiệu ứng background khác khi rê chuột vào mục menu.
010203040506070809#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 thực đơn 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ẽ tut bạn làm một thực đơn dọc có đổ xuống nhưng k có hiệu ứng mà là nó sẽ xổ ra bên phải của menu mẹ khi rê chuột vào.
Ngày nay bạn hãy sử dụng lại cái thực đơn dễ dàng phía trên và bổ sung các menu con vào như thế này:
0102030405060708091011121314<
div
id
=
"menu"
>
<
ul
>
<
li
><
a
href
=
"#"
>Trang chủa>li>
<li><a href="#">Tin tứca>
<ul class="sub-menu">
<li><a href="#">WordPressa>li>
<li><a href="#"><a href="https://thachpham.com/category/seo" data-wpel-link="internal">SEOa>a>li>
<li><a href="#">Hostinga>li>
ul>
li>
<li><a href="#">Sản phẩma>li>
<li><a href="#">Liên hệa>li>
ul>
div>
Và sử dụng lại CSS ở phần trên:
010203040506070809101112131415161718192021222324252627body
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 đủ sức thấy các thực đơn con trong mục Tin tức bị lỗi hiển thị, nên chúng ta sẽ vạch thêm CSS cho nó giống như sau.
Trước nhất là bạn hãy mang thằng
#menu li
về hiển thị kiểurelative
.010203#menu ul li
position
:
relative
;
Và chuyển
#menu .sub-menu
(menu cấp 2) về dạngabsolute
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), cùng lúc mang nó về sát mép top của phần tử mẹ.0102030405#menu .sub-menu
position
:
absolute
;
left
:
250px
;
top
:
0
;
Hiệu quả là bây giờ nó vừa mới thụt qua một bên rồi.
-
Ảnh này chưa có thuộc tính top: 0
>>> Hướng dẫn cách tạo menu bán hàng trong word đơn giản nhất 2020
Hiện nay 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é.010203040506070809#menu .sub-menu
position
:
absolute
;
left
:
250px
;
top
:
0
;
display
:
none
;
#menu li:hover .sub-menu
display
:
block
;
Và mình xin nói thêm là đó chỉ là một thực đơn dễ dàng thôi nhưng bạn muốn làm các menu đẹp hơn thì phải rõ phương pháp sử dụng một menu đơn giản giống như vậy, rồi sau này bạn đủ sức xem qua thêm một số tutorial trên mạng để sử dụng theo.
Xem thêm: Hướng dẫn cách làm menu thực đơn sáng tạo nhất 2020
Nguồn : https://thachpham.com