Tạo menu tĩnh hiệu quả với DIV theo chuẩn W3C
Có nhiều cách tạo menu bằng hình ảnh trong HTML với DIV và CSS, Tôi giới thiệu với các bạn một cách mà tôi nhân thấy sự hiệu quả và ổn định của nó. Cách này nó khắc phục được lỗi do tốc độ đường truyền gây nên khi bạn mouseOver.
Đầu tiên bạn tạo một image tương tự thế này. Với hình này thì trạng thái binh thường của button và trạng thái over ta gom chung lại thành 1 file.
Tạo thêm 1 hình 1x1px trong suốt để thiết lập alt cho button khi người dùng sử dụng chế độ không hình
Phần CSS thì viết thế này nhé:
@charset “utf-8″;
/* CSS Menu */
.menu { width:750px; height:30px}
.menu li,ul{ margin : 0; padding : 0; list-style:none; display:inline}
.menu img {border:0px}
.menu .menu_link1 {float:left; background-image:url(menu.jpg); width:150px; height:30px; background-position: 0px 0px}
.menu .menu_link1:hover {float:left; background-image:url(menu.jpg); width:150px; height:30px; background-position: 0px -30px}
.menu .menu_link2 {float:left; background-image:url(menu.jpg); width:150px; height:30px; background-position: -150px 0px}
.menu .menu_link2:hover {float:left; background-image:url(menu.jpg); width:150px; height:30px; background-position: -150px -30px}
.menu .menu_link3 {float:left; background-image:url(menu.jpg); width:150px; height:30px; background-position: -300px 0px}
.menu .menu_link3:hover {float:left; background-image:url(menu.jpg); width:150px; height:30px; background-position: -300px -30px}
.menu .menu_link4 {float:left; background-image:url(menu.jpg); width:150px; height:30px; background-position: -450px 0px}
.menu .menu_link4:hover {float:left; background-image:url(menu.jpg); width:150px; height:30px; background-position: -450px -30px}
.menu .menu_link5 {float:left; background-image:url(menu.jpg); width:150px; height:30px; background-position: -600px 0px}
.menu .menu_link5:hover {float:left; background-image:url(menu.jpg); width:150px; height:30px; background-position: -600px -30px}
Phần HTML thì như sau:
<body>
<div class=”menu”>
<ul>
<li ><a href=”#” class=”menu_link1″ title=”menu_link1″><img src=”space.gif” alt=”menu_link1″ /></a></li>
<li ><a href=”#” class=”menu_link2″ title=”menu_link2″><img src=”space.gif” alt=”menu_link2″ /></a></li>
<li ><a href=”#” class=”menu_link3″ title=”menu_link3″><img src=”space.gif” alt=”menu_link3″ /></a></li>
<li ><a href=”#” class=”menu_link4″ title=”menu_link4″><img src=”space.gif” alt=”menu_link4″ /></a></li>
<li ><a href=”#” class=”menu_link5″ title=”menu_link5″><img src=”space.gif” alt=”menu_link5″ /></a></li>
</ul>
</div>
</body>