Is it appropriate to wrap each navigation element in a div?

问题

I'm learning HTML + CSS and working on a website where I need to have a vertical navigation bar on the left side which will have four elements which can be interacted with. Is it standard practice to wrap each of these four elements with a div or is there a more elegant or semantic way to solve this problem? I will want each element to have unique on-click functions associated with them, which is why I thought giving them divs and classes would make the most sense for interacting with them later.

Thanks!

回答1:

JSFIDDLE DEMO

HTML structure:
There are many ways to achieve a vertical navigation.
The most common would be to use ul and 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>

Also very common to have a tags inside li.

Styling:
You can get rid of the bullets by having list-style-type: none; for the ul.
You can give them different style on hover by using :hover selector to make it more interactive.

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

To get rid of a underline use text-decoration: none; and override its default coloring if you wish.

Javascript (jQuery):
It'll be easy to bind clickListener to the items:

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

EDIT:

If you want to give each of the navigation items a different style, etc, you can achieve it different ways:

jsfiddle DEMO

You can use CSS' nth-child() selector:

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

If you're doing it in jQuery, alternatively you can use the function with parameter (index) and maybe use eq if needed.
```
$('.lnav_item > a').each(function(index) {
    if(index == 0) {
        //give it a different onClick, CSS rule, etc
    }
    //and so on
});
```
- index is zero-based, but nth-child starts from one.

回答2:

The typical HTML5 markup for a site navigation menu would be a nav element that contains an 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>

If you can get your CSS/JS to work with this markup (+ class attributes or whatever you need), great.
If you need more elements, add div and/or span elements: they are meaningless, so they don’t change the semantics of your document.

回答3:

NAV elements are simply LISTS.

You don't need to wrap them in anything.

Here's an example of my own Navigation Panel (I also placed it on the left-hand side of my screen)

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

来源：https://stackoverflow.com/questions/30022689/is-it-appropriate-to-wrap-each-navigation-element-in-a-div

标签

html

css

html5

semantic-markup