Hướng dẫn tạo thanh menu liên hệ và tab wordpress có chức năng đóng mở

Một menu được thiết kế tốt có thể giúp cải thiện Trải nghiệm người dùng (UX) và thậm chí giảm tỷ lệ thoát trang của bạn . Tuy nhiên, nếu bạn tạo một menu không tốt có thể khiến hiệu quả trang giảm mạnh. Menu có thể chèn mẫu liên hệ khách hàng đến bạn.

WordPress cho phép bạn tạo các menu tùy chỉnh để phù hợp với nhu cầu của trang web của bạn. Bạn thậm chí có thể sử dụng các chức năng gốc để tạo một menu liên hệ nhỏ gọn giúp tiết kiệm không gian, trong khi vẫn cung cấp hướng rõ ràng cho khách truy cập của bạn.

Các bạn copy code này vào index hoặc nơi nào muốn hiển thị

<div class="tabbed-content dich-vu">
 
<ul class="nav nav-line nav-uppercase nav-size-normal">
<li class="tab active has-icon th1"><a href="#tab_tab-1"><div class="icone">
					<div class="icon-tabs">
						<img width="44" height="44" src="https://toicode.net/wp-content/uploads/2022/09/teeth.png" class="attachment-medium size-medium" alt="" loading="lazy">		
				</div><span>Bọc răng sứ</span></div></a></li>
<li class="tab has-icon th2"><a href="#tab_tab-2"><div class="icone">
					<div class="icon-tabs">
						<img width="44" height="44" src="https://toicode.net/wp-content/uploads/2022/09/dental-care.png" class="attachment-medium size-medium" alt="" loading="lazy">					
				</div><span>Cạo vôi răng</span></div></a></li>
<li class="tab has-icon th3"><a href="#tab_tab-3"><div class="icone">
					<div class="icon-tabs">
						<img width="44" height="44" src="https://toicode.net/wp-content/uploads/2022/09/003-dental-filling.png" class="attachment-medium size-medium" alt="" loading="lazy">					
				</div></i><span>Chữa tủy răng</span></div></a></li>
<li class="tab has-icon th4"><a href="#tab_tab-4"><div class="icone">
					<div class="icon-tabs">
						<img width="44" height="44" src="https://toicode.net/wp-content/uploads/2022/09/004-tooth.png" class="attachment-medium size-medium" alt="" loading="lazy">					
				</div></i><span>Nhổ răng khôn</span></div></a></li>
<li class="tab has-icon th5"><a href="#tab_tab-5"><div class="icone">
					<div class="icon-tabs">
						<img width="44" height="44" src="https://toicode.net/wp-content/uploads/2022/09/002-dental-implant.png" class="attachment-medium size-medium" alt="" loading="lazy">					
				</div></i><span>Ghép Implant</span></div></a></li>
<li class="tab has-icon th6"><a href="#tab_tab-6"><div class="icone">
					<div class="icon-tabs">
						<img width="44" height="44" src="https://toicode.net/wp-content/uploads/2022/09/2022/08/braces.png" class="attachment-medium size-medium" alt="" loading="lazy">					
				</div></i><span>Niềng Răng</span></div></a></li>
</ul>
<div class="tab-panels">
<div class="panel active entry-content" id="tab_tab-1">[block id="boc-rang-su"]</div>
<div class="panel entry-content" id="tab_tab-2">[block id="cao-voi"]</div>
<div class="panel entry-content" id="tab_tab-3">[block id="chua-tuy"]</div>
<div class="panel entry-content" id="tab_tab-4">[block id="nho-rang"]</div>
<div class="panel entry-content" id="tab_tab-5">[block id="ghep-im"]</div>
<div class="panel entry-content" id="tab_tab-6">[block id="nieng-rang"]</div>
</div></div>

Các bạn copy code dưới vào style.css

@media (max-width: 549px)
#logo img {
    max-height: 45px;
    opacity: 0;
    margin-right: 10px;
}
.logo a {
    background-image: url(http://toicode.net/spa/wp-content/uploads/2020/10/LOGO1MOBILE-copy.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    margin-right: 10px;
}
.logo a {
    text-decoration: none;
    display: block;
    color: #446084;
    font-size: 32px;
    text-transform: uppercase;
    font-weight: bolder;
    margin: 0;
}

Chúc các bạn thành công !!