Bootstrap horizontal menu with fade effect on hover

Question

I have the bootstrap horizontal menu which is working on hover. Is it possible to add the fade effect? I wass trying with fadeIn() and fadeOut(), but it mees up the menu.

Here is the example: Bootply

Answer 1

I thought it would be more consistent with Bootstrap if you use tabs in the top menu:

<div class="container">
  <div class="row">
    <ul class="nav nav-tabs pull-right" id="myTab" role="tablist">
      <li class="active"><a href="#one" role="tab" data-toggle="tab">One</a></li>
      <li><a href="#two" role="tab" data-toggle="tab">Two</a></li>
      <li><a href="#three" role="tab" data-toggle="tab">Three</a></li>
    </ul>
  </div>
  <div class="row">
    <div class="tab-content">
      <div class="tab-pane fade in active pull-right" id="one">
        <nav class="navbar navbar-default pull-right submenu" role="navigation">
          <ul class="nav navbar-nav in" id="one-nav">
            <li><a href="#" id="">One sub 1</a></li>
            <li><a href="#" id="">One sub 2</a></li>
            <li><a href="#" id="">One sub 3</a></li>
            <li><a href="#" id="">One sub 4</a></li>
          </ul>
        </nav>
      </div>
      <div class="tab-pane fade pull-right" id="two">
        <nav class="navbar navbar-default pull-right submenu" role="navigation">
          <ul class="nav navbar-nav in" id="two-nav">
            <li><a href="#" id="">Two sub 1</a></li>
            <li><a href="#" id="">Two sub 2</a></li>
          </ul>
        </nav>
      </div>
      <div class="tab-pane fade pull-right" id="three">
        <nav class="navbar navbar-default pull-right submenu" role="navigation">
          <ul class="nav navbar-nav in" id="three-nav">
            <li><a href="#" id="">Three sub 1</a></li>
            <li><a href="#" id="">Three sub 2</a></li>
            <li><a href="#" id="">Three sub 3</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</div>

and then just trigger a click on hover:

$('a','.nav-tabs > li').hover(function(){ 
  $(this).trigger('click'); 
});

// The following addresses the problem listed in the comment below
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  $('.tab-pane').not($(this).attr('href')).removeClass('active');
});

See the bootply here.