Code tạo menu bằng hình ảnh
<style>
#menuimg-cia ul li{
display:inline;
list-style:none;
padding: 0px 50px 0px 0px;
border: 0px solid;
}
#menuimg-cia ul li img {
width: 35px;
height: 35px;
box-shadow: 0px 0px 6px 1px #ee8018;
-webkit-transition:all 1.2s ease;
-moz-transition:all 1.1s ease;
-moz-opacity: 0.6;
opacity: 0.6;
-khtml-opacity: 0.6;
}
#menuimg-cia ul li img:hover{
width: 45px;
height: 45px;
box-shadow: 0px 0px 6px 1px red;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
transition:all 0.5s ease;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 1.5;
}
</style>
<div id='menuimg-cia'>
<ul>
<li><a href="#" target="_blank"><img src="Home.png" title="Home"></a></li>
<li><a href="#" target="_blank"><img src="blogger.png" title="Thủ thuật blog"></a></li>
<li><a href="#" target="_blank"><img src="download.png" title="Download"></a></li>
<li><a href="#" target="_blank"><img src="giaitri.png" title="Giải trí"></a></li>
<li><a href="#" target="_blank"><img src="phim.png" title="Xem phim"></a></li>
<li><a href="#" target="_blank"><img src="email.png" title="Liên hệ"></a></li>
<li><a href="#" target="_blank"><img src="rss.png" title="rss"></a></li>
</ul>
</div>
Hướng dẫn :
Các bạn hãy thay # thành liên kết của bạn.
Thay link img Home.png... thành các link hình của bạn. ( nhỏ hơn hoặc bằng 50px và nên là hình vuông )
Thay các title khi rê chuột vào hiện thị tiêu đề của hình ảnh. ( title="Home" )
Menu chỉ hiện thì tốt nhất trên trình duyệt Chrome và Firefox
Còn IE9 vẫn hiện thị nhưng sẽ mất đi một số tính năng hấp dẫn quan trọng mà CSS3 mang lại.
Chúc các bạn thành công!
Phạm Chí Ngoan @ 02:08 12/05/2012
Số lượt xem: 325
- Đưa flash vào mục ý kiến (12/05/12)
- Code ảnh động (12/05/12)
- "Tổng hợp code làm trong suốt blog" (12/05/12)
- Code rút gọn làm blog trong suốt hoàn toàn (12/05/12)
- Code làm trong suốt nền và tiêu đề các module chính và module phụ (12/05/12)
Các ý kiến mới nhất