|
Na wstępie chciałbym powiedzieć, iż jest to mój pierwszy artykół na Youthcoders.net, więc proszę za ostro nie oceniać ;)
Szperając po sieci i szukając fajnych dodatków do strony natrafiłem na coś bardzo ciekawego. Otóż chyba każdy z nas widział, a przynajmniej kojaży menu z Komputerów firmy Apple. Właśnie na takie menu natrafiłem, jest napisane w jQuery oraz CSS. Obrazki z menu zmieniamy w liście, jak przy zmienianu menu. Lekko zmodyfikowałem CSS aby menu nieco bardziej przypominalo te z Mac OS X. Skrypt jest na licencji GPL więc można śmiało użyć do swojej strony.
Dobra mniej pisania więcej działania :)
Potrzebne pliki: jquery.js oraz interface.js.
W sekcję head wklejamy następujące rzeczy:
CSS
*
{
margin: 0;
padding: 0;
}
body
{
background: #e2e2e2;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.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:#efefef;
height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
.fisheyeContainter img:hover{opacity:1;}
.fisheyeContainter img{opacity:0.5;}
#fisheye2
{
position: absolute;
width: 100%;
bottom: 0px;
}
W Sekcje body natomiast:
Listę z obrazkami:
<a class="fisheyeItem" href="#"><img src="/images/bar/home.png" width="30" />Home</a>
<a class="fisheyeItem" href="#"><img src="/images/bar/email.png" width="30" />Email</a>
<a class="fisheyeItem" href="#"><img src="/images/bar/display.png" width="30" />Display</a>
<a class="fisheyeItem" href="#"><img src="/images/bar/clock.png" width="30" />Clock</a>
<a class="fisheyeItem" href="#"><img src="/images/bar/web.png" width="30" />Web</a>
<a class="fisheyeItem" href="#"><img src="/images/bar/home.png" width="30" />Home</a>
<a class="fisheyeItem" href="#"><img src="/images/bar/email.png" width="30" />Email</a>
<a class="fisheyeItem" href="#"><img src="/images/bar/display.png" width="30" />Display</a>
<a class="fisheyeItem" href="#"><img src="/images/bar/clock.png" width="30" />Clock</a>
<a class="fisheyeItem" href="#"><img src="/images/bar/web.png" width="30" />Web</a>
<a class="fisheyeItem2" href="#">Home<img src="/images/bar/home.png" width="30" /></a>
<a class="fisheyeItem2" href="#">Email<img src="/images/bar/email.png" width="30" /></a>
<a class="fisheyeItem2" href="#">Display<img src="/images/bar/display.png" width="30" /></a>
<a class="fisheyeItem2" href="#">Clock<img src="/images/bar/clock.png" width="30" /></a>
<a class="fisheyeItem2" href="#">Web<img src="/images/bar/web.png" width="30" /></a>
JS
$(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'
}
)
}
);
Obrazki możecie sami sobie powklejać ;)
Demo na stronie autora:Klik
Strona autora:Klik
Moje demo: Klik
Pobierz skrypt:Klik
Pozdrawiam Daniel 'Roszpun' Szerszeń
|
