Cố định menu tại một vị trí nhất định trên trang web khi kéo thanh cuộn
Cố định menu tại một vị trí nhất định trên trình duyệt, để menu đó luôn hiển thị khi kéo thanh cuộn sẽ giúp cho trang của bạn chuyên nghiệp và thu hút được nhiều độc giả hơn, và điều hướng được khách thăm blog của bạn đến những chủ đề mà bạn muốn giới thiệu.

Namkna đã giới thiệu cho các bạn rất nhiều mẫu menu khác nhau như: menu 1 cấp, xổ dọc nhiều cấp, menu ngang, dropmenu, hay menu dạng kết hợp... Các mẫu đó đều đặt cố định dưới header. 

Hôm nay namkna xẽ giới thiệu cho các bạn một thủ thuật đơn giản cho phép bạn tùy biến tất cả các mẫu menu mà namkna đã giới thiệu. Giúp bạn có thể đặt thanh Menu này ở bất cứ vị trí nào, ví dụ : trên cùng (top), bên dưới(bottom), trái trên(left-top), phải dưới (right-bottom) của trình duyệt khi bạn kéo chuột đến bất kỳ vị trí nào trong blog của bạn...

Các bạn có thể xem Demo ngay tại trang namkna với thanh menu  trên cùng của trình duyệt bạn đang xem luôn hiển thị khi bạn kéo chuột xuống chân blog.

☼ Cách tạo một menu luôn hiển thi cố định trên cùng hoặc dưới chân trình duyệt web

1- Xác định tên Id hoặc Class của menu Phần này thường nằm trong thẻ div của các menu.
Mình sẽ lấy ví dụ về một menu mình từng giới thiệu tại bài viết này, thì có Id và Class như sau: 
<div id="smoothmenu1" class="ddsmoothmenu">
» Trong đó:
  • Màu đỏ smoothmenu1 là Id của menu đó
  • Mầu xanh ddsmoothmenu là class của menu đó (với các menu khác bạn xác định tương tự)
2- Tiếp theo là thêm thuộc tính cho menu luôn nằm ở vị trí xác định. bạn chỉ cần thêm đoạn CSS sau trước thẻ ]]></b:sin> là được.
ID-CLASS{
z-index:9999;
position: fixed;
_position:absolute;
top: 0px;}
» Trong đó:
  • Thay ID-CLASS  thành tên Id hoặc tên Class của menu mà bạn muốn hiển thị cố định ở một vị trí nhất định trên trình duyệt.
  • Chú ý: với Id thì thêm dấu thăng # đăng trước tên Id, với Class thì bạn thêm dấu chấm (.) vào trước tên class.
  • Ở đoạn CSS này menu sẽ luôn hiển thị trên đầu blog, nếu muốn hiển thị ở chân blog thì thay chữ top thành bottom (bên dưới), left-top (trên cùng bên trái), right-bottom(dưới cùng bên phải),...
- Với ví dụ Menu xổ dọc nhiều cấp mà mình nói bên trên thì bạn có thể sử dụng một trong 2 đoạn code sau đặt trước thẻ ]]></b:skin> trong mẫu  của bạn:
+ Đoạn code nếu dùng Id: 
#smoothmenu1 {
z-index:9999;
position: fixed;
_position:absolute;
top: 0px;}
+ Đoạn code nếu dùng class:
.ddsmoothmenu {
z-index:9999;
position: fixed;
_position:absolute;
top: 0px;}

☼ Nâng cao khi cố định menu trên blogspot

- Từ đây ta có thể mở rộng thêm rất nhiều thủ thuật khác ngoài tạo menu như trên mà còn để tạo một thông báo.
  • Tạo một dòng thông báo tại một vị trí cố định để độc giả có thể nhìn thấy dễ nhất.
  • Tạo một danh sách các bài viết mới đăng kèm theo hiệu ứng chạy chữ trên đầu hoặc chân blog để độc giả tiện theo dõi.
  • Hoặc bất cứ thứ gì mà bạn muốn hiển thị. Một lời khuyên là : chỉ nên cho phép hiển thị nội dung theo 1 hàng, để không chiếm chỗ trên không gian của blog bạn (Tất nhiên nếu muốn bạn có thể để nhiều hàng hơn) .=>=>=> Demo ngay tại phần footer khi bạn xem bài viết này:

☼ Tự tạo một menu cố định ở một vị trí trên trình duyệt cho blogspot.

- Với những bạn thích học hỏi, khám phá bạn có thể tự tạo cho mình một menu bằng cách, Bạn chỉ cần thêm các tiện ích trên vào trong thẻ div như sau: 
<div class="fixed-navbar">
{nội dung mà bạn muốn hiển thị trên khung top hay bottom của bạn}
</div>
Và thêm thuộc tính sau trước thẻ: ]]></b:skin>
div.fixed-navbar {
z-index:9999;
background-color: #ccc;
color: #000;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
position: fixed; top: 0; left: 0;
text-align: left;
width: 100%;
border: 2px #00f solid;
}
» Trong đó:
  • position: fixed; top: 0; left: 0; là vị trí hiển thị trên đầu, bạn có thể đổi lại thành position: fixed; bottom: 0; left: 0; để hiện thị phía dưới bên trái.
  • width: 100% là độ rộng của khung bằng chiều rộng blog. Có thể thay dổi bàng số tuyệt đối là width:900Px theo ý bạn. (Nếu bạn đang sử dụng giao Responsive diện thì bạn nên dùng số tương đối là %)

☼ Fix lỗi menu không cố định trên trình duyệt IE6 hoặc cũ hơn

- Trình duyệt IE hiện nay không còn mấy người sử dụng, tuy nhiên mình vẫn sẽ hướng dẫn khắc phục lỗi hiển thị không đúng hoặc không cố định được menu tại một vị trí nhất định trên trình duyệt IE6. Để khắc phục bạn có thể dùng đoạn code CSS sau: 
div.fixed-navbar{
z-index:9999;
background-color: #ccc;
color: #000;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
text-align: left;
width: 200px;
border: 2px #00f solid;
position: fixed;
_position:absolute;
left: 0px;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_right:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
» Trong đó:
  • Đoạn code màu tím là code được thêm vào để khai báo với IE6 giúp cho menu hoạt động bình thường.
  • Với code trên thì thanh Navbar sẽ hiển thị ở góc trái bên dưới. Nếu muốn hiển thị bên góc phải bên dưới thì sửa code màu xanh (right) thành left.
  • Với lệnh left: 0px; sẽ cho phép thanh Navbar dịch qua phải (tức canh lề trái) 0 pixel.


Đây là đoạn thông báo demo cho bài viết này (kéo thanh chạy lên xuống để xem demo)