Hướng dẫn tạo thanh Float menu bám sát lề cho website WordPress – Flatsome

Chào các bạn, lại một dự án thiết kế website cho khách hàng mình vừa mới hoàn thành, và mỗi dự án thiết kế website luôn cần một vài thủ thuật chỉnh sửa nho nhỏ để hoàn thiện theo mong muốn của khách.

Trong số đó phải kể đến các đoạn code HTML và CSS cực kỳ hữu dụng, ví dụ như thanh Float menu bám sát lề phải cho website. Bài viết này mình muốn chia sẻ với các bạn điều ấy!

Có thể hiểu đơn giản là mình làm một khối div gồm các biểu tượng và các liên kết bám dính ở viền trái của màn hình duyệt web. Mặc định khối đó sẽ ẩn đi chỉ hiện các icon mà thôi, nhưng khi mình rê chuột (hover) vào khối đó thì nó xổ ra hết toàn bộ các thông tin và liên kết khác.

Để có thể chèn thanh Float menu bạn làm theo hướng dẫn sau

Bước 1: Copy code HTML và CSS vào cuối file footer.php ( hoặc chèn vào function rồi add vào hook footer )

<style>

.box_fixRight {

position: fixed;

top: 150px;

right: -140px;

width: auto;

transition: all 0.2s ease-in-out 0s;

z-index: 999;

}

.box_fixRight .box_content {

background: #fff;

padding: 10px;

box-shadow: 10px 0px 30px #888888;

border-radius: 10px 0 0 10px;

}

.box_fixRight .box_content .item {

display: block;

padding: 13px 10px 13px 47px;

color: #111;

}

.box_fixRight .box_content .item:hover{color:#184b9b}

.box_fixRight .box_content .item.item_1 {

background: url(/wp-content/uploads/2019/03/iconfix-1.png) no-repeat left;

}

.box_fixRight .box_content .item.item_2 {

background: url(/wp-content/uploads/2019/03/iconfix-2.png) no-repeat left;

}

.box_fixRight .box_content .item.item_3 {

background: url(/wp-content/uploads/2019/03/iconfix-3.png) no-repeat left;

}

.box_fixRight:hover {

right: 0;

transition: all 0.2s ease-in-out 0s;

}

@media (max-width: 549px){

.box_fixRight{display:none}

}

</style>

<div class=“box_fixRight”>

<div class=“box_content”>

<a href=“/khoa-hoc/” class=“item item_1”>Lịch khai giảng</a>

<a href=“/lien-he/” class=“item item_2”>Liên hệ</a>

<a href=“#dang-ky” class=“item item_3”>Đăng ký học thử</a>

</div>

</div>