将每个导航元素包装在div中是否合适？

Question

我正在学习HTML + CSS，并在一个网站上工作，我需要在左侧有一个垂直导航栏，它将有四个可以与之交互的元素。将这四个元素中的每一个换成div还是有更优雅或更有意义的方法来解决这个问题是标准做法吗？我希望每个元素都具有与之相关的独特的点击式功能，这就是为什么我认为给他们div和类最适合以后与它们进行交互的原因。

谢谢！

Answer 1

JSFIDDLE DEMO

HTML结构：
有很多方法可以实现垂直导航。
最常见的是使用ul和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> 

也很常见有内部lia标签。

造型：
可以通过让list-style-type: none;为ul摆脱子弹的。
您可以通过使用:hover选择器让它们在悬停时给予不同风格，使其更具互动性。

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

为了摆脱a下划线使用text-decoration: none;，如果你想重写其默认的色彩。

使用Javascript（jQuery的）：
这将是很容易绑定clickListener的物品：

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

编辑：

如果你想给每个导航项目的不同的风格等，你可以实现它不同的方式：

jsfiddle DEMO

1. 您可以使用CSS” nth-child()选择：

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

2. 如果你在jQuery的做，或者你可以使用带有参数（指数）的功能，如果需要的话，也许使用eq。

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

   • index是从零开始，而是从一开始nth-child。

Answer 2

典型的HTML5标记的站点导航菜单将是一个nav element包含一个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> 

如果你能得到你的CSS/JS用这个标记来上班（+ class属性或任何你需要的），很好。
如果你需要更多的元素，添加div和/或span元素：他们是meaningless，所以他们不改变你的文档的语义。

Answer 3

NAV元素简直就是LIST。

你不需要把它们包装在任何东西中。

这是我自己的导航面板的例子（我也把它放在我的屏幕的左侧）

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