[jQuery] Menu Mac OS X Drukuj
Ocena użytkowników: / 2
SłabyŚwietny 
Wpisany przez Roszpun   
wtorek, 13 lipca 2010 21:24

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

view source
print?
001.*
002. 
003.    {
004. 
005.        margin: 0;
006. 
007.        padding: 0;
008. 
009.    }
010. 
011.    body
012. 
013.    {
014. 
015.        background: #e2e2e2;
016. 
017.        height: 100%;
018. 
019.        font-family: Arial, Helvetica, sans-serif;
020. 
021.        font-size: 12px;
022. 
023.    }
024. 
025.    .fisheye{
026. 
027.        text-align: center;
028. 
029.        height: 50px;
030. 
031.        position: relative;
032. 
033.    }
034. 
035.    a.fisheyeItem
036. 
037.    {
038. 
039.        text-align: center;
040. 
041.        color: #000;
042. 
043.        font-weight: bold;
044. 
045.        text-decoration: none;
046. 
047.        width: 40px;
048. 
049.        position: absolute;
050. 
051.        display: block;
052. 
053.        top: 0;
054. 
055.    }
056. 
057.    a.fisheyeItem2
058. 
059.    {
060. 
061.        text-align: center;
062. 
063.        color: #000;
064. 
065.        font-weight: bold;
066. 
067.        text-decoration: none;
068. 
069.        width: 40px;
070. 
071.        position: absolute;
072. 
073.        display: block;
074. 
075.        bottom: 0;
076. 
077.    }
078. 
079.    .fisheyeItem img
080. 
081.    {
082. 
083.        border: none;
084. 
085.        margin: 0 auto 5px auto;
086. 
087.        width: 100%;
088. 
089.    }
090. 
091.    .fisheyeItem2 img
092. 
093.    {
094. 
095.        border: none;
096. 
097.        margin: 5px auto 0 auto;
098. 
099.        width: 100%;
100. 
101.    }
102. 
103.    .fisheyeItem span,
104. 
105.    .fisheyeItem2 span
106. 
107.    {
108. 
109.        display: none;
110. 
111.        positon: absolute;
112. 
113.    }
114. 
115.    .fisheyeContainter
116. 
117.    {
118. 
119.        background:#efefef;
120. 
121.        height: 50px;
122. 
123.        width: 200px;
124. 
125.        left: 500px;
126. 
127.        position: absolute;
128. 
129.    }
130. 
131.    .fisheyeContainter img:hover{opacity:1;}
132. 
133.    .fisheyeContainter img{opacity:0.5;}
134. 
135.    #fisheye2
136. 
137.    {
138. 
139.        position: absolute;
140. 
141.        width: 100%;
142. 
143.        bottom: 0px;
144. 
145.    }
146. 
147.    

W Sekcje body natomiast:

Listę z obrazkami:

view source
print?
01.<a class="fisheyeItem" href="#"><img src="/images/bar/home.png" width="30" />Home</a>
02. 
03.<a class="fisheyeItem" href="#"><img src="/images/bar/email.png" width="30" />Email</a>
04. 
05.<a class="fisheyeItem" href="#"><img src="/images/bar/display.png" width="30" />Display</a>
06. 
07.<a class="fisheyeItem" href="#"><img src="/images/bar/clock.png" width="30" />Clock</a>
08. 
09.<a class="fisheyeItem" href="#"><img src="/images/bar/web.png" width="30" />Web</a>
10. 
11. 
12. 
13.<a class="fisheyeItem" href="#"><img src="/images/bar/home.png" width="30" />Home</a>
14. 
15.<a class="fisheyeItem" href="#"><img src="/images/bar/email.png" width="30" />Email</a>
16. 
17.<a class="fisheyeItem" href="#"><img src="/images/bar/display.png" width="30" />Display</a>
18. 
19.<a class="fisheyeItem" href="#"><img src="/images/bar/clock.png" width="30" />Clock</a>
20. 
21.<a class="fisheyeItem" href="#"><img src="/images/bar/web.png" width="30" />Web</a>
22. 
23. 
24. 
25. 
26. 
27. 
28. 
29. 
30. 
31. 
32. 
33. 
34.<a class="fisheyeItem2" href="#">Home<img src="/images/bar/home.png" width="30" /></a>
35. 
36.<a class="fisheyeItem2" href="#">Email<img src="/images/bar/email.png" width="30" /></a>
37. 
38.<a class="fisheyeItem2" href="#">Display<img src="/images/bar/display.png" width="30" /></a>
39. 
40.<a class="fisheyeItem2" href="#">Clock<img src="/images/bar/clock.png" width="30" /></a>
41. 
42.<a class="fisheyeItem2" href="#">Web<img src="/images/bar/web.png" width="30" /></a>

JS

view source
print?
01.$(document).ready(
02. 
03.            function()
04. 
05.            {
06. 
07.                $('#fisheye').Fisheye(
08. 
09.                    {
10. 
11.                        maxWidth: 50,
12. 
13.                        items: 'a',
14. 
15.                        itemsText: 'span',
16. 
17.                        container: '.fisheyeContainter',
18. 
19.                        itemWidth: 40,
20. 
21.                        proximity: 90,
22. 
23.                        halign : 'center'
24. 
25.                    }
26. 
27.                )
28. 
29.                $('#fisheye2').Fisheye(
30. 
31.                    {
32. 
33.                        maxWidth: 60,
34. 
35.                        items: 'a',
36. 
37.                        itemsText: 'span',
38. 
39.                        container: '.fisheyeContainter',
40. 
41.                        itemWidth: 40,
42. 
43.                        proximity: 80,
44. 
45.                        alignment : 'left',
46. 
47.                        valign: 'bottom',
48. 
49.                        halign : 'center'
50. 
51.                    }
52. 
53.                )
54. 
55.            }
56. 
57.        );

Obrazki możecie sami sobie powklejać ;)

Demo na stronie autora:Klik
Strona autora:Klik

Moje demo: Klik
Pobierz skrypt:Klik

Pozdrawiam Daniel 'Roszpun' Szerszeń

Tags:

Zobacz podobne artykuły

< Poprzednia   Następna >