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

W jaki sposób robić podstawowy nav w CSS

VPS Starter Arubacloud
+1 głos
252 wizyt
pytanie zadane 7 kwietnia 2021 w HTML i CSS przez Yorweth Obywatel (1,310 p.)

Cześć

Uczę się na obecną chwilę podstaw HTML i CSS, mam przykładową stronę i te same manu utworzone w różny sposób.

Pierwsze jest na listach, drugie utworzyłem na samych hiperłączach, wiem że również jest możliwość rozwiązania tego w modelu pudełkowym, ale jeszcze do niego nie doszedłem z nauką :D 

 

Moje pytanie, jaki sposób byłby najbardziej semantyczny i odpowiedni do tworzenia menu? 

Jeżeli ani ten ani ten, to czy możecie pokazać jak powinien wyglądać najodpowiedniejszy model? 

Dziękuję za pomoc!

Pierwszy sposób

<nav>
        <ul>
            <li>
                <a href="Index.html">Home</a>
            </li>
            <li>
                <a href="html.html">HTML</a>
            </li>
            <li>
                <a href="#">CSS</a>
            </li>
            <li>
                <a href="#">JAVA</a>
            </li>
        </ul>
    </nav>
{
    margin:0;
    padding:0;
}
header h1{
    font-size: 48px;
}
nav{
    
    background-color: aqua;
    border-bottom: 3px solid red;
}
nav ul{
    list-style:none;
    width:100%;
    height: 60px;
}
nav ul li{
    width:25%;
    float:left;
}
nav ul li a{
    display: block;
    text-align:center;
    line-height: 60px;
    font-size: 18px;
    text-decoration: none;
    transition: 0.25s;
    border-bottom:red 3px solid;
    color:black;
}
nav ul li a:hover{
    background-color: aquamarine;
    font-size: 22px;
    border-color: gold;;
}

 Drugi sposób

<nav class="clearfix">
        <a href="Index.html">Home</a>
        <a href="html.html">HTML</a>
        <a href="css.html">CSS</a>
        <a href="Java.html">JAVA</a>
    </nav>
*{
    margin:0;
    padding:0;
}
header h1{
    font-size: 48px;
}
nav {
    background-color: aqua;
    width:100%;
}
a{
    float:left;
    height: 60px;
    line-height: 60px;
    width:25%;
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 18px;
    transition: 0.25s;
    border-bottom: 3px red solid;
    color:black;
}
.clearfix::after{
    content: "";
    clear:both;
    display:block;
    height: 0px;
    width:0px;
}
nav a:hover{
    background-color: aquamarine;
    border-color: gold;
    font-size: 22px;
}

 

1
komentarz 7 kwietnia 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
Ja w sumie zawsze stosowałem pierwszy sposób ale to wynikało z faktu iż lepiej mi się styluje liste.

3 odpowiedzi

+3 głosów
odpowiedź 7 kwietnia 2021 przez mb-dir Mądrala (6,710 p.)

Witaj,

Na sam początek odpowiedzmy na pytane czym jest semantyka. Najprościej mówiąc jest to używanie znaczników zgodnie z ich przeznaczeniem, można wyróżnić 2 poziomy semantyki. Pierwszy z nich to semantyka w kontekście przeglądarek lub programów, których zadaniem jest pomoc osobą z niepełnosprawnościami w poruszaniu się po internecie. Jako drugi poziom można wyróżnić semantyke dla zwykłego użytkownika, wyobraź sobie, że jedynym znacznikiem jakiego używasz jest <div>. Odpowiednio ostylowany <div> może wyglądać jak np <h1>, ale załóżmy, że z jakiś przyczyn css nam się nie wczyta, jeżeli zastosowaliśmy <h1>, to użytkownik nadal będzie mógł się domyślić(po domyślnym wyglądzie), że to h1 - patrz tu

 

Przejdźmy do sedna, ogólnie dobrze zauważyłeś, że elementy nawigacji mają ułożenie przypominające listę, dlatego użycie <ul> jest zasadne. Nawigacja jak sama nazwa wskazuje jest komponentem nawigacyjnym, czyli powinna znajdować się w znaczniku <header> zgodnie z jego definicją. Ogólnie podstawowy schemat głównego menu powinien wyglądać mniej więcej tak: header->nav->ul->li->a 

 

Co do modelu pudełkowego to nie ma on nic wspólnego z semantyką, ponieważ dotyczy on css'a - zerknij tu

 

Podsumowując, semantyka to używanie znaczników zgodnie z ich przeznaczeniem, schemat menu głównego przedstawiłem powyżej, warto zaznaczyć, że istnieje jeszcze coś takiego jak ARIA - zostawiam do samodzielnego zapoznania się. To z jakiej metody skorzystasz do ostylowania i zapewnienia RWD menu to już sprawa css'a.

 

Polecam również zapoznać się z wpisami comandeer'a

2
komentarz 8 kwietnia 2021 przez Comandeer Guru (599,730 p.)

Nawigacja nie musi być w header. Istnieje popularny pattern, w którym pasek nawigacyjny jest na samej górze a header zawiera główny nagłówek i hero image.

+3 głosów
odpowiedź 8 kwietnia 2021 przez Comandeer Guru (599,730 p.)

Z badań wynika, że lista jest lepsza. To wynika choćby z tego, jak czytnik ekranowy czyta poszczególne elementy.

Podobne pytania

0 głosów
1 odpowiedź 193 wizyt
pytanie zadane 11 sierpnia 2019 w Nasze projekty przez gnu_ewm Gaduła (3,340 p.)
0 głosów
3 odpowiedzi 374 wizyt
pytanie zadane 22 czerwca 2019 w HTML i CSS przez Piotr Mikołajewski Nowicjusz (190 p.)
0 głosów
4 odpowiedzi 247 wizyt
pytanie zadane 15 lipca 2015 w HTML i CSS przez Eimens Maniak (69,240 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...