cách tạo menu xổ dọc trong html là một trong những từ khóa được search nhiều nhất về chủ đề 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-typecho 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<divid="menu"><ul><li><ahref="#">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 ulbackground:#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
heightvà thêmline-heightbằng với chiều cao để nó đứng giữa block.01020304050607#menu liwidth:tự động;height:40px;line-height:40px;border-bottom:1pxsolid#e8e8e8;padding:01em;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 atext-decoration:none;color:#333;font-weight:bold;display:block;#menu li:hoverbackground:#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<divid="menu"><ul><li><ahref="#">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:
010203040506070809101112131415161718192021222324252627bodyfont-family:sans-serif;font-size:15px;#menu ulbackground:#8AD385;width:250px;padding:0;list-style-type:none;text-align:left;#menu liwidth:auto;height:40px;line-height:40px;border-bottom:1pxsolid#e8e8e8;padding:01em;#menu li atext-decoration:none;color:#333;font-weight:bold;display:block;#menu li:hoverbackground:#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 livề hiển thị kiểurelative.010203#menu ul liposition:relative;Và chuyển
#menu .sub-menu(menu cấp 2) về dạngabsoluterồ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-menuposition: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
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 licó chứa.sub-menunhé.010203040506070809#menu .sub-menuposition:absolute;left:250px;top:0;display:none;#menu li:hover .sub-menudisplay:block;kết quả giống như dưới.
xinh chưa nè? 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.
Nguồn : https://thachpham.com
