Tạo Menu cuộn theo màn hình mà không cần plugin – Hướng dẫn tạo Float Menu tùy chỉnh đẹp cho website WordPress

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 */