Tạo thanh menu ngang cố định (STICKY MENU) cho blogger

Menu là một công cụ không thể thiếu đối với các trang web, blog chuyên nghiệp. Nhưng khi ta cuộn trang, thanh menu thường biến mất - bị "chui" vào thanh điều khiển của trình duyệt. Tình trạng này gây khó khăn cho người truy cập.

Giải pháp tối ưu để giải quyết là: Trang bị cho web, blog một thanh menu cố định (sticky menu).

Hướng dẫn :


1. Đăng nhập vào blog:

- Vào chỉnh sửa HTML


- Chèn đoạn code trong khung dưới đây vào trước thẻ đóng ]]></b:skin>

/* START STICKY NAV BAR */
sticknav {
background: #ffffff;
height: 30px;
width: 100%;
margin-right: 0px;
margin-left: 0px;
left: 0px;
right: 0px;
position: relative;
z-index: 9999;
}
.fixed { position:fixed;}
/* END STICKY NAV BAR */

2. Tìm đến phần code thanh menu của bạn.

- Sau khi tìm được chúng ta thêm thẻ <sticknav> vào trước thanh menu cần cố định và </sticknav> vào sau thanh menu cần cố định.

3. Thêm javascript cho thanh menu.

- Tìm đến thẻ </body>.

- Thêm đoạn javascript sau vào trước thẻ </body>

<!-- Sticky Scroll NAV -->
<script type='text/javascript'>
$(document).ready(function() {
var aboveHeight = $('header').outerHeight();
$(window).scroll(function(){
if ($(window).scrollTop() > aboveHeight){
$('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
} else {
$('sticknav').removeClass('fixed').next().css('padding-top','0');
}
});
});
</script>

Sau đó lưu mẫu.

- Như vậy là đã xong việc tạo thanh menu ngang cố định cho blog của bạn rồi.Chúc các bạn thành công!

Nguồn : TungChem.Com