Adding dropdown menu on JQuery UI tabs

Question

I've to add a dropdown menu on a tab of a "JQuery UI tabs", in summary I've a page like:

$( function() {
  $( "#tabs" ).tabs();
} );

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>Content of tab 1.</p>
  </div>
  <div id="tabs-2">
    <p>Content of tab 2.</p>
  </div>
  <div id="tabs-3">
    <p>Content of tab 3.</p>
  </div>
</div>

And when user clicks on "Tab 2", I'd like to show a dropdown menu with two list items ("Tab 2" and a hypothetical "Tab 4").

How can I add a dropdown menu on a JQuery UI tabs? And how can I add an "hidden" additional tab?

Thanks

Update: I'd like to have something like:

Just saying, but maybe this is not the best UI approach, as you are showing a new element from within a menu inside another element of the same level. It could be quite confusing for some of your users, maybe you should redesign the interface and group tab2 and tab4 as different sections inside the same tab or something like that — Bardo, Apr 24 '17 at 08:19

Pugazh · Accepted Answer · 2017-04-24T11:12:30.047

Below example can help you get started.

$(function() {
  $("#tabs").tabs();

  //Below code hides Tab 4 (#tabs-4)
  $("#tabs").find('a[href="#tabs-4"]').closest('li').hide();

  $('.tabsubmenu li').click(function() {
    $('.tabsubmenu li').removeClass('active');
    $(this).addClass('active');

    if ($(this).text() == 'Sub menu 1')
      $("#tabs").tabs({
        active: 1
      });
    else {
      $("#tabs").tabs({
        active: 3
      });
      $('a[href="#tabs-4"]').closest('li').removeClass('ui-tabs-active ui-state-active');
      $('a[href="#tabs-2"]').closest('li').addClass('ui-tabs-active ui-state-active');
    }
  });
});

* {
  outline: none;
}

li.tab ul {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #d5d5d5;
  border-radius: 0 0 3px 3px;
}

li.tab:hover ul li {
  color: #454545;
  margin: 0;
  background-color: #e9e9e9;
  padding: 4px 10px;
  cursor: pointer;
  border-bottom: 1px solid #d5d5d5;
}

li.tab:hover ul li:hover,
li.tab:hover ul li.active {
  background-color: #ffffff;
}

li.tab:hover ul {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li class="tab"><a href="#tabs-2">Tab 2 ▼</a>
      <ul class="tabsubmenu">
        <li>Sub menu 1</li>
        <li>Sub menu 2</li>
      </ul>
    </li>
    <li><a href="#tabs-3">Tab 3</a></li>

    <!-- Below code represents Tab 4 header/link -->
    <li><a href="#tabs-4">Tab 4</a></li>
  </ul>
  <div id="tabs-1">
    <p>Content of tab 1.</p>
  </div>
  <div id="tabs-2">
    <!-- Add the tab content here -->
    <p>Tab 2 : Content of tab 2.</p>
  </div>
  <div id="tabs-3">
    <p>Content of tab 3.</p>
  </div>
  <!-- Below code represents the body of Tab 4 -->
  <div id="tabs-4">
    <p>Tab 4 : Content of tab 4.</p>
  </div>
</div>

@Alessandro - Updated the code as per your need. Check the updated answer. — Pugazh, Apr 24 '17 at 07:54

score 1 · Answer 2 · answered Apr 24 '17 at 08:49

There is no native option to do that so we'll use some jQuery UI hacks. Our strategy will be creating a jQuery UI menu element, it will be hidden. When the user clicks on the tab element, we will show the menu positioned relative to the the mouse pointer.

Base HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>Content of tab 1.</p>
  </div>
  <div id="tabs-2">
    <p>Content of tab 2.</p>
  </div>
  <div id="tabs-3">
    <p>Content of tab 3.</p>
  </div>
</div>

We now create a menu element (http://jqueryui.com/menu/), it will be hidden by default:

<ul id="submenu" style="width:150px;display:none;">
  <li><div>Option 1</div></li>
  <li><div>Option 2</div></li>
</ul>

Javascript:

$( function() {
  $( "#tabs" ).tabs();  //initialize the tabs
  $("#submenu").menu(); //initialize the created menu
} );

Capture the click event on every tab:

$("a[href^='#tabs']").on("click",function(){

  if ($(this).attr("href")=="#tabs-2"){
    //it is the tab2, show the menu
    $("#submenu").show().position( 
  { my: "left top",
    of: event
    });
  }else{ //is a different tab, hide the menu
    $("#submenu").hide();
  }  
});

If the user selects something on the submenu, hide it

$("#submenu").on("click",function(){$(this).hide();});

Check mi fiddle.

Adding dropdown menu on JQuery UI tabs

2 Answers2