CODEWITHSUNDEEP
htmlcss
Gabriel Santos
Gabriel Santos

Reputation: 4974

Menu floating left and right

I have the follow HTML:

<div id="menu">
    <ul class="menu">
        <li class="item-101"><a href="/">Home</a></li>
        <li class="item-113"><a href="/sobre">Sobre</a></li>
        <li class="item-114"><a href="/portfolio">Portfolio</a></li>
        <li class="item-115"><a href="/bastidores">Bastidores</a></li>
        <li class="item-116"><a href="/blog">Blog</a></li>
        <li class="item-117"><a href="/contato">Contato</a></li>
    </ul>
</div>

and CSS:

#menu{width:900px;margin:0 auto;}
#menu ul{margin:0;padding:0;}
#menu li{float:left;margin:10px;}
#menu .item-115, #menu .item-116, #menu .item-117{float:right;}

I want 3 menus floating left and 3 floating right, but they are reverting order.

How to do this?

Upvotes: 1

Views: 7858

Answers (7)

rdleal
rdleal

Reputation: 1032

You can achieve this with pure css, just set the display property of the lis to inline-block and the text-align property of the ul to right, then float the first three lis to left so they get back to their original position without messing up with the order they are declared in the document. Like this:

#menu{width:900px;margin:0 auto;}
#menu ul{margin:0;padding:0; text-align: right}
#menu li{display:inline-block;margin:10px;}
#menu .item-101, #menu .item-113, #menu .item-114{float: left}​

Live example:

Hope it helps.

Upvotes: 2

Salman Arshad
Salman Arshad

Reputation: 272106

I believe you are wondering why the order of right-floated element if flipped, this how the floats are supposed to behave. It is all described here:

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float.

For the three right floated elements in your example, the first one (source-order-wise) aligns with the right edge. The next item in also shifts towards right; only to find another float in its way and stops. Likewise for the third float.

The solution is to create one right floated container which contains the three supposed-to-be-right-floated elements, floated left.

Upvotes: 1

thirtydot
thirtydot

Reputation: 228182

Here's what I suggest: http://jsfiddle.net/thirtydot/w64Nb/2/

The HTML is identical to what's in your question.

No, .item-{uid-for-menu} are random, but for each li I can float with jquery last tree menu. – Gabriel Santos

@thirtydot assume the class always will be the same, and suggest one solution, then, I adapt my javascript to generate the same class as my sample class. – Gabriel Santos

Instead of relying on certain classes being present, or forcing them to be the same using JavaScript, you can just solve the whole problem with jQuery (which in a different comment, you said you have available):

$($('#menu li').slice(-3).get().reverse())
    .addClass('right').remove().appendTo('#menu .menu');​

That will take the last three li inside #menu, add the .right class (which is just float: right), and reverse the order in the HTML.

Upvotes: 3

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174967

Hold each in its own list

<nav>
    <ul class="menu menu-to-the-left">
        <li class="item-101"><a href="/">Home</a></li>
        <li class="item-113"><a href="/sobre">Sobre</a></li>
        <li class="item-114"><a href="/portfolio">Portfolio</a></li>
    </ul>
    <ul class="menu menu-to-the-right">
        <li class="item-115"><a href="/bastidores">Bastidores</a></li>
        <li class="item-116"><a href="/blog">Blog</a></li>
        <li class="item-117"><a href="/contato">Contato</a></li>
    </ul>
</nav>

In case you cannot edit the source code, you can do something like this. It involves setting fixed widths on menu items though. Live Example:

#menu {
    width:  900px;
    margin: 0 auto;
}

#menu ul {
    margin:  0;
    padding: 0;
}

#menu li, #menu li a {
    float:  left;
    width: 100px;
}
#menu li:nth-child(4) {
    margin-left: 300px;
}

Upvotes: 2

Dennis Hunink
Dennis Hunink

Reputation: 583

You can do it like this. http://jsfiddle.net/xeQBd/1/ Simply don't let the 'left' items float; only apply to the ones that you need to float to the right. 

#menu{width:900px;margin:0 auto;}
#menu ul{
    margin:0;padding:0; display:block;
}
#menu li{
    margin:10px;
    display:inline-block;
}
#menu .item-115, #menu .item-116, #menu .item-117{
    float:right;
}​

I've used something like this on www.hoeve-bouwlust.nl/activiteiten in the menu

Upvotes: 3

Vladimir Starkov
Vladimir Starkov

Reputation: 19803

my solution preview:

enter image description here

i think you can change the order of you menu items, so you only must to reverse order of last three items (online demo on dabblet.com):

<div id="menu">
    <ul class="menu">
        <li class="item-101"><a href="/">Home</a></li>
        <li class="item-113"><a href="/sobre">Sobre</a></li>
        <li class="item-114"><a href="/portfolio">Portfolio</a></li>

        <!-- reverse order of last three items -->
        <li class="item-117"><a href="/contato">Contato</a></li>
        <li class="item-116"><a href="/blog">Blog</a></li>
        <li class="item-115"><a href="/bastidores">Bastidores</a></li>
    </ul>
</div>

Upvotes: 1

M Rostami
M Rostami

Reputation: 4195

CSS:

#menu{width:900px;margin:0 auto;}
#menu ul{margin:0;padding:0;}
#menu li{margin:10px;width:100px}
.item-115,.item-116,.item-117{float:right;}
.item-101,.item-113,.item-114{float:left;}

Upvotes: 1

Related Questions