Menu với CSS

Bài viết này sẽ hướng dẫn các bạn trang trí một menu trên web với CSS. Sau khi đọc xong hướng dẫn này các bạn sẽ thu được kỹ thuật làm menu với tên gọi là Slide door và một số kinh nghiệm khác. Kết quả sau khi thực hiện xong sẽ như hình dưới đây.

Đầu tiên chúng ta tạo đoạn code HTML xây dựng menu như sau:

<div class="container">
      <ul id="menu">
        <li class="active"><a href="#">Trang chủ</a></li>
        <li><a href="#">Diễn đ&agrave;n</a></li>
        <li><a href="#">Giới thiệu</a></li>
        <li><a href="#">Điều khoản</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">My gallery</a></li>
        <li><a href="#">Th&agrave;nh vi&ecirc;n</a></li>
        <li><a href="#">B&aacute;o lỗi</a></li>
      </ul>
    </div>

Tiếp theo chúng ta sẽ chỉnh CSS để có được menu hiển thị như mong muốn.

/* MENU */
ul#menu{
  line-height:50px;
  margin:0;
  list-style:none;
}
  ul#menu li{
    float: left;
    margin-right:20px;
    text-transform:uppercase;
    padding-right: 10px;
  }
 
  ul#menu li.active, ul#menu li:hover, ul#menu li.sfhover{
    background: transparent url(images/button-right.png) no-repeat right;
  }
 
  ul#menu li a{
    color:#FFFFFF;
    text-decoration: none;
    display:block;
    padding-left: 10px;
  }
 
  ul#menu li.active a, ul#menu li:hover a, ul#menu li.sfhover a{
    background: transparent url(images/button-left.png) no-repeat left;
  }
 
/* END MENU */

Ở đây tôi giải thích qua một số thuộc tính, chúng ta sử dụng line-height: 50px để ép chiều cao của menu bằng 50px và chữ sẽ được tự động căn giữa theo chiều dọc. Nếu chúng ta sử dụng thuộc tính height thì sẽ phải sử dụng margin hoặc padding để căn lại vị trí cho chữ của menu. Với thuộc tính list-style: none; để bỏ các bullet của các item li. Tiếp nữa nếu để mặc định thì chúng ta sẽ thấy các li hiển thị theo từng dòng một từ trên xuống dưới, ở đây chúng ta muốn hiển thị menu theo chiều ngang nên sẽ dùng float:left để các li hiển thị trên cùng một dòng ngang. Và để các mục cách nhau chúng ta sử dụng margin-right: 20px; để làm việc này.

Bây giờ để thay đổi style khi một item được chọn hoặc chuột di chuyển qua ta chỉnh lại thuộc tính của ul#menu li.active, ul#menu li:hover. Nhìn lại đoạn mã CSS sẽ thấy chỉ khi item được chọn và chuột di chuyển qua chúng ta chỉ thay đổi ảnh của background cho item đó. Nhưng ở đây chắc ai đó sẽ thắc mắc sao lại phải thay đổi background cho cả tag a và li, sao không chỉ một thôi. Do độ dài của từng item là chưa biết trước và khác nhau nên chúng ta không thể tạo ra một cái background cố định để thay cho tất cả được. Do vậy ở đây chúng ta sẽ sử dụng một kỹ thuật với tên gọi cũng khá gợi hình tượng “slide door”. Trước tiên vào Photoshop tạo một button có độ dài phù hợp rồi cắt ra làm 2 phần như hình dưới đây

Như vậy chúng ta sẽ cho background của li là cái ảnh bên phải, của thẻ a nằm trong li là ảnh bên trái. Do đó khi item có kích thước khác nhau thì hình ảnh nút vẫn được hiển thị hài hòa. (Ô thế tại sao không dùng ảnh li là ảnh bên trái, và của thẻ a là cái còn lại? đơn giản vì theo cách hiển thị trên trình duyệt thì thằng nào nằm trong thì background của nó đè lên thằng chứa nó, còn nếu ai vẫn thích vậy thì ta cắt lại cho hình bên phải nhỏ hơn…).

OK, vậy là sau những bước này chúng ta đã có một menu ngang rồi và chạy rất ok trên Firefox, nhưng khi sang thằng IE thì sự kiện di chuyển chuột qua item không thấy nó đổi background. Tại sao nhỉ? Đây chính là những lúc bực nhất đối với người thiết kế Web để đảm bảo trang web của mình chạy đúng đắn trên các trình duyệt. Bị hiện tượng như trên là do trong IE không có cái kiểu li:hover, cái này IE chỉ support cho tag a thôi. Để giải quyết vấn đề này chúng ta thêm đoạn javascript này ở đầu trang web.

<!--//--><![CDATA[/ /><!
sfHover = function() {
  var sfEls = document.getElementById("menu").getElementsByTagName("LI");
  for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
      this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
      this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
  }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!--]]>

Đoạn mã này sẽ được chạy trong IE để khi ta di chuyển chuột qua một item thì sẽ thêm môt class sfhover vào li. Cho nên trong đoạn mã CSS ở trên chúng ta cũng có phần định nghĩa style cho ul#menu li.sfhover và ul#menu li.sfhover a.

Vậy chúng ta đã có một menu chạy ngon trên IE và firefox!.
Chúc bạn thành công