Czy należy zawijać każdy element nawigacyjny do elementu div?

Question

Uczę się HTML + CSS i pracuję na stronie internetowej, gdzie muszę mieć pionowy pasek nawigacyjny po lewej stronie, który będzie miał cztery elementy, z którymi można się komunikować. Czy standardową praktyką jest zawijanie każdego z tych czterech elementów za pomocą elementu div, czy też istnieje bardziej elegancki lub semantyczny sposób rozwiązania tego problemu? Będę chciał, aby każdy element miał przypisane unikalne funkcje on-click, dlatego myślałem, że dawanie im divy i klas będzie miało sens w interakcji z nimi później.

Dzięki!

Answer 1

JSFIDDLE DEMO

struktura HTML:
Istnieje wiele sposobów, aby osiągnąć pionową nawigację.
Najczęstszym byłoby użyć ul i 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> 

również bardzo często mają a tagów wewnątrz li.

Stylizacja:
można pozbyć się kul poprzez list-style-type: none; dla ul.
Możesz nadać im inny styl po najechaniu kursorem, używając selektora :hover, aby uczynić go bardziej interaktywnym.

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

Aby pozbyć a podkreślenia użytku text-decoration: none; i przesłonić jego domyślne zabarwienie, jeśli chcesz.

JavaScript (jQuery):
To będzie łatwo powiązać clickListener do pozycji:

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

EDIT:

Jeśli chcesz dać każdy z elementów nawigacyjnych inny styl itp. można osiągnąć na różne sposoby:

jsfiddle DEMO

1. Można użyć CSS”nth-child() selektora:

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

2. Jeśli robisz to w jQuery, alternatywnie można użyć funkcji z parametrem (indeks) i może używać eq w razie potrzeby.

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

   • index jest od zera, ale nth-child zaczyna się od jednego.

Answer 2

Typowa HTML5 znaczników do menu nawigacyjnego strona byłaby nav element że zawiera 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> 

Jeśli można otrzymać CSS/JS do pracy z tym znaczników (+ class atrybutów lub cokolwiek potrzebujesz), świetnie.
Jeśli potrzebujesz więcej elementów, dodaj elementy div i/lub span: są to meaningless, więc nie zmieniają semantyki dokumentu.

Answer 3

Elementy NAV to po prostu LISTY.

Nie musisz ich owijać.

Oto przykład z mojego własnego panelu nawigacyjnego (ja również umieścić go na lewej stronie mojego ekranu)

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