Share code tạo menu hữu ích cho website sử dụng wordpress, menu desktop và menu mobile luôn nhé
Float Menu dành cho mobile giống plugin maxlead của Novaon, Menu dành cho mobile và giao diện pc bao gồm biểu tượng messenger, chat zalo, gửi mail, gọi trực tiếp, địa chỉ, nhắn tin sms.
Float Menu dành cho giao diện mobile
Html – Float Menu dành cho mobile
<div class="bottom-contact"> <ul><li><a id="chatfb" class="chatfb conversion" href="https://m.me/ory.vn"> <img class="chatfb conversion lazyloading" src="https://file.ory.vn/iconfooter/widget_m_icon_messenger.svg" data-was-processed="true"> <br> <span class="chatfb conversion">Messenger</span> </a></li> <li><a id="chatzalo" class="chatzalo conversion" href="https://zalo.me/0907195339"> <img class="chatzalo conversion lazyloading" src="https://file.ory.vn/iconfooter/widget_m_icon_zalo.svg" data-was-processed="true"> <br> <span class="chatzalo conversion">Chat zalo</span> </a></li> <li><a id="goidien" class="goidien conversion" href="tel:0907195339"> <img class="goidien conversion lazyloading" src="https://file.ory.vn/iconfooter/widget_m_icon_click_to_call.svg" data-was-processed="true"> <br> <span class="goidien conversion">Gọi điện</span> </a></li> <li><a id="nhantin" class="nhantin conversion" href="sms:0907195339"> <img class="nhantin conversion lazyloading" src="https://file.ory.vn/iconfooter/widget_m_icon_contact_form.svg" data-was-processed="true"> <br> <span class="nhantin conversion">Nhắn tin</span> </a></li> <li><a id="chatfb" class="chatfb conversion" href="https://g.page/orymedia?share"> <img class="mapgg conversion lazyloading" src="https://file.ory.vn/iconfooter/widget_m_icon_map.svg" data-was-processed="true"> <br> <span class="chatfb conversion">Địa Chỉ</span> </a></li></ul> </div>
Css – Float Menu dành cho mobile
/* bottom contact 4icon */ .bottom-contact { display: none; } @media (max-width: 549px){ .floating-btn-contact { display: none; } .bottom-contact { display: block; position: fixed; bottom: 0; background: white; width: 100%; z-index: 99; box-shadow: 2px 1px 9px #dedede; border-top: 1px solid #eaeaea; } .bottom-contact ul li { width: 20%; float: left; list-style: none; text-align: center; font-size: 9.07px; }.bottom-contact ul li img { width: 35px; margin-top: 10px; margin-bottom: 0; }.bottom-contact ul li span { color: black; }.absolute-footer.light.medium-text-center.text-center { margin-bottom: 66px; } } /* bottom contact 4icon */
Float Menu dành cho giao diện máy tính
Html – Float Menu dành cho máy tính
<div class="menu-floatleft"><div id="toggle_social"><ul><li><a href="https://g.page/orymedia?share" target="blank"><img src="https://file.ory.vn/iconfooter/des_icon_map.svg" alt="icon right"><p class="toggle_social-des">Địa Chỉ</p></a></li><li><a href="sms:0907195339"><img src="https://file.ory.vn/iconfooter/des_icon_contact_form.svg" alt="Icon right"><p class="toggle_social-des">Nhắn tin</p></a></li><li><a href="tel:0907195339"><img src="https://file.ory.vn/iconfooter/des_icon_click_to_call.svg" alt="Icon right "><p class="toggle_social-des tuvan">Gọi Điện</p></a></li><li><a href="https://zalo.me/0907195339" target="blank"><img src="https://file.ory.vn/iconfooter/des_icon_zalo.svg" alt="icon right"><p class="toggle_social-des">Zalo</p></a></li><li><a href="https://m.me/ory.vn" target="blank"><img src="https://file.ory.vn/iconfooter/des_icon_messenger.svg" alt="icon right"><p class="toggle_social-des">Messenger</p></a></li></ul></div></div>
Css – Float Menu dành cho máy tính
/* left pc contact 4icon */ @media only screen and (max-width: 48em) {.menu-floatleft { display: none; }} .menu-floatleft { width: 100px;position: fixed; top: 35%; left: -30px; z-index: 99999 } .menu-floatleft #toggle_social { position: absolute; right: 0px; } .menu-floatleft ul { padding: 0; } .menu-floatleft #toggle_social ul li { position: relative; border-radius: 3px; list-style: none; margin-bottom: 1.5em; } .menu-floatleft #toggle_social ul li img { border-radius: 5px; width: 46px; height: 46px; margin: 5px; background-size: 100%; border: 2px solid #fff; border-radius: 50%; } .menu-floatleft #toggle_social ul li .toggle_social-des { font-size: 10px; text-align: center; font-weight: 700; color: #d22866; position: absolute; width: 90%; left: 5%; margin-bottom: 0; } .menu-floatleft #back_to_top { border: 1px solid #fff; width: 57px; height: 57px; background: #F7C15F; border-radius: 5px; } .menu-floatleft #back_to_top a { display: block; text-align: center; color: rgb(255, 255, 255); width: 100%; height: 100%; font-size: 26px; } .menu-floatleft .click-toggle_social { width: 30px; height: 30px; color: rgb(255, 255, 255); font-size: 24px; display: -webkit-flex; align-items: center; justify-content: center; position: absolute; right: 0px; top: -40px; background: rgb(255, 204, 76); border-radius: 5px; transition: all 1s ease; }.menu-floatleft #toggle_social { position: absolute; right: 0px; } .menu-floatleft ul { padding: 0; } .mobile-hotline { display: none; } .menu-floatleft .click-toggle_social { width: 30px; height: 30px; color: rgb(255, 255, 255); font-size: 24px; display: -webkit-flex; align-items: center; justify-content: center; position: absolute; right: 0px; top: -40px; background: rgb(255, 204, 76); border-radius: 5px; transition: all 1s ease; } /* left pc contact 4icon */
Bài viết liên quan :
Kích hoạt Chứng chỉ số SSL trỏ DNS xác thực CNAME nếu mail lỗi
Tour Ninh Bình Tràng An Chất Lượng Rẻ Ăn Trưa Buffet
Tour Ninh Bình Hạ Long 3 Ngày 2 Đêm Một Hành Trình Tuyệt Vời
Tham Quan Chương Trình Tour Hà Nội Ninh Bình 1 Ngày Mới Nhất 2023
Địa chỉ uy tín chuyên làm hộp giấy theo yêu cầu khách hàng
Dịch vụ in túi giấy chất lượng cao tại xưởng in Việt Cường