0

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: https://i.stack.imgur.com/eJfhI.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?

Roy
  • 705
  • 2
  • 11
  • 32

2 Answers2

1

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.

Community
  • 1
  • 1
Roy
  • 705
  • 2
  • 11
  • 32
0

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

gauti
  • 1,264
  • 3
  • 17
  • 43
  • Does not help I'm afraid, I know how to create dropdown lists but it's integrating them with jQuery UI tabs specifically that I'm asking for help with. – Roy Jun 14 '13 at 10:50
  • you can easily integrate this with your page.if u click on ur tab, the related tab container wil appear.the site which i posted is targeted by mouse over.instead of mouse over u can use click event.if any title has options u just indicate with some arrow marks.once user click the arrow mark u can show the content.if u use jquery tabs ur code wil be high that s y i suggested u to go with simple show & hide. – gauti Jun 14 '13 at 11:02
  • No, as I mentioned in my original post the dropdown options show on :hover, not mouse click. Again, I know how to create dropdown lists. I am specifically asking for integration help with jQuery UI tabs. – Roy Jun 14 '13 at 11:10
  • 1
    I'm not sure we understand each other. The problem is not getting a list to show up on mouseover. The problem is integrating it with jQuery UI tabs. jQuery UI tabs seems to only allow one link per tab because it uses jQuery to apply classes to each tab and reads the tag inside each
  • element, which limits itself to 1 option per tab
    • – Roy Jun 14 '13 at 12:26