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:
Szkielet HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <ul> <li> <a href="#"> <span>Home</span> <span>Home</span> </a> </li> <li> <a href="#"> <span>Portfolio</span> <span>Portfolio</span> </a> </li> <li> <a href="#"> <span>Wortal</span> <span>Wortal</span> </a> </li> </ul> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | ul { display: table; margin: 0 auto; width: auto; padding: 10px; background: #eee; list-style: none; border-radius: 3px; border: 1px solid #ccc; } ul li { display: block; float: left; } |
Kolejno – każdy odnośnik, wchodzący w skład nawigacji.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | ul li > a { display: block; width: 100%; height: 50px; overflow: hidden; background: #fff; transition: background .1s ease-in; color: #333; position: relative; text-decoration: none; } ul li > a:hover { background: #f49500; box-shadow: inset 0 0 50px #f46700; color: #fff; border-radius: 2px; } |
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.
1 2 3 4 5 6 7 8 9 | ul li > a > span { display: block; padding: 0 15px 0; width: auto; height: 50px; line-height: 50px; text-align: center; position: relative; } |
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 +/ -).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | ul li > a > span:first-child { top: 0; transition: .3s ease-in; } ul li > a:hover > span:first-child { top: -50px; transition: .3s ease-in; } ul li > a > span:last-child { top: 50px; transition: .3s ease-in; } ul li > a:hover > span:last-child { top: -50px; transition: .3s ease-in; } |
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
Wiedziałem, że się da tylko CSS’em :)
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.
Świetnie, właśnie o to chodziło. Dzięki!
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.