Tạo Fisheye Menu bằng CSS3

Chắc hẳn là bạn đã không còn quá xa lạ với các menu dạng Fisheye, nhưng mình cá là bạn không biết là bạn có thể làm các menu như thế mà chỉ bằng CSS3 mà không cần bất cứ đoạn javacript hay jquery nào cả. Các bạn có thể xem demo Fisheye Menu tại đây.
Để tạo ra menu này thì chúng ta có thể làm theo từng bước sau đây:

Bước 1 : HTML

<ul>
<li><a href="#"><img src="icons/opera_100.png" alt="opera" awidth="50"/></a></li>
<li><a href="#"><img src="icons/camino_100.png" alt="camino" awidth="50"/></a></li>
<li><a href="#"><img src="icons/chrome_100.png" alt="chrome" awidth="50"/></a></li>
<li><a href="#"><img src="icons/ff_100.png" alt="firefox" awidth="50"/></a></li>
<li><a href="#"><img src="icons/flock_100.png" alt="flock" awidth="50"/></a></li>
<li><a href="#"><img src="icons/ie_100.png" alt="internet explorer" awidth="50"/></a></li>
<li><a href="#"><img src="icons/konqueror_100.png" alt="konqueror" awidth="50"/></a></li>
<li><a href="#"><img src="icons/safari_100.png" alt="safari" awidth="50"/></a></li>
</ul>
<ul>
<li><a href="#"><img src="icons/opera_100.png" alt="opera" awidth="50"/></a></li>
<li><a href="#"><img src="icons/camino_100.png" alt="camino" awidth="50"/></a></li>
<li><a href="#"><img src="icons/chrome_100.png" alt="chrome" awidth="50"/></a></li>
<li><a href="#"><img src="icons/ff_100.png" alt="firefox" awidth="50"/></a></li>
<li><a href="#"><img src="icons/flock_100.png" alt="flock" awidth="50"/></a></li>
<li><a href="#"><img src="icons/ie_100.png" alt="internet explorer" awidth="50"/></a></li>
<li><a href="#"><img src="icons/konqueror_100.png" alt="konqueror" awidth="50"/></a></li>
<li><a href="#"><img src="icons/safari_100.png" alt="safari" awidth="50"/></a></li>
</ul>
<ul>
<li><a href="#"><img src="icons/opera_100.png" alt="opera" awidth="50"/></a></li>
<li><a href="#"><img src="icons/camino_100.png" alt="camino" awidth="50"/></a></li>
<li><a href="#"><img src="icons/chrome_100.png" alt="chrome" awidth="50"/></a></li>
<li><a href="#"><img src="icons/ff_100.png" alt="firefox" awidth="50"/></a></li>
<li><a href="#"><img src="icons/flock_100.png" alt="flock" awidth="50"/></a></li>
<li><a href="#"><img src="icons/ie_100.png" alt="internet explorer" awidth="50"/></a></li>
<li><a href="#"><img src="icons/konqueror_100.png" alt="konqueror" awidth="50"/></a></li>
<li><a href="#"><img src="icons/safari_100.png" alt="safari" awidth="50"/></a></li>
</ul>
<ul>
<li><a href="#"><img src="icons/opera_100.png" alt="opera" awidth="50"/></a></li>
<li><a href="#"><img src="icons/camino_100.png" alt="camino" awidth="50"/></a></li>
<li><a href="#"><img src="icons/chrome_100.png" alt="chrome" awidth="50"/></a></li>
<li><a href="#"><img src="icons/ff_100.png" alt="firefox" awidth="50"/></a></li>
<li><a href="#"><img src="icons/flock_100.png" alt="flock" awidth="50"/></a></li>
<li><a href="#"><img src="icons/ie_100.png" alt="internet explorer" awidth="50"/></a></li>
<li><a href="#"><img src="icons/konqueror_100.png" alt="konqueror" awidth="50"/></a></li>
<li><a href="#"><img src="icons/safari_100.png" alt="safari" awidth="50"/></a></li>
</ul>
<p><a href="http://www.thuthuatweb.net/">Trở về trang chủ</a></p>

Bước 2 : CSS

html,
body {
awidth: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
text-align: center;
}
ul.menu_s li,
ul.menu_b li{
display: inline;
}
ul.menu_l,
ul.menu_r,
ul.menu_b {
position: absolute;
}
ul.menu_l,
ul.menu_r {
top: 50%;
margin-top: -200px
}
ul.menu_l,
l.menu_b {
left: 0;
}
ul.menu_r {
right: 0;
}
ul.menu_b {
bottom: 0;
awidth: 100%;
}
a:hover,
a:focus { /* we use :focus for keyboard navigation */
z-index: 200 /* bring to top when the mouse is over */
}
a img {
border: none;
-webkit-transition: all .2s; /* in Safari, every animatable property triggers an animation in .2s */
}
ul.menu_s a img{
-webkit-transform-origin: top; /* in Safari, the origin for transformation */
-moz-transform-origin: top; /* in Firefox, the origin for transformation */
}
ul.menu_l a img{
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
}
ul.menu_r a img{
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
}
ul.menu_b a img{
-webkit-transform-origin: bottom;
-moz-transform-origin: bottom;
}
a:hover img,
a:focus img {
-webkit-transform: scale(2);
-moz-transform: scale(2);
}
p {
text-align: center;
position: absolute;
top: 50%;
awidth: 100%;
}

Vậy là từ giờ các bạn có thể làm Fisheye Menu mà không cần phải lo lắng về vấn đề tốc độ web khi load các file jquery nữa nhá, tuy nhiên các bạn nên cần kiểm tra trên từng loại trình duyệt khác nhau để có thể đưa ra kết quả như ý muốn.
Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster