jQuery UI Tabs with dropdown enabled tabs

Question

I am currently using jQuery UI for page navigation and I am trying to integrate dropdown menus into the tabs because jQuery UI does not look good when there are many tabs. For an idea of what I've got so far, take a look at this screenshot: http://i.imgur.com/T9lwLI8.png

The top section is the regular jQuery-UI tabs and the lower section is the new menu design with the mouse hovered over 'patient'. The new menu design is pure CSS - simply layered ul and li tags display: none or block depending on :hover.

Its been a nightmare trying to replace the default jQuery-UI tabs. Styles and jQuery functionality appear to be mixed together because removing the default ids and classes breaks the tabbing functionality but if I add the default ids and classes to my new tabs section it adds unwanted styles to it as well as other bizarre errors.

My guess is that jQuery UI Tabs expects only one ul list containing the tabs but because my CSS implementation uses a ul list for every dropdown-enabled tab it doesn't like it. I've looked through the .js and .css files but to be honest I'm not sure what I'm looking for as I'm by no means an expert on the matter.

I've been Googling but the only solutions I can find usually resort to implementing a carousel to hide/show extra tabs that would otherwise get pushed to another line. How would I get jQuery UI tabs to work with tabs that have dropdown menus on mouseover?

Answer 1

for drop menus you can use css and simply jquery (.show) and (.hide). there will be some simple calculation and css positioning.Every tab container should have one your drop down menu list. once u hover the tab u can show the container ..if any lists presents under ur drop down lists u can show by another list which will be present at right side of drop down list which is selected in drop down.You can refer this link.. this idea make ur page looks good.

http://foundation.zurb.com/page-templates4/grid.html

Answer 2

It took a lot of searching and frustration but I finally managed to come upon a solution. It's not exactly ideal, but it works.

I hide the ul tag directly under the 'tabs' div jQuery UI uses with display:none then roll out my navigation menu below it.

I wrote this simple function to navigate between pages (taken from here):

function changeTab(tabIndex) {
    $("#tabs").tabs( "option", "active", tabIndex );    
    }

tabIndex is zero-indexed, so if your tab is #page-2 then tabIndex would be 1. Give your tabs unique id attributes then roll it out with some jQuery like:

$('#tabTwo').click(function() {
    changeTab(1);
    });

Again not a great solution but importantly it does work.