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 :
Làm thế nào để sử dụng Google Free SMTP Server
Share chia sẻ code web themes cửa hàng DTDD giống thegioididong
Nhúng chat Facebook Messenger vào web
Plugin Woocommerce Product Filter – Plugin lọc sản phẩm cực kỳ chuyên nghiệp
Tăng Tốc Cực Nhanh Cho Website Với Công Nghệ LiteSpeed
Update menu cấp 3 cho menu của laptop 89
