Menu 2 trạng thái với CSS

Ta có thể dùng 2 tập ảnh riêng biệt để tạo ra 1 menu dạng 2 trạng thái (1 tập ảnh làm nền cho trạng thái bình thường, 1 tập ảnh làm nền cho trạng thái hover). Tuy nhiên để tiết kiệm dung lượng khi load ảnh, người ta dùng 1 tấm ảnh lớn là kết hợp của 2 tập ảnh trên và dùng thuộc tính background-position trong CSS để tạo ra 1 menu 2 trạng thái. Trong bài viết này tôi sẽ hướng dẫn làm 1 menu như vậy.

View Demo

Ý tưởng thực hiện menu đơn giản là ta áp dụng 1 background-image cho tất cả các thành phần. Tuy nhiên mỗi thành phần ở mỗi trạng thái (bình thường và hover) sẽ có background-position khác nhau.

Công việc đầu tiên là xây dựng code HTML cho menu

 <ul>
  <li><a class="item1" href="#">Item 1</a></li>
  <li><a class="item2" href="#">Item 2</a></li>
  <li><a class="item3" href="#">Item 3</a></li>
  <li><a class="item4" href="#">Item 4</a></li>
  <li><a class="item5" href="#">Item 5</a></li>
 </ul>

Tiếp theo ta xây dựng CSS cho các thành phần:

 *{margin:0; padding: 0;}
 ul {
   list-style: none;
   margin: 20px 50px;
 }
 ul li {
  font-size: 2em;  
 }
 ul li a{
   background-image: url(background.gif);
   background-repeat: no-repeat;
   padding-left: 90px;
   height: 72px;
   display: block;
   text-decoration: none;
 }

CSS cho các thẻ a có class là item1 đến item5 ở trạng thái bình thường

 ul li a.item1{
   background-position: 0 0;
 }
 ul li a.item2{
   background-position: 0 -143px;
 }
 ul li a.item3{
   background-position: 0 -287px;
 }
 ul li a.item4{
   background-position: 0 -431px;
 }
 ul li a.item5{
   background-position: 0 -575px;
 }

CSS cho các thẻ a ở trạng thái hover/p>

 ul li a.item1:hover{
   background-position: 0 -72px;
 }
 ul li a.item2:hover{
   background-position: 0 -215px;
 }
 ul li a.item3:hover{
   background-position: 0 -359px;
 }
 ul li a.item4:hover{
   background-position: 0 -503px;
 }
 ul li a.item5:hover{
   background-position: 0 -647px;
 }