È appropriato avvolgere ogni elemento di navigazione in un div?

Question

Sto imparando HTML + CSS e sto lavorando su un sito web in cui ho bisogno di avere una barra di navigazione verticale sul lato sinistro che avrà quattro elementi che possono essere interagiti con. È prassi normale racchiudere ciascuno di questi quattro elementi con un div o esiste un modo più elegante o semantico per risolvere questo problema? Voglio che ogni elemento abbia funzioni univoche su clic associate a loro, motivo per cui ho pensato di dare loro div e le classi avrebbero più senso per interagire con loro in seguito.

Grazie!

Answer 1

JSFIDDLE DEMO

struttura HTML:
Ci sono molti modi per raggiungere una navigazione verticale.
Il più comune sarebbe quella di utilizzare ul e li:

<div id="lnav_container"> 
    <ul id="lnav"> 
     <li class="lnav_item"><a href="#">Item 1</a></li> 
     <li class="lnav_item"><a href="#">Item 2</a></li> 
     <li class="lnav_item"><a href="#">Item 3</a></li> 
     <li class="lnav_item"><a href="#">Item 4</a></li> 
    </ul> 
</div> 

anche molto comune avere a tag all'interno li.

Styling:
Si può sbarazzarsi dei proiettili avendo list-style-type: none; per il ul.
Puoi dare loro uno stile diverso al passaggio del mouse usando il selettore :hover per renderlo più interattivo.

.lnav_item { 
    width: 74%; 
    margin-top: 10px; 
} 
.lnav_item:first-child {margin-top: 0px;} 
.lnav_item.selected {width: 86%;} 
.lnav_item a { 
    display: inline-block; 
    width: 100%; 
    line-height: 30px; 
    padding: 8px 5px 5px 0px; 
    background-color: yellow; 
    color: black; 
    font-weight: bold; 
    text-decoration: none; 
    border-radius: 2px 12px 12px 2px; 
} 
.lnav_item.selected a { 
    background-color: green; 
    color: white; 
    font-size: 18px; 
} 
.lnav_item:hover a {background-color: orange;} 

per sbarazzarsi di a uso sottolineatura text-decoration: none; e sovrascrivere la sua colorazione di default, se lo si desidera.

Javascript (jQuery):
Sarà facile per legare clickListener alle voci:

$('.lnav_item a').on('click', function() { 
    //$(this) item is clicked, do whatever you want 
    $('.lnav_item').removeClass('selected'); 
    $(this).parent().addClass('selected'); 
}); 

EDIT:

Se si vuole dare ciascuno degli elementi di navigazione uno stile diverso, ecc., puoi ottenerlo in diversi modi:

jsfiddle DEMO

1. È possibile utilizzare i CSS' nth-child() selettore:

   .lnav_item:nth-child(2):hover a{background-color: #252F1D;} 
   .lnav_item:nth-child(3):hover a{background-color: white;} 
   

2. Se si sta facendo in jQuery, in alternativa è possibile utilizzare la funzione con parametri (indice) e magari utilizzare eq se necessario.

   $('.lnav_item > a').each(function(index) { 
       if(index == 0) { 
        //give it a different onClick, CSS rule, etc 
       } 
       //and so on 
   }); 
   

   • index è a base zero, ma nth-child parte da uno.

Answer 2

Il tipico markup HTML5 per un menu di navigazione del sito sarebbe una nav element che contiene un ul element:

<nav> 
    <ul> 
    <li><a href="/1">1</a></li> 
    <li><a href="/2">2</a></li> 
    <li><a href="/3">3</a></li> 
    <li><a href="/4">4</a></li> 
    </ul> 
</nav> 

Se è possibile ottenere il vostro CSS/JS di lavorare con questo markup (+ class attributi o qualsiasi altra cosa ti serva), ottimo.
Se sono necessari più elementi, aggiungere div e/o span elementi: sono meaningless, quindi non cambiano la semantica del documento.

Answer 3

Gli elementi NAV sono semplicemente LISTE.

Non è necessario avvolgerli in nulla.

Ecco un esempio del mio pannello di navigazione (ho anche messo sul lato sinistro del mio schermo)

 <nav> 
     <ul style="list-style: none"> 
      <h3>Main Menu</h3> 
      <li style="font-size: 100%"><b>Article 1</b></li> 
      <ul style="list-style: none"> 
      <br> 
       <dt> 
       <li style="font-size: 100%"><a href="Article 1.1">Article 
              1.1</a> 
       </li> 
       <br> 
       <li style="font-size: 100%"><a href="Article 1.2">Article 
              1.2</a> 
       </li> 
       <br> 
       </dt> 
      </ul> 
      <br> 
    </nav>