|
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ń
|
English
Arabic
Bulgarian
Croatian
Czech
Danish
Dutch
Finnish
French
German
Greek
Hindi
Italian
Japanese
Korean
Norwegian
Polish
Portuguese
Romanian
Russian
Spanish
Swedish
Catalan
Filipino
Hebrew
Indonesian
Latvian
Lithuanian
Serbian
Slovak
Slovenian
Ukrainian
Vietnamese
Albanian
Estonian
Galician
Hungarian
Maltese
Thai
Turkish
Persian
Afrikaans
Malay
Swahili
Irish
Welsh
Belarusian
Icelandic
Macedonian
Yiddish
Armenian
Azerbaijani
Basque
Georgian
Haitian Creole
Urdu
Chinese (S)
Chinese (T)
