• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Użycie <li></li> do pokazania/ukrycia menu

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
139 wizyt
pytanie zadane 21 października 2016 w HTML i CSS przez Taki Tam Początkujący (270 p.)
zamknięte 22 października 2016 przez Taki Tam

Witam, mam takie pytanie, a mianowicie posiadam taki kod:

<header class="header">
	<h1 class="header-logo logo"><img src="" alt=""></h1>
		
	<nav class="header-nav nav">
		<ul class="header-nav-ul ul">
			<li class="menu-toggle">Menu</li> <!-- Pokaż/ukryj menu -->
				
			<li class="menu"><a href="#">Home</a></li>
			<li class="menu"><a href="#">Blog</a></li>
			<li class="menu"><a href="#">Portfolio</a></li>
			<li class="menu"><a href="#">O Mnie</a></li>
			<li class="menu"><a href="#">Kontakt</a></li>
		</ul>
	</nav>
</header>

I zastanawiałem się, czy można umieścić przycisk do pokazania/ukrywania menu na urządzeniach mobilnych za pomocą <li></li>. Wyglądałoby to mniej więcej tak, jak powyżej, a konkretnie:

<li class="menu-toggle">Menu</li>

Czy taki zapis jest niepoprawny?

Pozdrawiam

komentarz zamknięcia: Otrzymałem odpowiedź.

2 odpowiedzi

+2 głosów
odpowiedź 22 października 2016 przez IBB Gaduła (3,020 p.)
wybrane 22 października 2016 przez Taki Tam
 
Najlepsza

Niepoprawny.

Po pierwsze, jest to przycisk. Dlaczego zatem nie oznaczyłeś go przy pomocy elementu button? 

Po drugie, przycisk ten nie powinien być zamieszczony jako pierwszy element w liście zawierającej linki menu, moim zdaniem z punktu widzenia struktury treści to nie ma sensu. Ja bym proponowała coś takiego:

 <nav class="header-nav nav">
    <button class="menu-toggle">Menu</button>     
    <ul class="header-nav-ul ul">
       <li class="menu"><a href="#">Home</a></li>
       <li class="menu"><a href="#">Blog</a></li>
       <li class="menu"><a href="#">Portfolio</a></li>
       <li class="menu"><a href="#">O Mnie</a></li>
       <li class="menu"><a href="#">Kontakt</a></li>
    </ul>
</nav>

Nie zapomnij też dodać odpowiednie atrybuty ARIA (aria-expanded, aria-controls, ewentualnie aria-pressed).

I jeszcze przy okazji:

 <h1 class="header-logo logo"><img src="" alt=""></h1>

Z punktu widzenia osób korzystających z czytników ekranu nagłówek ten jest pusty; nie posiada ani tekstu, ani alternatywnego opisu dla logo.

komentarz 22 października 2016 przez Taki Tam Początkujący (270 p.)
Dziekuje
+1 głos
odpowiedź 22 października 2016 przez Przemek Zembrzuski Gaduła (3,240 p.)
Radziłbym ci użyć do tego np. Buttona i na nim wywołać funkcję odpowiedzialną za pokazywanie lub ukrywanie menu. Oczywiscie możesz zrobić to samo na li ale jest to bardzo dziwne i raczej niepoprawne.

Podobne pytania

0 głosów
3 odpowiedzi 154 wizyt
pytanie zadane 30 września 2018 w JavaScript przez Gucci Gaduła (4,580 p.)
+2 głosów
2 odpowiedzi 1,232 wizyt
pytanie zadane 22 lutego 2021 w HTML i CSS przez Adusiek Użytkownik (660 p.)
0 głosów
0 odpowiedzi 232 wizyt

93,187 zapytań

142,201 odpowiedzi

322,012 komentarzy

62,514 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2127p. - dia-Chann
  2. 2092p. - Łukasz Piwowar
  3. 2079p. - Łukasz Eckert
  4. 2037p. - Tomasz Bielak
  5. 2006p. - Michal Drewniak
  6. 2006p. - rucin93
  7. 2005p. - Łukasz Siedlecki
  8. 1964p. - CC PL
  9. 1946p. - Adrian Wieprzkowicz
  10. 1901p. - Mikbac
  11. 1744p. - rafalszastok
  12. 1734p. - Anonim 3619784
  13. 1586p. - Dawid128
  14. 1520p. - Marcin Putra
  15. 1480p. - ssynowiec
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...