Thủ Thuật về Cách tạo menu dọc trong WordPress 2022
Pro đang tìm kiếm từ khóa Cách tạo menu dọc trong WordPress được Cập Nhật vào lúc : 2022-12-15 11:08:08 . Với phương châm chia sẻ Kinh Nghiệm Hướng dẫn trong nội dung bài viết một cách Chi Tiết Mới Nhất. Nếu sau khi tìm hiểu thêm tài liệu vẫn ko hiểu thì hoàn toàn có thể lại phản hồi ở cuối bài để Admin lý giải và hướng dẫn lại nha.
Mặc dù menu ngang vẫn được sử dụng nhiều hơn nữa nhưng bên gần đó mình biết có thật nhiều bạn vẫn muốn làm những menu hiển thị kiểu dọc. Nên ở bài này mình sẽ hướng dẫn qua cho những bạn một kỹ thuật để tạo menu dọc đơn thuần và giản dị nhưng vẫn thích mắt.
Nội dung chính
- Tạo menu dọc cơ bản
- Tạo menu dọc có đổ xuống (dropdown)
Về cách tạo menu dọc thì toàn bộ chúng ta hoàn toàn có thể làm in như tạo menu ngang, đó là tạo một chiếc list với <ul>rồi xóa list-style-typecho những 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ó được một list 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 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 list..
#menu ul
background: #8AD385;
width: 250px;
padding: 0;
list-style-type: none;
text-align: left;
Sau đó viết CSS cho những thẻ <li>để thêm độ cao cho nó với heightvà thêm line-heightbằng với độ 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 những style thiết yếu, đồ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]
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òn 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 thuần và giản dị phía trên và tương hỗ update những menu con vào như vậy 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 toàn thân
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 hoàn toàn có thể thấy những menu con trong mục Tin tức bị lỗi hiển thị, nên toàn bộ 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 livề hiển thị kiểurelative.
#menu ul li
position: relative;
Và chuyển #menu .sub-menu(menu cấp 2) về dạng absoluterồ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 thành phần mẹ.
#menu .sub-menu
position: absolute;
left: 250px;
top: 0;
Kết quả là giờ đây nó đã thụt qua một bên rồi.
Ảnh này chưa tồn tại thuộc tính top: 0
Bây giờ chỉ việc 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é.
#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 thuần và giản dị thôi nhưng bạn muốn làm những menu đẹp hơn thì phải rõ cách làm một menu đơn thuần và giản dị như vậy, rồi sau này bạn hoàn toàn có thể tìm hiểu thêm thêm một số trong những tutorial trên mạng để tuân theo.
5/5 – (4 bầu chọn)Xem tiếp bài trong seriePhần trước: [Học CSS] Kỹ thuật tạo menu ngang cơ bảnPhần tiếp theo đó: [Học CSS] Thực hành tạo layout đơn giảncsscss cơ bảncss menuvideo hướng dẫn
Reply
5
0
Chia sẻ
Share Link Down Cách tạo menu dọc trong WordPress miễn phí
Bạn vừa Read tài liệu Với Một số hướng dẫn một cách rõ ràng hơn về Clip Cách tạo menu dọc trong WordPress tiên tiến và phát triển nhất và Share Link Down Cách tạo menu dọc trong WordPress Free.
Thảo Luận vướng mắc về Cách tạo menu dọc trong WordPress
Nếu sau khi đọc nội dung bài viết Cách tạo menu dọc trong WordPress vẫn chưa hiểu thì hoàn toàn có thể lại phản hồi ở cuối bài để Mình lý giải và hướng dẫn lại nha
#Cách #tạo #menu #dọc #trong #WordPress