Menu luôn hiển thị trên đầu hoặc chân blogspot

Menu luôn hiển thị trên đầu hoặc chân blogspot (hay sử dụng)

Fairstar | 09-04-2012 | nhận xét (6)

Namkna đã giới thiệu choc á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 dạng kết hợp... Các mẫu đó đều đặt 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 đx 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)...
Demo ngay tại trang namkna với thanh menu đầu tiên.

☼ Cách tiến hành:

   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.

Ví dụ: với menu xổ dọc nhiều cấp Tại đây thì có Id và Class như sau:

<div id="smoothmenu1" class="ddsmoothmenu">

- Tr0ng đó 

• Màu đỏ smoothmenu1 là Id 
• Mầu xanh ddsmoothmenu là class

   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:skin> là được.

#Tên ID  hoặc .tên class) {
position: fixed;
_position:absolute;
top: 0px;}

- Trong đó: 

• Thay  Tên ID (hoặc tên class) thành tên Id hoặc tên class của menu.
•  Lưu ý nếu là Id thì trước phải có dấu thăng (#), còn nếu là class thì trước phải có dấu chấm (.)
• Ở đ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 là được.

- Ví dụ Menu xổ dọc nhiều cấp trên thì bạn có code sau:

#smoothmenu1 {
position: fixed;
_position:absolute;
top: 0px;}

Hoặc:

.ddsmoothmenu {
position: fixed;
_position:absolute;
top: 0px;}

- Bạn chỉ cần dùng 1 trong 2 code trên chèn trước thẻ ]]></b:skin> là được.

Mở rộng!

- 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ạo một danh sách các bài viết hot (mới) (kèm theo hiệu ứng chạy chữ)

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

=>=>=> Demo ngay tại phần footer khi bạn xem bài viết này: 
- 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 {
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

- Nếu gặp lỗi trên IE 6 thì bạn có thể sài code CSS sau:

div.nicetitle {
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);
}

- code màu đỏ là code được thêm vào.
- 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ớilênh left: 0px; sẽ cho phép thanh Navbar dịch qua phải (tức canh lề trái) 0 pixel.

Thông báo từ ngày hôm này namkna chính thức sở hữu thêm một tên miền mới là http://hoainamvina.blogspot.com/ bạn có thể truy cập bằng cả 2 địa chỉ.

Chúc thành công.