jQuery UI tabs aligned and sharing bar with a title

Question

I would like to use jQuery UI tabs but I need the tabs aligned right … That's "easy" since I can modify the tabs container class and extend it.

But the thing is I want to add a "title" on the left, as shown in this screenshot: http://cl.ly/400D0E3z0f272h1B3x3R

How can I do it in a clean way ?

(A dirty way could be to prepend/append a div to the tabs tag, adding the DOM on the fly … I'm looking a cleaner way :)

Thank you in advance

Answer 1

First there is nothing dirty adding elements to the dom on the fly :-)

Secondly, you could simply add an element in the markup, for instance a <h3> (let's be semantic (and assume you got other titles before)):

<div id="tabs">
    <h3 class="ui-tab-title">My Title</h3>
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
    ...
</div>

and position it with css:

/* float tab buttons to right */
.ui-tabs .ui-tabs-nav li { float: right !important; }

/* position:relative on container will make the title position:absolute relative to the container */
#tabs { position: relative; }

/* absolute position the title */
.ui-tab-title { position: absolute; left: 20px; top: 15px; }

Here's a jsfiddle to illustrate

---

Edit:

As you pointed out, floating right the <li> inverts their order.

You could invert the order of the list items in the markup itself but this will mess up the whole logic.

Here's a piece of css to right align the tab button while keeping the markup and the visual order in place:

/* align right the <ul> container */
.ui-tabs .ui-tabs-nav { height: 2.35em; text-align: right; }

/* jquery ui css floats-left the <li> so un-float them */
.ui-tabs .ui-tabs-nav li { display: inline-block; float: none; }

I've changed the fiddle accordingly.