Tag nav dla menu desktopowego i mobilnego

pytanie zadane 2 stycznia 2018 w HTML i CSS przez Artek Stary wyjadacz (11,800 p.)

Mam pewien dylemat. Na stronie zrobiłem tak, że przy mniejszej szerokości ekranu zanika klasyczne menu jeden obok drugiego i pojawia się rozwijany hamburger. Wszystko działa cacy, no ale, że chcę aby kod był jak najdoskonalszy zastanawia mnie co jest lepsze : czy zrobić tak :

<nav>
kod menu desktopowego

kod menu rozwijanego
</nav>

Czy tak?

<nav>
Kod menu desktopowego
</nav>

<nav aria-label="menu dla urządzeń mobilnych">
Kod menu rozwijanego
</nav>

Może jakiś inny sposób? Czekam na opinie i komentarze

komentarz 2 stycznia 2018 przez lapacz.kornel Mądrala (6,930 p.)

A pokażesz kod? wersja mobilna różni się tylko hamburgerem? (jeśli tak po prostu w wersji desktopowej ukrywaj buttona)

komentarz 2 stycznia 2018 przez Artek Stary wyjadacz (11,800 p.)

<nav class="menu">
  
     <ul class="main-menu">
          <li class="flexbox-navigation-item"><img src="/img/logo.jpg" alt="" /></li>
		  <li class="flexbox-navigation-item"><a class="navigation-item" href="index.html">firma</a></li>
		  <li class="flexbox-navigation-item"><a class="navigation-item" href="serwis.html">serwis</a></li>
		  <li class="flexbox-navigation-item"><a class="navigation-item" href="aktualnosci.html">aktualności</a></li>
		  <li class="flexbox-navigation-item"><a class="navigation-item" href="kontakt.php">kontakt</a></li>
     </ul>
	

     <ul id="hamburger-list" class="navigation-hamburger">
          <li><img class="small-logo" src="/img/logo.jpg"/>Firma - o nas i naszych usługach </li>
          <li><span class="fa fa-wrench" aria-hidden="true"></span>Serwis - zakres napraw i przeglądów</li>
          <li><span class="fa fa-newspaper-o" aria-hidden="true"></span>Aktualności -  co nowego?</li>
          <li><span class="fa fa-volume-control-phone" aria-hidden="true"></span>Kontakt - porozmawiaj z nami</li>
     </ul>

	
</nav>

Brakuje jeszcze odnośników(<a>) w elementach <li> no i jeszcze menu hamburgerowe będzie miało na szczycie ikonkę hamburgera i icon-fonts i podpisane "rozwiń"

komentarz 2 stycznia 2018 przez lapacz.kornel Mądrala (6,930 p.)

duplikacja kodu....

komentarz 2 stycznia 2018 przez Artek Stary wyjadacz (11,800 p.)

Może nie duplikacja kodu, ale podsunąłeś mi dobry pomysł

komentarz 2 stycznia 2018 przez lapacz.kornel Mądrala (6,930 p.)

"- o nas i naszych usługach" mozna dac do span i ukrywać w css. Na czytnikach ekranowych może się to wyświetlać. Duplikacja kodu.

1 odpowiedź

odpowiedź 2 stycznia 2018 przez lapacz.kornel Mądrala (6,930 p.)

<nav>
kod menu
</nav>

a w css stylizujesz tak aby się wszędzie dobrze wyświetlało.

komentarz 2 stycznia 2018 przez Artek Stary wyjadacz (11,800 p.)

Jakie uzasadnienie?

komentarz 2 stycznia 2018 przez Kiele Obywatel (1,530 p.)

Myśle że głównie chodzi o to żeby używać jak najmniej znaczników html w miare możliwości.

Mniej kodu, i jest bardziej przejrzysty.

komentarz 2 stycznia 2018 przez lapacz.kornel Mądrala (6,930 p.)

A znajdź jakąś strone na której ktoś zastosował któryś z twoich pomysłów

komentarz 2 stycznia 2018 przez Artek Stary wyjadacz (11,800 p.)

Kodu mniej to fakt. Pytanie też czy z punktu widzenia czytnika ekranowego drugi sposób nie byłby lepszy. Niedowidzący użytkownik w pierwszym wypadku dowiedziałby się, że jest jedno menu podczas gdy de facto mamy tam dwa menu robiące to samo. Bynajmniej tak mi się wydaje. W drugim wypadku zorientowałby się jak naprawdę wygląda sytuacja. No chyba, że się mylę.