Hướng dẫn tạo thanh menu chạy theo thanh cuộn

Một trong web đẹp và hiện đại đều có nhiều thanh menu khi cuộn trang xuống nó dính vào phía trên màn hình. Những thanh này sẽ giúp bạn dễ dàng lướt qua lại các nội dung khi sử dụng máy. Để tạo thanh menu chạy theo thanh cuộn cho web bạn cùng tìm hiểu cách làm qua bài viết sau:

  1. Hướng dẫn tạo Sticky cho menu

Bước đầu tiên cho công đoạn tạo thanh menu cho thanh cuộn bạn cần phải tạo CSS cho nó. Để thực hiện điều này bạn vào Edit HTML thêm vào đoạn CSS phía bên trên thẻ ]]></b:skin>. Bạn cần thêm đoạn code như sau:

/*Bắt đầu stick Nav*/

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;}

/*Kết thúc Stick Nav*/

Phần /**/ để báo cho bạn biết rằng đoạn code nói gì nên bạn không cần quan trọng đâu nhé. Giờ bạn chỉ việc tìm đến đoạn code chứa navigation bar rồi đặt toàn bộ phần code phía trên vào trong thẻ <sticknav>.

Thực hiện mã code cho <sticknav>

Công đoạn cuối cùng, bạn cần đặt đoạn code dưới đây trong thẻ </body>. Đoạn code như sau:

<script type=”text/javascript”

Src=http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js></script>

<script type=”text/javascript”>

$(window).scroll(function(){

If($(window).scrollTop() >above Height){

$(‘sticknav’).addClass(‘fixed’).css(‘top’,’0’).next().css(‘padding-top’,’60px’);

}else{

$(‘sticknav’).removeClass(‘fixed’).next().css(‘padding-top’,’0’);

}

});

});

</script>

Thẻ <body>

Sau khi thực hiện xong bạn lưu lại, vậy là quá trình tạo thanh menu chạy theo thanh cuộn đã thành công. Bạn sẽ có trải nghiệm mới thật tuyệt vời với tính năng mới của website.

  1. Ưu điểm khi sử dụng thanh menu cố định khi cuộn trang

Thanh menu cố định khi cuộn trang mang tới nhiều ưu điểm và tiện lợi cho người dùng. Chẳng hạn như việc bạn đang xem một nội dụng tin tức nào đó, hay thông tin hình ảnh nào đó. Bạn cần lướt xuống cùng hay trên cùng để xem nội dung hoặc xem lại thông tin thì thanh menu cố định này sẽ rất phù hợp.

Khi xem nội dung trang cuối, giữa hay đầu với thanh menu này tiết kiệm được nhiều thời gian. Bạn sẽ không phải lật đi lật lại các trang để tìm kiếm thông tin mà mình đang cần, cũng như việc xem thông tin. Thanh menu này ra đời phù hợp cho người làm việc thường xuyên với máy tính, thực hiện các thao tác trên website.

Thanh menu này còn rất nhỏ gọn nằm bên góc phải màn hình nên thuận tiện cho việc sử dụng. Cách bố trí thanh đơn giản không cầu kỳ nhưng vẫn tạo được điểm nhấn cho giao diện. Giao diện người dùng không rườm rà, đơn giản nhưng làm nổi bật được chức năng thanh menu.

Những thông tin về cách tạo thanh menu cố định khi cuộn trang đã chia sẻ qua bài viết trên. Mong rằng những thông tin trên sẽ giúp ích cho bạn trong cuộc sống cũng như trong cuộc việc hàng ngày.

>>> Xem thêm: đăng ký domain- Tìm hiểu dịch vụ đăng ký tên miền từ nhà cung cấp số 1 tại thị trường

>>> Xem thêm: thuê máy chủ – Dịch vụ thuê máy chủ cấu hình mạnh mẽ với chi phí cực tiết kiệm

>>> Xem thêm: dang ky ssl – Mua ssl cho tên miền tạo uy tín với chi phí tốt nhất thì trường

Related Posts

About The Author

Add Comment