W jaki sposób stworzyć nawigację poziomą z ciekawym efektem „scroll” w CSS3?


3 września 2013 / Michał Kortas


Tutorial ten przygotowałem na wyraźną potrzebę i prośbę jednego z naszych forumowiczów, który poszukiwał sposobu na przygotowanie nawigacji na stronie internetowej, która cechować się będzie ciekawym efektem scroll’owania, kiedy wskażemy któryś z jej elementów. Podjąłem to, bądź co bądź, wyzwanie i… udało się. Całość opiera się tylko i wyłącznie na specyfikacji HTML i CSS3. Nie korzystamy tu z żadnych skryptów JS/jQuery, ale w zamian czerpiemy z dobrodziejstw zwykłego arkusza stylów. Zapraszam serdecznie do lektury!

Standardowo rozpoczniemy od przygotowania głównego szkieletu naszej nawigacji. W przykładzie zawiera ona trzy pozycje, jednak rzecz jasna może być ich dowolna ilość. Jedyne, o czym powinniśmy pamiętać, to ustalenie z góry wysokości menu. Dzięki temu unikniemy niechcianych komplikacji podczas projektowania.

Aby było jasne, co chcemy osiągnąć, wystarczy spojrzeć na przykład:

Zobacz DEMO on-line

Szkielet HTML

Zastanawiacie się pewnie, dlaczego w każdym elemencie <li> umieściłem po dwa znaczniki <span>. Otóż tak też było w przykładzie, do którego miałem się odwołać. Jeżeli ktoś z Was zna sposób, gdzie nie będzie przymusu duplikowania tekstów, bardzo chętnie o nim usłyszę – czy to w komentarzy, czy to w wątku na forum.

Formatowanie CSS3

Sam kod CSS nie jest skomplikowany, omówię jednak niektóre wartości.

Na początek stylujemy cały blok nawigacji oraz poszczególnych pozycji.

Kolejno – każdy odnośnik, wchodzący w skład nawigacji.

Dużą rolę odgrywa tu ustalenie stałej wysokości i dodanie efektu przejścia. Ukrycie nadmiaru zawartości też jest wymagane, aby <span>, który nie ma być niewidoczny, mógł bez problemu się „schować”.

Element <span> z tekstem powinien mieć wysokość taką samą jak odnośnik. Jako, że mamy po dwa span’y w jednym odnośniku, nie będą się one razem mieściły w widocznym dla użytkownika polu.

Oprócz ustalonej wysokości, dodaliśmy w powyższym listingu wysokość linii, równą wartości height. Dzięki temu zabiegowi, tekst wyrówna się centralnie w pionie.

No i na sam koniec pozostały deklaracje odpowiedzialne za ukrywanie wybranych elementów <span>, w zależności od stanu, w jakim znajduje się nasz odnośnik. Pozycja top powinna być równa wysokości odnośnika (dodajemy do niej tylko odpowiedni znak +/ -).

Transitions odpowiada tu oczywiście za płynne przejście i wymianę miejscami oby elementów <span>.

Podsumowanie

Mam nadzieję, że tutorial spełnia wymagania postawione we wspomnianym już wcześniej wątku. Jeżeli macie pomysły na kolejne poradniki/tutoriale, zapraszam do zgłaszania ich na forum. Odniesiemy się do wszystkich propozycji, które – w miarę możliwości – będziemy realizować na łamach WEBroad.pl.

Zobacz DEMO on-line Pobierz pliki źródłowe



4 odpowiedzi na “W jaki sposób stworzyć nawigację poziomą z ciekawym efektem „scroll” w CSS3?”

  1. Mr.Mr pisze:

    Wiedziałem, że się da tylko CSS’em :)

  2. Comandeer pisze:

    Eh, często takie efekty wizualne osiąga się kosztem dostępności. Tak jak tutaj: podwójny tekst. Jak myślisz – fajnie jest słuchać czytnika, gdy czyta to samo słowo podwójnie? Ten drugi span to mógłby jak już być potraktowany przez [aria-hidden=true], tudzież [role=presentation] – przynajmniej zniknąłby problem AT. Niestety, wciąż mielibyśmy nadmiarowy, bezsensowny element.

    A da się przecież prościej – i to od dawna. Przecież już w CSS 2.1 istniały pseudoelementy :before i :after. W 95% przypadków służą właśnie zastępowaniu nadmiarowych elementów, istniejących tylko ze względów „estetycznych”.

    Moja propozycja: http://comandeer.pl/bzdety/menu-scroll.html

    Zostajemy z jednym span (jakby dalej pokombinować i przerzucić :hover na li to prawdopodobnie zostalibyśmy z samym hiperłączem). Do tego zmieniłem selektory na zmyślniejsze (nie lubię takich poziomów zagłębień a myślę, że moje są nawet ciut szybsze). Zamiast tego data-name można np zastosować title. Ah – no i moje działa z :focus, więc TAB-owanie nie sprawia więcej problemów ;)
    I to jest właśnie potęga CSS – kod w pełni semantyczny (no, prawie, jeśli się uprzeć o to data) a efekt wizualny wspaniały.

  3. marcint339 pisze:

    Świetnie, właśnie o to chodziło. Dzięki!

  4. VeTo pisze:

    Proszę o poprawienie linków do dema, jak ktoś przemyśli to działają..
    https://webroad.pl/poradnik/menu_scroll <— tak powinien wyglądać link.

Skomentuj Mr.Mr Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany.