CODEWITHSUNDEEP
jquery-uicss
Uri Lukach
Uri Lukach

Reputation: 1121

jQuery UI Tabs - How to represent an active tab using a down arrow (instead of the standard style)

One of my service pages needs inner tabs. I already use regular jQuery UI Tabs in the page and I would like to use a different styling for the inner tabs.

Many popular sites use inner tabs differently from the main tabs by using simple text for the tabs titles, a long underline beneath the titles and a down arrow to represent the selected tabs. (image attached).

Do you know how to style jQuery UI Tabs to place a down arrow when the tab is selected?

enter image description here

Upvotes: 1

Views: 3531

Answers (3)

Jesse Kinsman
Jesse Kinsman

Reputation: 772

Oh you want to know how to create the triangle using css3. Well you can do this using css, however, your example above isn't completely possible only using css. You can't have a border on the triangle as it is created using borders.

You create the downward triangle like this

.arrow { width: 0; 
height: 0; 
border-left: 10px solid transparent; 
border-right: 10px solid transparent; 
border-top: 10px solid black; 
}

I created what you are looking for in a fiddle.

http://jsfiddle.net/jessekinsman/Mn2sx/

However, if you want to create exactly what you have above, you could use custom icon font for the triangle then you could put a text-shadow on it and it could have a stroke.

However, that being said, if you want backward compatibility and the ability to add shadows and border to the triangle, an image is going to be your most compatible approach.

Upvotes: 4

Jesse Kinsman
Jesse Kinsman

Reputation: 772

Yes this is pretty easy by just styling the li element with the class="active"

Something like this

.tabs {
border-bottom: 1px solid #000;
}
.tabs li.active {
border-bottom: 1px solid #fff;
padding: 5px;
background: url(../images/arrow.png) 5px 50%;
}

The above is just sample code to give you an idea. You will have to tweak the image values to get the arrow image to line up properly.

However, I think your question might be more involved.

Are you asking how to style two separate jQuery tabs that exist on the same page with a different style?

If that is the case, I would recommend wrapping one of the styles in a element with a unique class or id. Like this: 

<div class="new-tabs"> 
<ul class="tabs">
<li><a href="#">Tab1</a></li>
</ul>
</div>

Then you can copy all the styling from the tabs.css (I can't remember the exact name of the css file at the present time) and add the class or id before all those rules. Like this

.tab li { something.... }
.new-tabs .tab li {something...}

Walaa, you now have a completely separate set of styles for the tabs within the container.

I would recommend working through the styles you just copied and deleting what you don't need.

Upvotes: 0

dwaddell
dwaddell

Reputation: 1506

You could try adding some css to the class ui-tabs-active, something like what is shown on this website: http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/

Upvotes: 0

Related Questions