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 :
Công ty sản xuất hộp giấy đựng thực phẩm giá tốt uy tín hàng đầu
Tour Du Lịch Quảng Ninh 2 Ngày 1 Đêm Tiết Kiệm Nhất
Cách tạo website bằng wordpress đơn giản cho người mới bắt đầu
Tham Quan Tour Du Lịch Chùa Hương, Khám Phá Các Địa Danh Nổi Tiếng
In Việt Cường in ấn tem nhãn giá rẻ Hà Nội chuyên nghiệp
Share chia sẻ code web themes cửa hàng DTDD giống thegioididong