-
Animowane menu za pomocą funkcji jQuery - animate() cz.2
dodano 02.11.2008 / komentarzy: 13 / autor: m1chu
Kontynuując temat tworzenia menu z użyciem jQuery przedstawię Wam rozwiązanie Bedricha Riosa dotyczące pływającej nawigacji. Efekt ciut zmodyfikowany, lecz nadal opierający się i przedstawiający użycie funkcji
animate().
Floating navigation (nawigacja pływająca): kod XHTML
Drugi przykład będzie ciut bardziej zaawansowany. Pod tym względem, że przedstawię użycie dwóch menu razem na stronie. Jednego poziomego i drugiego pionowego. Elementy graficzne obydwu będą opierać się tylko i wyłącznie o arkusz stylów.
Dla usystematyzowania położenia obydwu list odpowiedzialnych za wyświetlanie nawigacji na stronie wstawimy je w element blokowy div. Ponieważ będziemy chcieli, aby każde menu w trakcie wyświetlania aktywnego elementu podświetlane było na inny kolor to każdemu z nich nadamy odpowiedni identyfikator. Odpowiednio będą to yellow (gdzie tekst będzie podświetlany na odcień żółtego) i blue (gdzie tekst będzie podświetlany na odcień niebieskiego).
Ostatecznie naszym zamiarem jest dodanie także przy każdym menu tytułu. Aby jednak skrypt mógł rozróżnić go od normalnego pola z odnośnikiem musimy zastosować znacznik nagłówka. W naszym wypadku jest to
h4.<div id="nav-block">
<ul class="floating-navigation" id="yellow">
<li><h4>Menu główne!</h4></li> <!– nagłówek menu poziomego –>
<li><a href="#" title="#">Odnośnik 1</a></li><li><a href="#" title="#">Odnośnik 2</a></li>
<li><a href="http://thenet.pl/" title="Technologiczne spojrzenie na świat" onclick="this.target=’_blank’;">thenet.pl</a></li>
<li><a href="http://after-all.eu/" title="Nowoczesny bash z cytatami z IRC" onclick="this.target=’_blank’;">after-all.eu</a></li>
</ul>
<ul class="floating-navigation" id="blue">
<li><h4>Menu boczne!</h4></li> <!– nagłówek menu pionowego –>
<li><a href="#" title="#">Odnośnik 1</a></li>
<li><a href="#" title="#">Odnośnik 2</a></li>
<li><a href="http://m1chu.eu/" title="Another devblog - programowanie, webdeveloping" onclick="this.target=’_blank’;">m1chu.eu</a></li>
<li><a href="http://utnij.eu/" title="Prawdopodobnie najlepszy serwis do skracania linków" onclick="this.target=’_blank’;">utnij.eu</a></li>
</ul>
</div>Floating navigation: kod CSS
ul.floating-navigation
{
list-style-type: none;
font-size: 12px;
margin: 30px 0px; /* odleglosc od lewej i prawej krawedzi */
padding-top: 10px;
& padding-left: 30px; /* padding zastepujacy margines w IE */
width: 985px; /* szerokosc wszystkich elementow poziomego menu + suma wymaganych szerokosci w efekcie "wjezdzania" (podawana w funkcji JS floatNav()) */
}ul.floating-navigation li h4,
ul.floating-navigation li a
{
display: block;
width: 150px;
padding: 5px 15px;
margin: 0;
margin-bottom: 2px;
}ul.floating-navigation li h4
{
color: #fff;
background: #333;
border: 1px solid #1a1a1a;
font-weight: normal;
font-size: 12px;
}ul.floating-navigation li a
{
color: #999;
border: 1px solid #1a1a1a;
background: #222;
text-decoration: none;
opacity: .7; /* opcjonalna przezroczystosc elementow */
}ul#yellow li
{
float: left; /* ustawienie w szeregu elementow listy w menu glownym - utworzenie menu poziomego */
}ul#yellow li a:hover
{
color: #ffff66; /* kolor tekst gdy myszka jest na obiekcie w menu poziomym */
background-color: #1e1e1e;
}ul#blue li a:hover
{
color: #006699; /* kolor tekst gdy myszka jest na obiekcie w menu pionowym */
background-color: #1e1e1e;
}Jedynym aspektem który należałoby wytłumaczyć jest magiczne
& padding-left: 30px;. Jest to wartość która tylko i wyłącznie pozycjonuje rozmieszczenie elementów którymi się tutaj zajmujemy. Zastanawiacie się za pewnie co robi to & przez tą regułą? Jest to tzw. hack IE który działaja podobnie jak najbardziej znany * i dzięki którym dana dyrektywa wykonywana jest tylko w przeglądarkach opartych na Internet Explorerze. Musieliśmy dokonać takiego zabiegu, gdyż inaczej marginesy w przeglądarce Microsoftu byłyby ustawione na 0 (z niewiedzy, złej implementacji, złośliwości jej programistów… jak zwał, tak zwał :D).Floating navigation: animacja dzięki jQuery
Podobnie jak w poprzednim typie nawigacji tutaj także trzeba skorzystać z ściągniętej już wcześniej biblioteki jQuery.
Tym razem jednak po załadowaniu DOM wywołamy kolejno dwie funkcje.
$(document).ready(function()
{
floatNav("ul#yellow", 25, 15, 150, .7, 500, "#fff");
floatNav("ul#blue", 25, 15, 150, .7, 500);
});Posiadają one siedem parametrów o niżej wymienionym przeznaczeniu.
floatNav(id_listy_menu, paddingLeft_gdy_kursor_jest_na_obiekcie, paddingLeft_gdy_kursor_jest_poza_obiektem, czas_wykonywania_animacji, mnoznik_kolejnego_animowania_wlotu_elementow_po_zaladowaniu_DOM [, kolor_napisow_menu_po_kliknieciu]);Ostatni parametr jest opcjonalny. W wypadku, gdy nie zostanie podany po kliknięciu zostanie zwrócony domyślny kolor. Należy zdawać sobie także sprawę, że ten sposób zadziała tylko w wypadku otwierania stron w oknach innych niż te używane przez skrypt.
function floatNav(float_nav_id, float_hover_out, float_hover_in, float_run_time, float_multiplier, float_click_effect, float_clicked_color)
{
var list_elements = float_nav_id + " li";
var link_elements = list_elements + " a";
var timer = 0; // czas poczatkowy
$(list_elements).each(function(i) // wczytywanie elementow po zaladowaniu strony
{
timer = (timer * float_multiplier + float_run_time); // zmienna przetrzymujaca czas wczytania elementu zwiekszana o wartosc sumy mnoznika i czas dzialania animacji w stosunku do czasu wczytania poprzedniego elementu
$(this).css("margin-left","-180px"); // wczytanie od strony lewego marginesu i kolejno efekt "wstrzasniecia" z jednej pozycji do drugiej i z powrotem
$(this).animate({ marginLeft: "0" }, timer);
$(this).animate({ marginLeft: float_hover_out }, timer);
$(this).animate({ marginLeft: "0" }, timer);
});var link_hover_width = $(link_elements).width(); // pobranie szerokosci wejsciowej elementu listy
$(link_elements).hover(
function()
{
$(this).animate({ paddingLeft: float_hover_out, opacity: 1, width: link_hover_width-(float_hover_out-float_hover_in) }, float_run_time); // w trakcie pojawienia sie kursora na elemencie nastepuje zmiana przezroczystosci na pelna, przesuniecie w prawo oraz zmniejszenie szerokosci elementu
},
function()
{
$(this).animate({ paddingLeft: float_hover_in, opacity: float_multiplier, width: link_hover_width }, float_run_time); // przywrocenie do wartosci podstawowych po przeniesieniu kursora poza menu
}
);
$(link_elements).click(
function()
{
$(this).fadeOut(float_click_effect); // efekt zanikania
$(this).fadeIn((float_click_effect/2)); // efekt pojawiania sie w czasie dwukrotnie mniejszym niż w trakcie efektu zanikania
if ( float_clicked_color != "" )
{
$(this).css("color", float_clicked_color); // zmiana koloru kliknietego elementu o ile podany zostal ostatni parametr funkcji nadrzednej
}
}
);
}$(document).ready(function()
{
floatNav("ul#yellow", 25, 15, 150, .7, 500, "#fff");
floatNav("ul#blue", 25, 15, 150, .7, 500);
});Jumping navigation: wynik!
Także tym razem przygotowałem Wam praktyczne zobrazowanie tego co chcieliśmy osiągnąć. O! tutaj, zapraszam.
Kurde! Tyle czytania i nie działa! Dlaczego?!
Obydwie metody testowałem na poniższy przeglądarkach i na wszystkich działały prawidłowo:
- Firefox 3.0.3,
- Opera 9.60
- Safari 3.1.2
- SeaMonkey 1.1.9
- Flock 1.1.1
- Sleipnir 2.7.2
Mogę domniemać, że problem tkwi w użytkowaniu kilku frameworków naraz. Problem ten opisywałem tutaj i radzę od jego przeczytania zacząć rozpoznawanie błędu :]
pomysłodawcą i autorem efektu jest Bedrich Rios
zmodyfikował, opisał i stworzył przykłady - 2008, m1chu
artykuł udostępniony na licencji CC dla vivee.info i m1chu.eu
Komentarze / dodaj komentarz
autor: agressiva
dodano: 08.11.2008
m1chu - jak możesz to nadaj divovi “yellow” i “blue” konkretna szerokość, bo w FX2 jest problem http://www.i-point.nazwa.pl/host/upload/1226075906927189.png
autor: m1chu
dodano: 08.11.2008
Dodałem ogólnie dla bloku
ul.floating-navigationstałą szerokość wartości wszystkich elementów poziomych + efekt ich “wjeżdżania” (dla przykładu tutaj wystarczy). Z tego co widzę na FF2 działa: http://utnij.eu/ff2_floatingnav/ - także na Chrome 0.3, MSIE8, MSIE6 i FX1.5. Dzięki za zwrócenie uwagi na błąd :]autor: im4t3
dodano: 13.11.2008
Gdzie i jak mam załadować kod skryptu i jak sie mam posłużyń jquery i skad go pobrać… ?? prosze o pomoc
autor: agressiva
dodano: 13.11.2008
a) http://jquery.com/
b) skrypty i do jquery i do stworzonych funkcji obsługiwanych przez tą bibliotekę podaje sie w nastepujacy sposob
<script type="text/javascript" src="jquery-1.2.6.js"></script><script type="text/javascript" src="floating-navigation.js"></script>Musisz tylko uważać, aby nazwy plików i namiary były takie jakie zastosowałeś u siebie na serwerze…
I polecam czasami zerknąć w kod strony naszych materiałów pomocniczych - tam wszystko jest pokazane…
autor: im4t3
dodano: 13.11.2008
Dzięki… a skrypt umieszczam w jakiej sekcji … w body czy head… czy jeszcze gdzieś indziej
autor: agressiva
dodano: 13.11.2008
Nie wiem po co Ty się zabierasz za takie rzeczy jeżeli nie znasz tak fundamentalnych podstaw…
I jak widze nie zastosowałes się do mojej wyżej wymienionej rady odnośnie źródła strony z materiałem pomocniczym: http://use.m1chu.eu/examples/-jquery/floating-navigation/
Tak WIDAĆ wszystko…
I polecam kliknąć tutaj –> http://webmaster.helion.pl/kurshtml/struktur/struktur.htm
btw nie korzystam z gg w sposób masowy i nie udzielam porad za pomocą tego komunikatora… od tego mam maila i odpisuję jak tylko znajdę czas, dłuższy niż 15 min.
autor: im4t3
dodano: 14.11.2008
Sory ale dopiero zaczynam… Ty masz juz 5 la tdoswiadczenia więc dla Ciebie to jest cos prostego…
…a skad mam wziąśc ten skrypt “floating-navigation.js” nigdzie tego nie moge znaleźć ;/
“I polecam czasami zerknąć w kod strony naszych materiałów pomocniczych - tam wszystko jest pokazane…”
tego tez nie kapuje… jak mam niby zerknąć w ten kod?
autor: im4t3
dodano: 14.11.2008
Okey udało mi sie
… animuje mi juz 
wystarczyło troche posiedziec 
dzieki za pomoc
pozdrwiam
autor: agressiva
dodano: 14.11.2008
Posiedziec? kazda przegladarka ma coś takiego jak podglad źródła strony… klikamy na strone prawym klawiszem myszy i tadammm widzimy źródło strony.
Poza tym za pomocą pomyslenia, można wywnioskować , że można przez wpisanie dobrego adresu (podejrzanego za pomocą magicznego źródła strony) zobaczyc zawartość okreslonym plików podczepionych do stron / przykładów. Oczywiście nie licząc php, które nie jest pokazywane (byłoby to bardzo niebezpiecznie), ale chociazby skrypty js’owe można zobaczyc bez problemu i dowiedziec sie jak autor coś rozwiazał…
PS. nie mam 5 lat doświadczenia - ciut mniej… moze 4, ale to o niczym nie świadczy…
PS. micha poproszę, aby przygotował paczuszkę ze źródłem do tego między innym itutoriala, aby kazdy kto chce mógł to ściagnac i mieć to na talerzu… bo inaczej “cegła”.
autor: m1chu
dodano: 14.11.2008
Nie jestem zwolennikiem dawania gotowych rozwiązań (chociaż wiem, że to przyczynia się do pojawienia się większej ilości “czytelników”), bo ludzie powinni uczyć się poprzez czytany tekst. No ale jak kobieta prosi, to się nie odmawia: http://get.m1chu.eu/-examples/-jquery/floating-navigation/get_fn.php
Po za tym im4t3 niektóre odpowiedzi na swoje pytania masz w poprzednim moim wpisie dotyczącym tworzenia menu: http://vivee.info/2008/10/31/animowane-menu-za-pomoca-funkcji-jquery-animate-cz1/
Pozdrawiam,
m1chu
autor: agressiva
dodano: 14.11.2008
Michu - pamietaj, internauta jest leniwy
autor: Flanker
dodano: 11.12.2008
Dzięki za ciekawy tutorial. Naprawdę fajna rzecz
autor: Świąteczny prezent | blog | flankerds.com - wszystko co związane z tworzeniem stron w internecie
dodano: 27.12.2008
[...] Krótki tutorial w języku Polskim odnajdziecie na stronie vivee.info. [...]
Napisz komentarz