Responsive Navigation Bar with Full Links

Question

this is my first post here. If I am doing something wrong please don't hesitate to tell me.

I have built a navigation bar which looks pretty well:

My HTML:

<div style="width: 864px; margin: 0 auto;"> 
    <nav id="main-navigation">
        <ul>
                <li id="nav1"><a href="#">Lorem ipsum dolor sit ametzu</a></li>
                <li id="nav2"><a href="#">Lorem ipsum dolor sit am</a></li>
                <li id="nav3"><a href="#">Lorem ipsum dolor sitd</a></li>
                <li id="nav4"><a href="#">Lorem ipsum dolo</a></li>
                <li id="nav5"><a href="#">Lorem ipsum do</a></li>
        </ul>
    </nav>
</div>

And this is how it is looking right now:

Notice that each navigation-item's width should be relative to its content. I managed to build this with static width-values (magic numbers) like in the following css:

body{background-color: gray;}

ul{
    margin: 0;
    padding: 0;
}

nav#main-navigation li{
    float: left;
    padding: 15px 0;
    text-align: center;
    margin: 0;
    background-color: white;
    border-right: 1px dotted #222;
    color: #222;
}

nav#main-navigation li:last-child  { border: 0; }

nav#main-navigation li a{
    font: 11px/12px sans-serif;
    text-transform: uppercase;
    text-decoration: none;

}

#nav1{width: 218px;}
#nav2 {width: 198px;}
#nav3 {width: 178px;}
#nav4 {width: 138px;}
#nav5 {width: 128px;}

I have two questions with that:

1. Is it possible to get the whole li-tag to be filled with the link-tag? Can you give me a hint how to do that please. SOLVED!!!
2. I want to make this responsive. Is it best practice to calculate percentages of the widths? And then put them into a media-query? Or is it even possible to make the li-elements relate to its content (like what display:inline; should normally do)?

Would be really nice if someone more experienced helps :-) Cheers

---

EDIT:

As requested, this is my state right now (thanks to Roddy of the Frozen Pea):

http://jsfiddle.net/0xsven/rbz72/

I want to make this responsive in order to display on smaller displays than 960px (which is my max). I want the navigation bar to stretch to the whole length of the div that contains it. Thank you for helping.

Answer 1

The answer to the second question is to make your <li> elements display inline-block and remove the float. This way the menu items will respond to content size like inline items.

nav#main-navigation li{
    display:inline-block;
    padding:15px 10px;
    margin-right: -4px;
}

The negative right margin is a trick to overcome the native gap between inline-block elements.

To make the clickable areas bigger, the solutions would be something like this. Essentially what you need to do is put display: block on the li a element and tell it to take up all available room. It would mean transferring the li's padding to the a, however.

Here is a working JSFiddle demo of this code. I added a grey :hover background-color to the <a> so you can see the effects.

Answer 2

1.I'm not totally understanding you here (<li>'s cannot be <a> elements) but I think what you want is for the styling of the <li>'s to be the same as the tags. There are a couple of ways you could do this like styling the :hover states of the <li>s to be the same a the <a>'s. Setting the pointer to cursor may be a good start.

2.If you want your design to adapt to the veiwport's width, you don't necessarily need to use @media. @media is used to set break points in your design where elements can reflow above and below those points, percentages can do the rest. I just used a liquid design here: http://jsfiddle.net/ucbEe/ I removed all the fixed widths and placed a 20% width on the li's (5/100=20% width).

Does that make sense enough?

Answer 3

Partial Answer:

1. To make the clickable area bigger add

   nav#main-navigation ul li a { display: block; text-decoration: none; padding: 10px, 20px; }

Setting the display property of the tag to “block”Makes the link expand to fill it's container. Padding increases the size of the clickable area, so adjust the values to suit your needs.

Answer 4

#2

What I do is set the LI's in a UL to display:block when the screen width starts to deter the look and feel of the menu.

For example:

@media only screen and (min-width:0px) and (max-width:960px)
{
    nav#main-navigation li { display:block; width:100%; }
}

The final effect should be a vertical list of menu items. Most of the time I will change the look and feel of the menu item to buttons.

Answer 5

For question number one, one way would be via JQuery. Something like:

$("#main-navigation li").click(function () {
    window.location = $(this).find("a").attr("href");
});

$("#main-navigation a").click(function (e) {
    e.preventDefault();
});

Would do it.