Biến menu thường thành menu trượt tuyệt đẹp cho blogger với 3 bước đơn giản

Đôi lúc nhiều bạn không muốn thanh menu chính của mình  biến mất khi cuộn trang sâu hơn về bên dưới, có nghĩa là một thanh menu chính luôn hiện lên phía trên cho dù độc giả cuộn trang đến đâu chăng nữa. Điểm hay của cách này là có thể níu chân độc giả lâu hơn khi mà thanh menu đóng vai trò như một thành phần điều hướng quan trọng giúp độc giả có thêm những chọn lựa khác ngoài thông tin mà mình đang đọc 

Mình sẽ hướng dẫn cho các bạn cách tạo một menu trượt ( sticky menu) nhanh chóng chỉ với 3 bước sau đây

Menu truợt góp phần làm tăng sự điều hướng cho blogger

- Bước 1: Thêm đoạn code CSS dưới đây vào trước thẻ ]]></b:skin>

#navigation{height:50px;width:100%;max-width:1080px;position:relative;display:block;background:transparent}#navigation.fixed{position:fixed; top:-4px;z-index:100}

- Bước 2: Thêm đoạn code JS dưới đây vào trước thẻ </body> trong template

<script>function handleScroll(){if(window.XMLHttpRequest){var offset=window.pageYOffset?
window.pageYOffset:document.documentElement.scrollTop;document.getElementById(&#39;navigation&#39;).className=(offset&gt;104?
&#39;fixed&#39;:&#39;&#39;)}}if(window.addEventListener)
{window.addEventListener(&#39;scroll&#39;,handleScroll,false)}else{window.attachEvent(&#39;onscroll&#39;,handleScroll)} </script>

- Bước 3: Tìm đến đoạn code chứa menu của bạn và thêm đoạn code như sau:

<div id='navigation'> nội dung menu của bạn </div>

Đến đây thì gần như là các bạn đã hoàn thành tạo được một cái menu trượt tuỵet đẹp cho mình rồi. Các bạn save file html lại và xem thành quả của mình vừa tạo được nhé. CHúc các bạn tạo được thanh menu trượt thành công