Four Pretty Fish Eye Menu For You

Sudah tidak terbilang Koben berbagi tutorial mengenai MENU Tinggal dipilih menu jenis apa yang sobat suka. Walau sudah sering, kembali gue mau berbagi cara membuat Fish eye menu only with CSS Transform and Transition Absolute Position. Tidak tanggung, langsung empat macam absolute position akan kalian peroleh. Kiri, kanan, atas dan bawah :D
Sebelum memulai sobat sediakan beberapa kreasi gambar dengan resolusi 100px x 100px terlebih dahulu! Gambar apa saja terserah, yang penting resolusi gambarnya. Karena akan menerangkan 4 gaya menu absolute position, ada kode CSS wajib yang harus ikut serta pada setiap variasi menu yg akan nanti kalian pilih :-/

ul, li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
text-align: center;
}
a:hover img, a:focus img {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-webkit-transition: all .2s;
-moz-transition: all .2s;
transition: all .2s;
}

Jika variabel ul dan li sama dengan yg sudah ada pada template kalian masing², tidak usah bikin lagi. Jika di rasa perlu pisahkan dengan menambahakan atribut . (class) atau # (id) pada HTML ul & li

CSS Pretty Fish Eye Menu Sebelah Kiri

ul.menu_l {
position: absolute;
top: 10%;
left: 0;
}
ul.menu_l a img{
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
}Markup HTML

<ul class="menu_l">
<li>
<a href="#"><img src="LINK-IMAGE-100px.JPG" alt="" width="50"/></a>
</li>
<li>
<a href="#"><img src="LINK-IMAGE-100px.JPG" alt="" width="50"/></a>
</li>
<li>
<a href="#"><img src="LINK-IMAGE-100px.JPG" alt="" width="50"/></a>
</li>
</ul>

CSS Pretty Fish Eye Menu Sebelah Kanan

ul.menu_r {
position: absolute;
top: 10%;
right: 0;
}
ul.menu_r a img{
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
}Markup HTML

<ul class="menu_r">
<li>
<a href="#"><img src="LINK-IMAGE-100px.JPG" alt="" width="50"/></a>
</li>
<li>
<a href="#"><img src="LINK-IMAGE-100px.JPG" alt="" width="50"/></a>
</li>
<li>
<a href="#"><img src="LINK-IMAGE-100px.JPG" alt="" width="50"/></a>
</li>
</ul>

CSS Pretty Fish Eye Menu Atas

ul.menu_s li {
display: inline;
}
ul.menu_s a img{
-webkit-transform-origin: top;
-moz-transform-origin: top;
}Markup HTML

<ul class="menu_s">
<li>
<a href="#"><img src="LINK-IMAGE-100px.JPG" alt="" width="50"/></a>
</li>
<li>
<a href="#"><img src="LINK-IMAGE-100px.JPG" alt="" width="50"/></a>
</li>
<li>
<a href="#"><img src="LINK-IMAGE-100px.JPG" alt="" width="50"/></a>
</li>
</ul>

CSS Pretty Fish Eye Menu Bawah

ul.menu_b li{
display: inline;
}
ul.menu_b {
position: absolute;
bottom: 0;
width: 99%;
}
l.menu_b {
left: 0;
}
ul.menu_b a img{
-webkit-transform-origin: bottom;
-moz-transform-origin: bottom;
}Markup HTML

<ul class="menu_b">
<li>
<a href="#"><img src="LINK-IMAGE-100px.JPG" alt="" width="50"/></a>
</li>
<li>
<a href="#"><img src="LINK-IMAGE-100px.JPG" alt="" width="50"/></a>
</li>
<li>
<a href="#"><img src="LINK-IMAGE-100px.JPG" alt="" width="50"/></a>
</li>
</ul>

Lihat hasil kerja :)
Source and demo

Jika mau diam di tempat, tinggal rubah saja kode position: absolute menjadi position: fixed ;)
Happy pretty fish eye menu \m/