CODEWITHSUNDEEP
htmlcsstabshtml-lists
Faizul Hussain
Faizul Hussain

Reputation: 166

html ul li - tabs

I'm scratching my head here for something I thought could be so simple.

I have a tabs created using ul/li elements.

Suppose I have the following:

The tabs gets displayed horizontally like:

Tab1 Tab2 Tab 3

Tab4

There is a fixed width, so it overflows horizontally.

What I would like to have is the row with lowest number of tabs to be at the top like this:

Tab4

Tab1 Tab2 Tab3

How can I accomplish this?

Many thanks in advance

Upvotes: 6

Views: 13180

Answers (7)

Vishal
Vishal

Reputation: 2181

I may not have understood your question clearly, but you seem to be trying to separate out the last tab li element from other li elements:

This can be done using:

.tabs ul li:last-child {
  display: block;
}

and perpending last li to become first, use jQuery as:

$(function(){

   $('.tabs ul').prepend($('.tabs ul').find('li:last'));

});

Upvotes: 1

FariDesign
FariDesign

Reputation: 26

Without looking at your tabs css style its difficult to tell. But consider using some tabbed interface from some frameworks like like bootstrap tabs, foundation tabs or jQuery ui tabs. If your for a premium responsive tabbed solution, have a look zozo tabs, which has a lot of examples.

http://zozoui.com/tabs

cheers

FariDesign

Upvotes: 0

Faizul Hussain
Faizul Hussain

Reputation: 166

Many thanks for all the responses guys. But maybe my question wasn't clear. Also I'm new to stack-overflow.com so please take it easy on me :)

Anyway, what I did last night to solve this issue was using jQuery, remove the current tabs and re-create them - but this time add a fixed number of list-item/tabs per ul/row. If there are more than the fixed number per tab, then create a new ul element for them. Each UL element will be like a new row

Here's my javascript/jQuery

// contains tab headers and contents
var tabsContainer = $('.tabs');
// this is a UL element containing the tab headers
var currentUlElement = $('.tabNavigation');
// this are the LI elemets which are the actual tabs
var currentLiElements = currentUlElement.children('li');

// we can only have 6 tabs plus the '+' tab (total 7) in a row.
// if there's mroe than that we need to sort the overflow
if (currentLiElements.length > 7) {

    // remove all current tab headers
    currentUlElement.remove();

    // create new tab headers container
    var newUlElementRow = $('<ul />');
    // make the list items appear like tabs
    newUlElementRow.addClass('tabNavigation');
    // add the new tabs header container to the front of the main tab/content container control
    tabsContainer.prepend(newUlElementRow);

    for (var index = 0; index < currentLiElements.length; index++) {

        // if one row of tabs is complete
        if (index == 6) {
            // create a new tab headers container
            newUlElementRow = $('<ul />');
            // make the list items appear like tabs
            newUlElementRow.addClass('tabNavigation');
            // add the new tabs header container to the front of the main tab/content container control
            tabsContainer.prepend(newUlElementRow);
        }

        // add the tab/list item to the new tab headers container
        newUlElementRow.append(currentLiElements.get(index));
    }

    // re-enable the tab click actions
    trackNetPeople.SetupTabs();
}

Upvotes: 1

Sinan AKYAZICI
Sinan AKYAZICI

Reputation: 3952

May sound a little confusing at first glance. But not too difficult.

css :

ul {position:relative;}
ul li {padding:3px 10px;height:20px}
ul li:last-child{position:absolute}
ul li:not(:last-child) {float:left;color:green;margin-top:20px; /*height of li*/}
​

Live Demo:

http://jsfiddle.net/f6GEp/

Upvotes: 0

Marc Uberstein
Marc Uberstein

Reputation: 12541

I don't know what type of language you want to use to accomplish this, but here is the jQuery solution :

LIVE EXAMPLE : http://jsfiddle.net/gzZ6C/1/

jQuery

$(function(){
    $('ul').prepend($('ul').find('li:last'));
    $('ul').find('li:not(:first)').css('float','left');
});

UPDATE : added the float styles

Upvotes: 0

sandeep
sandeep

Reputation: 92803

You can write like this:

HTML

<ul>
    <li>test4</li>
    <li>test1</li>
    <li>test2</li>       
    <li>test3</li>
</ul>

CSS

li + li{
    float:left;
}

Check this http://jsfiddle.net/mxgNT/

Upvotes: 0

kristof_w
kristof_w

Reputation: 302

I don't think you can, since you're not using any "rows". It's simply text that gets pushed to the next line.

If your tabs come from a database you could process them using PHP, ordering them using an array, but you'll still need another way to display them. A table may be a good alternative (in this case anyway).

Upvotes: 0

Related Questions