Tạo menu phụ cố định cho web trên giao diện mobile

GroupMMO tháng 2 21, 2019

Chào các bạn, hiện nay trải nghiệm người dùng đang được những người làm website quan tâm. Mỗi người đều có những ý kiến khác nhau về trải nghiệm người dùng. Tuy nhiên, quan trọng nhất vẫn là sở thích của mỗi người. Ngày hôm nay mình sẽ hướng dẫn các bạn cách tạo menu phụ cố định cho web trên giao diện mobile.

Tạo menu phụ cố định cho web trên giao diện mobile

Ý tưởng

Chả là có người xem web thường xuyên thấy khó chịu về việc không tìm thấy menu nó ở chỗ mô. Rồi thì là và mà tại sao không làm cho cái menu nó fix luôn ở trên đi bla bla bla. Vấn đề là làm vậy nó sẽ che mất một ít nội dung và nhìn cũng không đẹp lắm. Tuy nhiên có người lại thích như vậy nên mình sẽ hướng dẫn các bạn một cách làm cực kỳ đơn giản. Các bạn có thể dùng để hiển thị menu hay thông tin liên hệ đều được. Đặc biệt, cách này có thể áp dụng cho blogspot hay wordpress đều ok và rất nhẹ nhàng không làm web bị năng khi tải trang.

Code tạo menu phụ cố định cho web trên giao diện mobile

Code HTML

<div class="fixmenu">
<input type="button" id="btn1" value="Menu" style="width: 25%; height: 50px;"/>
<div id="menudichvu" class="an">
<a class="dichvu" href="#">Dịch vụ 1</a>
<a class="dichvu" href="#">Dịch vụ 2</a>
<a class="dichvu" href="#">Dịch vụ 3</a>
<a class="dichvu" href="#">Dịch vụ 4</a>
<a class="dichvu" href="#">Dịch vụ 5</a>
<a class="dichvu" href="#">Dịch vụ 6</a>
</div>
<script language="javascript">
var x = document.getElementById("menudichvu");
document.getElementById("btn1").onclick = function () {
if (x.className === "an") {
document.getElementById("menudichvu").style.display = 'block';
x.className ="hien";
} else {
document.getElementById("menudichvu").style.display = 'none';
x.className ="an";
}
};
</script>
</div>

Code CSS

#menudichvu {display:none;}
a.dichvu {display:block; background:#dedbdb;color: black;margin-bottom:2px;text-align:center;padding: 15px 5px 15px 5px;text-decoration:none}
a:hover.dichvu {background:#a3a3a3;color:white;}
#menudichvu {background-color:#63687a;min-height: 180px;}
.fixmenu {display:none;position: fixed;top: 15px;left: 0;width: 100%;z-index: 1000;}
#btn1 {margin-left: 79%;}
@media only screen and (max-width:800px) {
.fixmenu {display:block;}
}

Các bạn paste đoạn html vào trước thẻ </body>. Còn đoạn CSS các bạn chèn vào trong trước </b:skim> (đối với blogspot) hoặc chèn vào trong file style.css (đối với wordpress).

Chỉ vậy thôi là xong, có thể với các giao diện khác nhau nó sẽ bị xô lệch đi chút ít, các bạn sửa một chút kích thước trong CSS là được. Các bạn có thể chỉnh CSS cho đẹp hơn hoặc sử dụng nó như môt tiện ích khác trên website chứ không nhất thiết là phải dùng làm menu nhé. Đây là kết quả của mình: