Artykuły:

  • data publikacji: 31.10.2008

    Animowane menu za pomocą funkcji jQuery – animate() cz.1

    kategoria: Skrypty client-side, XHTML/CSS autor: m1chu

    Mając do dyspozycji jQuery możemy dokonać wielu mniej lub bardziej oryginalnych modyfikacji dla urozmaicenia wyglądu tworzonej przez nas nawigacji na stronie. Funkcja animate() znakomicie nadaje się do kreowania animacji różnego typu relatywnie lub absolutnie pozycjonowanych elementów pozwalając na operowanie np. na ich szerokości, czy wysokości.

    demo

    Słowem wstępu o obiekcie naszych zainteresowań ;]

    animate() - funkcja zezwalająca na wykonywanie animacji elementów strony. Pozwala na działanie na właściwościach stylów takich jak szerokość (width), wysokość (height), padding, margines (margin), krawędź (border), górny brzeg elementu (top), czy wielkość czcionki (font-size). Dozwolone są więc właściwości przyjmujące wartości numeryczne (bądź "toggle", "show" lub "hide"), a zapis ich nazw musi być w formie CamelCase, czyli poprzez bikapitalizację pojęć złożonych (usunięcie spacji i zastąpienie pierwszych znaków kolejnych słów dużymi literami). Przykładowo odpowiednikiem margin-right będzie marginRight. Od wersji 1.2 jQuery pozwala je animować poprzez nadanie w.w. wartości także w postaci em i %. Wprowadzono w nim także krótkie zwiększanie ("+=", np. width: "+=5px") i zmniejszanie ("-=", np. height: "-="+value) wartości.

    Przygotowanie grafiki...

    Po przeczytaniu tego artykułu dowiesz się jak utworzyć dwa typy różnych menu oparty na frameworku jQuery, CSS-ie i (X)HTML-ie. Przykłady zastosowane w artykule będą przystosowane do XHTML-a/HTML-a wysyłanego jako text/html, a także do XHTML-a wysyłanego jako application/xhtml+xml.

    Pierwszy z naszych efektów będzie opierał się na gotowych elementach graficzny oraz dla ukazania zwiększonych możliwości na jednej grafice będącej logiem konkretnego serwisu. Zastosujemy w tym przypadku opisywany już na moim blogu efekt sliding-doors (także wyjaśniany na vivee) dzięki któremu pozbędziemy się problemu związanego z nadmiernym ładowaniem grafik.

    Potrzebne będzie nam sześć obrazków. Trzy z których będziemy korzystać dla wyświetlania w stanie nie najechania myszką, w stanie najechania i w stanie kliknięcia (bądź wyboru za pomocą tabulatora), oraz drugie trzy używane w takiej samej kolejności, ale które będą stworzone specjalnie dla przykładu użycia grafiki oddzielnego typu dla konkretnego przycisku. Należy pamiętać, aby realna wysokość grafiki była co najmniej tak duża, żeby spełniała potrzeby po, a nie przed pojawieniem się kursora nad nią. Tak więc, jeśli np. w normalnej pozycji ma ona 57px, a po rozszerzeniu o 10px więcej to szerokość jednego, pojedynczego obrazu nie powinna być mniejsza niż 67px.

    Cięcie podstawowego typu grafiki

    Jak widać na wyżej załączonym screenie dzielimy przyciski na trzy kolumny - lewą, prawą i środek. Dwie pierwsze w naszym rozwiązaniu będą stałe, a środek będzie powielany w arkuszu stylów względem osi X (repeat-x). W przypadku wspomnianego już przycisku specjalnego ten podział nie istnieje (zapisujemy całość), gdyż szerokość generowanego w HTML-u rozwiązania będzie niezmienna.

    Tworzenie specjalnego typu grafiki

    Jumping navigation (nawigacja "podskakująca"): kod XHTML

    Kod struktury menu oprę o znaczniki listowania które oczywiście należy wstawić w sekcję body.

    <ul id="jumping-nav">
            <li><a href="#" title="#"><span class="left"></span>Link 1<span class="right"></span></a></li>
            <li><a href="#" title="#"><span class="left"></span>Link 2<span class="right"></span></a></li>
            <li><a href="http://m1chu.eu/" title="Programowanie, webdeveloping"><span class="left"></span>m1chu.eu<span class="right"></span></a></li>
            <li id="with-image"><a href="http://utnij.eu/" title="Prawdopodobnie najlepszy serwis do skracania linków"></a></li>
    </ul>

    Jak można zauważyć w trzech pierwszych odnośnikach nawigacji na stronie znajduje się tekst oraz znaczniki span. Odpowiadają one za wyświetlenie lewej oraz prawej krawędzi tła każdego z przycisków menu. W wypadku ostatniego linka nie jest to potrzebne, gdyż tło jest jednolitej szerokości, a tekst naniesiony jest bezpośrednio na nim. Specjalny element tej listy oznaczony jest ID with-image.

    Jumping navigation: kod CSS

    ul#jumping-nav
    {
            position: relative;
            float: left; /* przemianowanie listy na szeregową */
            overflow: hidden;
            border-bottom: 1px solid #fff;
            padding: 0 10px;
            list-style: none;
            height: 4em; /* szerokosc przycisku */
    }

    ul#jumping-nav li, ul#jumping-nav li a
    {
            position: relative;
            float: left; /* przemianowanie listy na szeregową */
    }

    ul#jumping-nav li
    {
            background: none;
            margin: 0;
            padding: 0;
            padding-left: 1px; /* 1-pikselowe rozdzielenie dwoch przyciskow od siebie */
            top: 15px; /* odleglosc od gornej krawedzi danej listy */
    }

    ul#jumping-nav li a
    {
            display: block;
            background: url('srodkowa_czesc_grafiki.png') 0 0 repeat-x; /* adres do grafiki srodka przycisku powtarzany na osi X */
            padding: 0.9em 1.1em;
            text-decoration: none;
            color: #129397;
            height: 57px;
    }

    ul#jumping-nav li a span.left {
            display: block;
            /* pozycja absolutna */
            position: absolute;
            background: url('lewa_krawedz_grafiki.png') 0 0 no-repeat; /* adres do grafiki lewej krawedzi przycisku */
            height: 57px;
            width: 12px;
            /* ustawienie grafiki lewej krawedzi w pozycji lewego, gornego rogu elementu listy */
            left: 0;
            top: 0;
            z-index: 10; /* ustawienie grafiki granicznej nad powielana, srodkowa */
    }

    ul#jumping-nav li a span.right {
            display: block;
            /* pozycja absolutna */
            position: absolute;
            background: url('prawa_krawedz_grafiki.png') 0 0 no-repeat; /* adres do grafiki prawej krawedzi przycisku */
            height: 57px;
            width: 12px;
            /* ustawienie grafiki prawej krawedzi w pozycji prawego, gornego rogu elementu listy */
            right: 0;
            top: 0;
            z-index: 10; /* ustawienie grafiki granicznej nad powielana, srodkowa */
    }

    /* zmiany dokonywane przy najechaniu mysza na przycisk (grafika srodkowa + grafiki krawedzi) */
    ul#jumping-nav li a:hover, ul#jumping-nav li a:hover span
    {
            background-position: 0 -57px; /* przesuniecie pozycji tla o 57px w dol */
            color: #3f5f5a;
    }

    /* zmiany dokonywane przy kliknieciu mysza na przycisk lub po zaznaczeniu jej tabulatorem (grafika srodkowa + grafiki krawedzi) */
    ul#jumping-nav li a:active, ul#jumping-nav li a:active span, ul#jumping-nav li a:focus, ul#jumping-nav li a:focus span
    {
            background-position: 0 -114px; /* przesuniecie pozycji tla o 114px w dol */
            color: #333;
    }

    Stosowne komentarze pozostawiłem w kodzie. Wytłumaczyć należałoby za to dokładniej zastosowaną w bloku elementu listy odległość od górnej granicy tejże listy.

    top: 15px; /* odleglosc od gornej krawedzi danej listy */

    Odległość ta pozwala na ustalenie pozycji wyjściowej przycisków i będzie tak samo na stałe ustawiona w kodzie jQuery. Odejmując od niej otrzymamy pożądany przez nas efekt podniesienia przycisku po najechaniu na niego kursorem.

    O czymś jednak pozornie zapomniałem w powyższym kodzie. Mianowicie o wspomnianym już przycisku specjalnym znajdującym się w tagu li o ID with-image. Sprawa jest prosta, a jej rozwiązanie będzie opierać się o dodanie kodu opartego na dwóch ostatnich blokach podanych w w.w. kodzie CSS.

    ul#jumping-nav li#with-image a
    {
            display: block;
            padding: 0.9em 1.1em;
            background: url('grafika_specjalna.png') 0 0 no-repeat; /* brak powtarzania w jakiejkolwiek osi */
            color: #333;
            text-decoration: none;
            height: 57px;
            width: 117px; /* okreslona na stale szerokosc przycisku */
    }

    /* zmiany dokonywane po najechaniu mysza na przycisk specjalny */
    ul#jumping-nav li#with-image a:hover
    {
            background-position: 0 -57px;
    }

    /* zmiany dokonywane przy kliknieciu mysza na przycisku specjalnym lub po zaznaczeniu jej tabulatorem */
    ul#jumping-nav li#with-image a:active, ul#jumping-nav li#with-image a:focus
    {
            background-position: 0 -114px;
    }

    Jumping navigation: animacja dzięki jQuery

    Po raz kolejny o naszej tytułowej funkcji, tym razem wg. specyfikacji: animate( parametry, [czas_wykonania], [styl_animacji], [akcja_zwrotna] )

    • parametry - elementy animacji do wykonania (będące odpowiednikami dyrektyw CSS), np. top, left, marginLeft, width, height, czy opacity. Podawane są w formie nazwa: wartosc i rozdzielane przecinkami.
    • czas_wykonywania - czas w milisekundach (lub w postaci wbudowanego ciągu znaków: "slow", "normal" lub "fast) wykonywania animacji.
    • styl_animacji (opcjonalny) - styl animacji, wymaga odpowiedniej wtyczki jQuery obsługującej tą opcję!
    • akcja_zwrotna (opcjonalny) - funkcja zwracana wraz z zakończeniem animacji.

    Przykład:

    $("div").animate({
          left: "15px", opacity: .5
    }, 300, "easing", function(){alert("koniec!");});

    Na początek należy ściągnąć i zaimportować na swoją stronę najnowszą wersję jQuery. Pobrać ją można np. stąd.

    <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <!-- jeżeli biblioteka będzie znajdować się w głównym katalogu strony -->

    Nasz kod będzie przeznaczony dla jednego tego typu menu na danej podstronie. Po załadowaniu DOM zostanie wywołane zdarzenie :hover jQuery, a w nim funkcje wykonywane kolejno po najechaniu i po usunięciu kursora myszy z danego przycisku.

    $(document).ready(function() {
        $('ul#jumping-nav li').hover(function() {
            $(this).animate({ top : "-=10px" }, 150); // przesuniecie krawedzi przycisku o 10px w gore w czasie 150ms
        }, function() {
            $(this).animate({ top : "15px" }, 150); // przesuniecie krawedzi do pozycji wejsciowej w czasie 150ms
        });
    });

    Jumping navigation: rezultat!

    Wynik jaki powinniście otrzymać po złożeniu tych części kodu w całość możecie podejrzeć tutaj.

    Jumping navigation w przykładzie

    copyright © 2008, m1chu

    udostępnione na licencji CC dla vivee.info i m1chu.eu

    Udostępnij ten artykuł:
    • Print
    • Digg
    • del.icio.us
    • Facebook
    • Mixx
    • Google Bookmarks
    • Gwar
    • RSS
    • Technorati
    • Twitter
    • Wykop

  • Podobne wpisy - Vivee blog o webmasteringu, grafice i fotografii

    Zobacz podobne wpisy:

  • This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

    15 Responses to “Animowane menu za pomocą funkcji jQuery – animate() cz.1”

    1. Burger pisze:
      31 10 2008 o 21:42

      To jest dobre, może się przydać :)

      Odpowiedz
    2. palmiak pisze:
      31 10 2008 o 21:54

      Druga część też jest dobra, zapewniam. M1chu naprawdę się postarał.

      Odpowiedz
    3. agressiva pisze:
      31 10 2008 o 21:59

      Wszystko sie może przydac, tylko dobrze byłoby z tego rzeczywiscie czasami korzystać… a bardzo rzadko sie z tym spotykam – szkoda…

      Druga część jest już znana jak dla mnie, jeżeli niuektórzy korzystają z anglojezycznych stron to też będą wiedzieli skąd to jest. Jak dla mnie zwykłe tłumaczenie, ale jak to się już przyjęło “może się przydać”…

      Odpowiedz
    4. m1chu pisze:
      31 10 2008 o 22:13

      Oczywiście nie będę zaprzeczał, pomysł na menu nie jest mój (odnosi się to oczywiście do słów agressivy) :D Nie mniej jednak sposób opisu, treść, wykonane przykłady, malutkie zmodowania i grafiki (sic! ;]) są mojego autorstwa. Mam nadzieję, że jest to dostrzegalne i nie macie mi tego za złe :] Bo nawet jeśli opieram to co piszę na innych artach to staram się, żeby nie było to proste “kopiuj, wklej z translacją”.

      Pozdrawiam,
      m1chu

      Odpowiedz
    5. agressiva pisze:
      31 10 2008 o 22:56

      Ja staram się nie powielać tego co już jest napisane w sposób podobny – szczególnie jezeli chodzi o indywidualne rozwiązania. Myślelismy kiedyś o tłumaczeniu ale na razie daliśmy sobie z tym spokój. Nie wiem jak inni ale ja zanim wykorzystam czyjąś pracę piszę i pytam czy autor wyraża zgodę na publikację z wykorzystaniem danej “rzeczy”. Taki mój przyklad to skóry Denisa z Rosji, którego grzecznie zapytałam czy nie miałby nic przeciwko stworznia polskiej wersji jego theme wordpressowych – milo nam było jak wyraził nie tyle zgodę co zadowolenie, ze ktoś jest w stanie docenić jego wysiłek i jeszcze przyczynić się do rozszerzenia projektu.
      Nie wiem czy w przypadku Nettuts byłoby takie uprzejme jak Denis – już kiedyś podjęlismy próbę kontaktu w podobnej sprawie jednak bez jakiegokolwiek znaku. Szkoda, widać wielka firma – wielka duma.

      Odpowiedz
    6. m1chu pisze:
      31 10 2008 o 23:59

      Agressiva w prawa autorskich NetTuts napisane jest, że zakazuje się kopiowania całego tutoriala w postaci angielskiego, czy przełożonej. To nie jest czysta translacja, a własna interpretacja danego efektu. Po prostu spodobała mi się on i postanowiłem go we własnej formie wytłumaczyć. I oczywiście masz rację, że mogłem spytać autora – po prostu nie pomyślałem w tą stronę, że jeżeli opieram się na samym wspomnianym już efekcie, to łamię czyjeś prawa. Może ciut za bardzo się zapędziłem…

      Jeśli nie będziecie chcieli z tego powodu opublikować artykułu, zrozumiem. Następnym razem postaram się napisać kod całkowicie od nowa, modyfikując działanie tak, żeby jak najmniej przypominało pierwowzór. O ile będę się na czymś wzorował, oczywiście.

      Reasumując nie miałem złych intencji. Naniosłem stosowną adnotację do artykułu.

      Odpowiedz
    7. Radziu pisze:
      23 05 2009 o 09:52

      Witam.
      Mam taką sprawę, to mi kompletnie nie działa :D
      W kodowaniu i tych sprawach jestem dość słaby…
      Nie wiem czemu nie działa, widziałem ze potrzebny jest plik jumpingnavigation.js no i właśnie skąd go wziąść ? może dlatego mi nie działa…
      Pozdrawiam i proszę o szybką odpowiedź :)

      Odpowiedz
    8. m1chu pisze:
      23 05 2009 o 11:19

      Że tak spytam, czytałeś w ogóle tekst, czy tylko na szybko próbowałeś wklejać do kodu co się da?

      W przedostatnim paragrafie na samym dole jest porcja kodu dotyczącego pliku o który pytasz.

      Po za tym na samej górze masz podgląd działającego rozwiązania. Wystarczy podejrzeć w przeglądarce z czego składa się HTML i jakie pliki *.js zawiera.

      Odpowiedz
    9. Radziu pisze:
      23 05 2009 o 14:44

      Efekt już mi działa, szkoda tylko że obrazek sie nie wyświetla ;/
      Mam wszystko tak jak w tutorialu, i nie wrzucam jak popadnie…

      Odpowiedz
    10. Radziu pisze:
      23 05 2009 o 14:52

      dobra już sobie poradziłem, dzięki za tutka, przydatny :)

      Odpowiedz
    11. Kuba pisze:
      27 06 2009 o 00:03

      Witam.
      Czy istnieje możliwość w jakiś sposób zmodyfikowania owego animowanego menu, by wzbogacić je o rozwijane menu w przypadku niektórych elementów? Napotkałem problem przy zagnieżdżeniu klasy definiującej efekt rozwijanego menu i niestety chowa się ono pod spód i nie mam pomysłu jak ustawić by po najechaniu na przycisk / kliknięciu na niego wysuwało się menu.

      Pozdrawiam

      Odpowiedz
    12. m1chu pisze:
      29 06 2009 o 15:33

      Nie wiem co znaczy pod spód, mogę tylko próbować sobie to wyobrazić. Pokombinuj z warstwami w CSS – służy do tego z-index. Nie testowałem, więc porada czysto teoretyczna :]

      Odpowiedz
    13. Alar pisze:
      25 02 2010 o 18:08

      Witam. Sorki że odświeżam wątek ale mam małe pytanie. Jak zrobić do tego w css klasę aktywną tak aby jeden przycisk w menu był wysunięty ??

      Odpowiedz
    14. Kuba pisze:
      8 04 2010 o 10:52

      A co mi tam. Zapytam.

      Czy jest gdzieś opublikowany taki gotowiec?

      Odpowiedz
    15. Maciuś pisze:
      19 06 2010 o 08:40

      Kurcze ja tez z kce zobaczyć a link nie działa.
      Momo….

      Odpowiedz

    Leave a Reply

Komentarze

Kategorie

Top 10

  • CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
  • Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
  • Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
  • Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
  • Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
  • Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
  • Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
  • Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
  • Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
  • Skrypty client-side
  • Skrypty server-side
  • Tutoriale
  • Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
  • Wieczór z Open Source
  • Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
  • Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
  • XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.

Najnowsze newsy

Wieczór z Open Source 2010

Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej

Grafart.org i WACOM zapraszają na konkursy!

Witam!

Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej

Zapraszamy na forum graficzne Graffika.pl

Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej

Polecane strony

copyright vivee.info      |       all rights reserved      |       design by water design