◄ Min  Size Fonts: + | - | ± Color: Max ►

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/
Loading...
XFour Pretty Fish Eye Menu For You
Membuat pretty fish eye menu. Ada empat macam pilihan yakni: kanan, atas, kiri dan bawah.
Subscribe my posts Register For Free!

2 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE