Ist es sinnvoll, jedes Navigationselement in ein div einzubinden?

Question

Ich lerne HTML + CSS und arbeite auf einer Website, wo ich eine vertikale Navigationsleiste auf der linken Seite haben muss, die vier Elemente haben wird, mit denen interagiert werden kann. Ist es üblich, jedes dieser vier Elemente mit einem div zu umhüllen, oder gibt es eine elegantere oder semantischere Lösung dieses Problems? Ich möchte, dass jedes Element einzigartige On-Click-Funktionen hat, die mit ihnen verbunden sind, weshalb ich dachte, dass es für sie am sinnvollsten wäre, ihnen später divs und Klassen zu geben.

Danke!

Answer 1

JSFIDDLE DEMO

HTML-Struktur:
Es gibt viele Möglichkeiten, um eine vertikale Navigation zu erreichen.
Die häufigste ul und li zu verwenden wäre:

<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> 

auch sehr häufig innerhalb lia Tags zu haben.

Styling:
können Sie durch list-style-type: none; für die ul mit den Kugeln loszuwerden.
Sie können sie unterschiedliche Art auf schweben geben, indem :hover Selektor es interaktiv zu machen.

.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;} 

Um text-decoration: none; loszuwerden a Unterstrichen Verwendung zu erhalten und seine Standard Färbung überschreiben, wenn Sie es wünschen.

Javascript (jQuery):
Es wird einfach sein clickListener, um die Elemente zu binden:

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

EDIT:

Wenn Sie jede der Navigationselemente geben möchten ein anderer Stil, etc., können Sie ihnen verschiedene Arten erreichen:

jsfiddle DEMO

1. Sie können CSS‘nth-child() Selektor:

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

2. Wenn Sie es in jQuery tun, alternativ können Sie die Funktion mit dem Parameter (Index) verwenden und vielleicht eq verwenden, wenn nötig.

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

   • index nullbasiert, aber nth-child beginnt, sich von einem.

Answer 2

Die typische HTML5-Markup für ein Navigationsmenü wäre ein nav element, die ein ul element enthält:

<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> 

Wenn Sie mit diesem Markup erhalten Sie Ihre CSS/JS zu arbeiten (+ class Attribute oder was auch immer Sie brauchen), großartig.
Wenn Sie mehr Elemente benötigen, fügen Sie div und/oder span Elemente hinzu: Sie sind meaningless, also ändern sie nicht die Semantik Ihres Dokuments.

Answer 3

NAV-Elemente sind einfach LISTS.

Sie müssen sie in nichts einwickeln.

Hier ist ein Beispiel für meine eigene Navigations-Panel (I stellte es auch auf der linken Seite meines Bildschirms)

 <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>