Forums

erikportin

This is is my problem:
- I need to make a horizontal menu
- It needs to be flexible so no set width
- The frist and the last element have to be align to the very beginning and end of the nav
- The nav element can be different width
- The gap between the elements have to be equal (except no gap before the first element and no gap after the last )

My current solution is like this (see it in action here http://jsfiddle.net/wKjVq/):

ul{
    -webkit-box-orient: horizontal;
    display: -webkit-box;
    width: 100%;
}

.empty {
    -webkit-box-flex: 1;
}
<ul>
    <li>Element 1</li>
    <li class="empty"></li>
    <li>El 2</li>
    <li class="empty"></li>
    <li>Element three</li>
    <li class="empty"></li>
    <li>Element 4</li>
</ul>

By using box flex the empty list elements makes even gaps between the "real" nav elements.
I'm happy with the outcome of this solution but not really happy with using empty divs.

So my first questions is: Am I missing something totally obvious?
My 2nd question is: Do anyone else have any other solution (preferably in css 2 but css3 is fine as long as there is a nice fallback)?

Paulie_D

There is no way (to my knowledge) to do this with pure CSS without setting specific %age widths to your li elements and respective margins.

Javascript to do some calculations summing the width of the li elements and then dividing appropriately to set margins would seem to be the answer but I have no skills in that area.

Frankly I think you're putting an awful lot of stress on EXACT requirements that the viewer probably won't event notice.

erikportin

Thanks Paulie_D. Yes javascript would be an option and not too difficult to implement. But I try not to use javascript for responsiveness and flexibility.

It's the "awful lot of stress on EXACT requirements" that makes this to a challenge isn't it? And challenges are fun!

(Also, in this particular case the exact requirements makes the website looks so much better.)

erikportin

Also posted this on stack overflow and got a solution

Paulie_D

Nice solution but you'll need a fallback for non-webkit broswers.

erikportin

Yes you're right Paulie_D but there's a comment to the answer that links to cross-browser safe solution.

springlab

i quickly through this together. Not exactly what you may be looking for, but same idea and browser friendly.

<ul>
    <li class="first-li">Element 1</li>
    <li class="middle-li">El 2</li>
    <li class="middle-li">Element three</li>
    <li class="last-li">Element 4</li>
</ul>

ul{
    max-width: 100%;
}

li{
    float:left;
}

li.first-li{
    text-align: left;
    margin-right: 2%;
    width: 23%;
    background-color:red;
}

li.middle-li{
     text-align: center;
     margin: 0 2%;
     width: 21%;
     background-color:green;
}

li.last-li{
     text-align:right;
     margin-left: 2%;
     width: 23%;
     background-color:blue;
}

erikportin

Thanks springlab. It's almost a good solution but the gaps between the actual words are different. In this case especially the gap between the first and the second element is much larger than the others as you can see here http://jsfiddle.net/3R7GU/1/

Paulie_D

@ erikportin "Yes you're right Paulie_D but there's a comment to the answer that links to cross-browser safe solution."

Which leads me back to...."I think you're putting an awful lot of stress on EXACT requirements that the viewer probably won't event notice." since you're happy to fallback for non-webkit browser.

Not that I don't love the idea...just it's a lot of hassle for very little gain...but then 'each to their own'. :)

treehouse : what would you like to learn today?

Forums

Flexible horizontal navigation with equal distance between nav elements