Хоризонтално меню на Bootstrap с ефект на избледняване при задържане

Имам хоризонталното меню за първоначално зареждане, което работи при задържане. Възможно ли е да се добави ефектът на избледняване? Опитвах с fadeIn() и fadeOut(), но ми отговаря на менюто.

Ето примера: Bootply


javascript jquery twitter-bootstrap fadein fadeout
person Adrian    schedule 14.07.2014    source източник
comment
можеш ли да дадеш пример как трябва да работи? с примерен сайт?   -  person Izekid    schedule 14.07.2014
comment
Нещо подобно на главното меню на този сайт: ue.katowice.pl   -  person Adrian    schedule 14.07.2014

Отговори (2)


arrow_upward
1
arrow_downward

Мислех, че ще бъде по-последователно с Bootstrap, ако използвате раздели в горното меню:

<div class="container">
  <div class="row">
    <ul class="nav nav-tabs pull-right" id="myTab" role="tablist">
      <li class="active"><a href="/bg#one" role="tab" data-toggle="tab">One</a></li>
      <li><a href="/bg#two" role="tab" data-toggle="tab">Two</a></li>
      <li><a href="/bg#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="/bg#" id="">One sub 1</a></li>
            <li><a href="/bg#" id="">One sub 2</a></li>
            <li><a href="/bg#" id="">One sub 3</a></li>
            <li><a href="/bg#" 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="/bg#" id="">Two sub 1</a></li>
            <li><a href="/bg#" 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="/bg#" id="">Three sub 1</a></li>
            <li><a href="/bg#" id="">Three sub 2</a></li>
            <li><a href="/bg#" id="">Three sub 3</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</div>

и след това просто задействайте щракване при задържане:

$('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');
});

Вижте bootply тук.

person mccannf    schedule 14.07.2014
comment
работи доста добре с изключение на едно нещо - когато движите бързо курсора отляво надясно или отдясно наляво в списъка с раздели - понякога три подменюта са активни наведнъж - person Adrian; 15.07.2014
comment
Прав си. Изглежда като малка грешка в Bootstrap. Добавена е проверка в JavaScript по-горе, за да се коригира това. - person mccannf; 15.07.2014
comment
Сега е перфектно :) Благодаря за помощта! - person Adrian; 16.07.2014

arrow_upward
1
arrow_downward

Опитайте тази

JQUERY

$('[data-toggle=collapse]').hover(function (e) {
  $('[data-toggle=collapse]').parent('li').removeClass('active');
  $(this).parent('li').toggleClass('active');
  $($(this).data('target')).collapse('show').fadeIn(fast);
});

$('.collapse').on('shown.bs.collapse', function (e) {
  $('.collapse').not(this).removeClass('in').fadeOut(fast);
});

CSS

.navbar {
    margin-bottom:-1px;
    border-radius:0;
}

#submenu {
    background-color: #e7e7e7;
    margin-bottom:20px;
}

.collapsing {
    display:none;

}

Единственото нещо, което промених, е, че бързо избледнява и изчезва бързо...

Моля, за повече адаптиране и свойствата на свойството fadeIn / fadeOut тук е страхотна връзка

http://api.jquery.com/fadein/

person Izekid    schedule 14.07.2014