Po pierwsze – rozwijane menu nawigacyjne były złym pomysłem 10 lat temu i są tym bardziej złym pomysłem teraz. Kto próbował użyć takiej nawigacji na ekranie dotykowym, gdzie nie istnieje koncepcja :hover, ten świetnie wie o czym mówię. Chciałem to zaznaczyć na samym początku – jeśli możecie, nie używajcie w ogóle menu rozwijanych!
Do rzeczy. Ten wpis nie ma na celu szczegółowego omówienia technik budowania rozwijanych menu nawigacyjnych. Chcę tylko zwrócić uwagę na jeden konkretny aspekt.
Problem – display: none;
Bardzo często widzę, taką strukturę CSSa do ukrywania/chowania menu.
#nav li { float: left; position: relative; height: 30px; }
#nav li ul { display: none; position: absolute; top: 30px; left: 0; }
#nav li:hover ul { display: block; }
To działa, ale ma jedną zasadniczą wadę – domyślnie wszystkie linki w podmenu są ukryte przed wyszukiwarkami, czytnikami ekranu itd. Według mnie display: none; powinno być tylko używane w połączeniu z JavaScriptem, o ile chcemy zachować dostępność treści.
Rozwiązanie: left: -999em;
Lepszym rozwiązaniem jest użyć minusowego pozycjonowania elementów:
#nav li ul { position: absolute; top: 30px; left: -999em; }
#nav li:hover ul { left: 0; }
Efekt taki sam, a nagle i roboty będą łapać Wasze linki i użytkownicy korzystający z klawiatury będa mogli nawigować po waszej stronie (przynajmniej w teorii, w praktyce wymaga to jeszcze trochę zachodu, żeby uczynić rozwijaną nawigację w pełni dostępną z klawiatury).
Poważnie przy display:none w stylach – roboty nie przechodzą przez te linki?
Z tego co wiem roboty ignorują całą treść z
display: none, jako najprostszy sposób walki ze spamem i ukrytymi treściami. Nie odpowiem Ci na to w 100% bo żaden ze mnie ekspert odnośnie SEO, a zapewne samo Google czy inne wyszukiwarki nie traktują tego tematu zero/jedynkowo. Niemniej jednak sposób który pokazałem na pewno działa lepiej w przypadku czytników ekranowych, więc warto korzystać z niego choćby z tego powodu.Zastanawia mnie jednak coś innego – nie pisałem na tym blogu od prawie dwóch lat, a Ty odzywasz się natychmiast po moim wpisie. Miło :)
Istnieje też możliwość skorzystania z atrybutu text-indent (o podobnej wartości, np. -999em).
Tzn. to akurat się przydaje przy wszelkich „przyciskach obrazkowych”, a nie do rozwijanego menu.