Làm menu cố định trên màn hình với CSS

Bài viết này sẽ hướng dẫn bạn tạo một menu “dính” lên màn hình với HTML và CSS, mà bạn có cuộn lên đầu hay cuối bài viết, menu vẫn nằm một chỗ, trong tầm mắt của bạn, tương tự như cái mình tạo cho blog của mình, bạn có thể thấy ở góc dưới-trái.

Công cụ: HTML và CSS.

Nhiều chuyện chút – Thời của Flash nặng nề sắp đi qua. Các menu flash hào nhoáng giờ có thể tạo dễ dàng, gọn nhẹ chỉ với HTML và CSS, và thêm JavaScript nếu muốn có nhiều hiệu ứng, tương tác hơn. Trong khuôn khổ bài này, mình chưa đề cập tới JavaScript.

menu html và css

Vào việc thôi.

Bước 1 – Chuẩn bị nội dung

Bạn muốn trên menu của mình có những gì, hãy chuẩn bị sẵn. Đó có thể là nút Top (để chuyển nhanh về đầu trang), nút Like của Facebook, nút Google Plus 1, Tweet, hay là các Page, Category của blog bạn…

Ví dụ, mình muốn tạo menu gồm ba thành phần như hình minh họa ở trên. Code để tạo thì các bạn xem trên trang của “nhà cung cấp”. Xem chi tiết cách thêm tại đây.

Bước 2 – Tạo một Unorder List (UL) với HTML.

[html]
<div id=’side-menu’>
<ul>
<li>
<fb:like send="false" layout="box_count" show_faces="true"></fb:like>
</li>
<li>
<!– Place this tag where you want the +1 button to render –>
<g:plusone size="tall"></g:plusone>
</li>
<li>
<a href=’#’ title=’Top’>Top ↑</a>
</li>
</ul>
</div>
[/html]

Các bạn chèn đoạn code trên vào (tốt nhất là) ngay sau thẻ <body> (thẻ mở).

Giải thích một chút. ID ‘side-menu’ sẽ giúp cho việc định dạng menu bằng CSS. Thẻ <div> sẽ giúp xác định vùng dành riêng cho menu của mình.

Bước 3 – Chuẩn bị CSS

[css collapse=”true” title=”CSS giúp đính menu trên màn hình”]
#side-menu {
margin:0 0 0 -4px;
/* giúp đặt menu sát bên trái và giấu đi phần bo góc của nền màu trắng */

padding:0 0 0 4px;
/* giúp "bù lại" phần 4px của margin-left bị ta giấu bớt */
/* text hay hình trên menu sẽ không bị dính sát cạnh của màn hình */

border-radius:4px;
/* tạo góc bo tròn cho nền màu trắng */

-o-border-radius: 4px;
-icab-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
/* đây là các tiền tố bổ sung dành cho các trình duyệt chưa hỗ trợ đầy đủ CSS3 */

border: 1px solid #999;
background-color:white;
text-align:center;
width:64px;
position:fixed;
/* cố định khung menu trên MÀN HÌNH */

left:0;
/* đính menu sát bên trái */
bottom:2em;
/* cho menu cách cạnh dưới cửa sổ trình duyệt 2 dòng */
/* tránh bị dòng Status của trình duyệt che khuất */

z-index:9999;Phần margin-left: -4px .
}
#side-menu ul { list-style:none; margin:0; padding:0; }
/* bỏ dấu bullet của unorder list */

#side-menu ul li {
display:block;
text-align:center;
padding:0;
margin:0.35em auto;
width:64px;
}
[/css]

Các bạn chèn đoạn CSS trên vào file CSS của theme hoặc chỗ nào hợp lý (xem như bạn biết cách chèn).

Mời bạn tận hưởng thành quả ^^. -/-

4 thoughts on “Làm menu cố định trên màn hình với CSS

    • Tùy vào template bạn à. Bạn xem file nào trong template được render ở mọi trang (như là header hay footer) thì bạn chèn vào file đó. Đó là nguyên tắc chung cho mọi site luôn.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s