HTML5 & CSS3

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

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

<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.

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.

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.

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 +/-).

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

komentarze 4

  • Awatar
    Mr.Mr

    3 września 2013 12:10

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

    Odpowiedz
  • Awatar
    Comandeer

    3 września 2013 13:23

    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.

    Odpowiedz
  • Awatar
    marcint339

    3 września 2013 21:09

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

    Odpowiedz
  • Awatar
    VeTo

    9 kwietnia 2014 08:02

    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.

    Odpowiedz

Zostaw odpowiedź