thanh menu ( sticky menu ) cố định đẹp cho web/blog ~ Ngoc Anh

Thanh menu ( sticky menu ) cố định đẹp cho web/blogger là một thủ thuật cực kỳ hay và hấp dẫn cho các trang blog. Menu là một công cụ khôn...

Blogspot+ Thu-thuat-blog

Thanh menu ( sticky menu ) cố định đẹp cho web/blogger là một thủ thuật cực kỳ hay và hấp dẫn cho các trang blog.
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.

thanh menu ( sticky menu ) cố định đẹp cho web/blog

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).

Thế nào là menu cố định?

Menu cố định cũng là một thanh menu ngang thông thường, nhưng được hiển thị cố định trên đầu web, blog - ngay dưới thanh điều khiển của trình duyệt. Khi cuộn trang, menu này không biến mất. Các bạn có thể kiểm chứng điều đó ngay trên đầu trang NgocAnhBlog này.

Cách cài đặt:

B1. Đă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 */
/*http://www.ngocanhblog.com*/
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 XOMISSE STICKY NAV BAR */

B2. 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.

B3. Thêm javascript cho thanh menu.

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

<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.
- Menu này thật tuyệt vời phải không các bạn ?.
Nguồn : Tùng chèm blog