JQUERY: menu Mata Ikan


dengan asumsi kita sudah punya jquery-1.6.2.min.js

donlot dulu ini:

http://interface.eyecon.ro/interface/interface.js

dan letakkan di folder js

kemudian masukkan ini diantara <head> dan </head>

<style>

.fisheye{ text-align: center; height: 50px; position: relative; }

a.fisheyeItem{ text-align: center; color: #000; font-weight: bold; text-decoration: none; width: 40px; position: absolute; display: block; top: 0; }

a.fisheyeItem2{ text-align: center; color: #000; font-weight: bold; text-decoration: none; width: 40px; position: absolute; display: block; bottom: 0; }

.fisheyeItem img{ border: none; margin: 0 auto 5px auto; width: 100%; }

.fisheyeItem2 img{ border: none; margin: 5px auto 0 auto; width: 100%; }

.fisheyeItem span, .fisheyeItem2 span{ display: none; positon: absolute; }

.fisheyeContainter{ background-color: #f00; height: 50px; width: 200px; left: 500px; position: absolute; }

#fisheye2{ position: absolute; width: 100%; bottom: 0px; }

</style>

fisheye itu letaknya di atas dan fisheye2 letaknya di bawah

sekarang contohnya, letakkan di <body>

menu atas

<div id=”fisheye”>

<div>

<a href=”#”><img src=”images/home.png” width=”30″ /><span>Home</span></a>

<a href=”#”><img src=”images/email.png” width=”30″ /><span>Email</span></a>

<a href=”#”><img src=”images/display.png” width=”30″ /><span>Display</span></a>

<a href=”#”><img src=”images/clock.png” width=”30″ /><span>Clock</span></a>

<a href=”#”><img src=”images/web.png” width=”30″ /><span>Web</span></a>

<a href=”#”><img src=”images/home.png” width=”30″ /><span>Home</span></a>

<a href=”#”><img src=”images/email.png” width=”30″ /><span>Email</span></a>

<a href=”#”><img src=”images/display.png” width=”30″ /><span>Display</span></a>

<a href=”#”><img src=”images/clock.png” width=”30″ /><span>Clock</span></a>

<a href=”#”><img src=”images/web.png” width=”30″ /><span>Web</span></a>

</div>

</div>

menu bawah

<div id=”fisheye2″>

<div>

<a href=”#”><span>Home</span><img src=”images/home.png” width=”30″ /></a>

<a href=”#”><span>Email</span><img src=”images/email.png” width=”30″ /></a>

<a href=”#”><span>Display</span><img src=”images/display.png” width=”30″ /></a>

<a href=”#”><span>Clock</span><img src=”images/clock.png” width=”30″ /></a>

<a href=”#”><span>Web</span><img src=”images/web.png” width=”30″ /></a>

</div>

</div>

mah letakkan skrip ini sebelum </body>

<script type=”text/javascript”>

$(document).ready(function(){

$(‘#fisheye’).Fisheye({

maxWidth: 50,

items: ‘a’,

itemsText: ‘span’,

container: ‘.fisheyeContainter’,

itemWidth: 40,

proximity: 90,

halign : ‘center’

})

$(‘#fisheye2’).Fisheye({

maxWidth: 60,

items: ‘a’,

itemsText: ‘span’,

container: ‘.fisheyeContainter’,

itemWidth: 40,

proximity: 80,

alignment : ‘left’,

valign: ‘bottom’,

halign : ‘center’

})

});

</script>

hasil jadinya klik ini http://interface.eyecon.ro/demos/fisheye.html

dengan asumsi kita sudah punya jquery-1.6.2.min.js

donlot dulu ini:

http://interface.eyecon.ro/interface/interface.js

dan letakkan di folder js

kemudian masukkan ini diantara <head> dan </head>

<style>

.fisheye{ text-align: center; height: 50px; position: relative; }

a.fisheyeItem{ text-align: center; color: #000; font-weight: bold; text-decoration: none; width: 40px; position: absolute; display: block; top: 0; }

a.fisheyeItem2{ text-align: center; color: #000; font-weight: bold; text-decoration: none; width: 40px; position: absolute; display: block; bottom: 0; }

.fisheyeItem img{ border: none; margin: 0 auto 5px auto; width: 100%; }

.fisheyeItem2 img{ border: none; margin: 5px auto 0 auto; width: 100%; }

.fisheyeItem span, .fisheyeItem2 span{ display: none; positon: absolute; }

.fisheyeContainter{ background-color: #f00; height: 50px; width: 200px; left: 500px; position: absolute; }

#fisheye2{ position: absolute; width: 100%; bottom: 0px; }

</style>

fisheye itu letaknya di atas dan fisheye2 letaknya di bawah

sekarang contohnya, letakkan di <body>

menu atas

<div id=”fisheye”>

<div>

<a href=”#”><img src=”images/home.png” width=”30″ /><span>Home</span></a>

<a href=”#”><img src=”images/email.png” width=”30″ /><span>Email</span></a>

<a href=”#”><img src=”images/display.png” width=”30″ /><span>Display</span></a>

<a href=”#”><img src=”images/clock.png” width=”30″ /><span>Clock</span></a>

<a href=”#”><img src=”images/web.png” width=”30″ /><span>Web</span></a>

<a href=”#”><img src=”images/home.png” width=”30″ /><span>Home</span></a>

<a href=”#”><img src=”images/email.png” width=”30″ /><span>Email</span></a>

<a href=”#”><img src=”images/display.png” width=”30″ /><span>Display</span></a>

<a href=”#”><img src=”images/clock.png” width=”30″ /><span>Clock</span></a>

<a href=”#”><img src=”images/web.png” width=”30″ /><span>Web</span></a>

</div>

</div>

menu bawah

<div id=”fisheye2″>

<div>

<a href=”#”><span>Home</span><img src=”images/home.png” width=”30″ /></a>

<a href=”#”><span>Email</span><img src=”images/email.png” width=”30″ /></a>

<a href=”#”><span>Display</span><img src=”images/display.png” width=”30″ /></a>

<a href=”#”><span>Clock</span><img src=”images/clock.png” width=”30″ /></a>

<a href=”#”><span>Web</span><img src=”images/web.png” width=”30″ /></a>

</div>

</div>

mah letakkan skrip ini sebelum </body>

<script type=”text/javascript”>

$(document).ready(function(){

$(‘#fisheye’).Fisheye({

maxWidth: 50,

items: ‘a’,

itemsText: ‘span’,

container: ‘.fisheyeContainter’,

itemWidth: 40,

proximity: 90,

halign : ‘center’

})

$(‘#fisheye2’).Fisheye({

maxWidth: 60,

items: ‘a’,

itemsText: ‘span’,

container: ‘.fisheyeContainter’,

itemWidth: 40,

proximity: 80,

alignment : ‘left’,

valign: ‘bottom’,

halign : ‘center’

})

});

</script>

hasil jadinya klik ini http://interface.eyecon.ro/demos/fisheye.html

Author: Dewantara Mata Dunia

Indonesian Cyber Center

One Comment Add yours

  1. wordpress.com mengatakan:

    My partner and I absolutely love your blog and find nearly all of your
    post’s to be precisely what I’m looking for. can you offer
    guest writers to write content in your case?
    I wouldn’t mind producing a post or elaborating on a number of the subjects you write concerning here.
    Again, awesome web log!

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s