css - example - menu dropdown bootstrap




Como fazer com que o menu suspenso do Twitter Bootstrap seja exibido em vez de clicar (20)

Eu gostaria de ter o menu Bootstrap automaticamente suspenso em vez de ter que clicar no título do menu. Eu também gostaria de perder as pequenas setas ao lado dos títulos do menu.


A melhor maneira de fazer isso é apenas acionar o evento click do Bootstrap com um hover. Desta forma, deve continuar a ser compatível com dispositivos sensíveis ao toque.

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

A solução da jQuery é boa, mas será necessário lidar com eventos de cliques (para celular ou tablet), já que o foco não funciona corretamente ... Talvez seja possível fazer alguma detecção de redimensionamento de janela?

A resposta de Andres Ilich parece funcionar bem, mas deve ser envolvida em uma consulta de mídia:

@media (min-width: 980px) {

    .dropdown-menu .sub-menu {
        left: 100%;
        position: absolute;
        top: 0;
        visibility: hidden;
        margin-top: -1px;
    }

    .dropdown-menu li:hover .sub-menu {
        visibility: visible;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
    }

    .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
        margin-top: 0;
    }

    .navbar .sub-menu:before {
        border-bottom: 7px solid transparent;
        border-left: none;
        border-right: 7px solid rgba(0, 0, 0, 0.2);
        border-top: 7px solid transparent;
        left: -7px;
        top: 10px;
    }
    .navbar .sub-menu:after {
        border-top: 6px solid transparent;
        border-left: none;
        border-right: 6px solid #fff;
        border-bottom: 6px solid transparent;
        left: 10px;
        top: 11px;
        left: -6px;
    }
}

Além da resposta de "My Head Hurts" (que foi ótimo):

ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;    
}

Existem dois problemas persistentes:

  1. Clicar no link suspenso abrirá o menu suspenso. E ele permanecerá aberto, a menos que o usuário clique em outro lugar ou passe por cima dele, criando uma interface do usuário inconveniente.
  2. Há uma margem de 1 px entre o link suspenso e o menu suspenso. Isso faz com que o menu suspenso fique oculto se você se mover lentamente entre o menu suspenso e o menu suspenso.

A solução para (1) está removendo os elementos "class" e "data-toggle" do link nav

<a href="#">
     Dropdown
     <b class="caret"></b>
</a>

Isso também lhe dá a capacidade de criar um link para sua página principal - o que não era possível com a implementação padrão. Você pode simplesmente substituir o "#" pela página que deseja enviar ao usuário.

A solução para (2) está removendo a margem superior no seletor de menu suspenso.

.navbar .dropdown-menu {
 margin-top: 0px;
}

Esta é provavelmente uma idéia estúpida, mas para apenas remover a seta apontando para baixo, você pode excluir o

<b class="caret"></b>

Isso não faz nada para apontar um, embora ...


Eu criei um menu drop-down suspenso com base no mais recente (v2.0.2) framework Bootstrap que tem suporte para vários submenus e pensei em publicá-lo para futuros usuários:

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

.sidebar-nav {
  padding: 9px 0;
}

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
  visibility: visible;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}

.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a href="#" class="brand">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
                <ul class="dropdown-menu sub-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form action="" class="navbar-search pull-left">
          <input type="text" placeholder="Search" class="search-query span2">
        </form>
        <ul class="nav pull-right">
          <li><a href="#">Link</a></li>
          <li class="divider-vertical"></li>
          <li class="dropdown">
            <a class="#" href="#">Menu</a>
          </li>
        </ul>
      </div>
      <!-- /.nav-collapse -->
    </div>
  </div>
</div>

<hr>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Regular link</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu" id="menu1">
      <li>
        <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
        <ul class="dropdown-menu sub-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li class="nav-header">Nav header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
</ul>

Demo


Eu publiquei um plug-in adequado para a funcionalidade suspensa do flutuante Bootstrap 3, na qual você pode até mesmo definir o que acontece ao clicar no elemento dropdown-toggle (o clique pode ser desativado):

github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

Por que eu fiz isso quando já existem muitas soluções?

Eu tive problemas com todas as soluções existentes anteriormente. Os CSS simples não estão usando a classe .open no .dropdown , portanto, não haverá feedback sobre o elemento de alternância suspenso quando o menu suspenso estiver visível.

Os js estão interferindo em clicar em .dropdown-toggle , portanto, o menu suspenso é .dropdown-toggle em foco, depois o oculta ao clicar em um menu suspenso aberto, e mover o mouse acionará o menu suspenso para que ele seja exibido novamente. Algumas das soluções js estão quebrando a compatibilidade do iOS, alguns plugins não estão funcionando em navegadores de desktop modernos que estão suportando os eventos de toque.

É por isso que eu fiz o plugin github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover do github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover que evita todos esses problemas usando apenas a API JavaScript padrão do Bootstrap, sem qualquer invasão . Até mesmo os atributos do Aria estão funcionando bem com este plugin.


Existem muitas soluções realmente boas aqui. Mas eu pensei que eu iria em frente e colocaria a minha aqui como outra alternativa. É apenas um snippet jQuery simples que faz do jeito que o bootstrap faria se ele suportasse suspender para dropdowns ao invés de apenas clicar. Eu só testei isso com a versão 3, então eu não sei se funcionaria com a versão 2. Salve-a como um trecho no seu editor e o tenha no toque de uma tecla.

<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
    });
</script>

Basicamente, é só dizer quando você passa o mouse sobre a classe suspensa, ele adicionará a classe aberta a ela. Então isso simplesmente funciona. Quando você para de passar o pai / mãe li com a classe suspensa ou o filho ul / li, ele remove a classe aberta. Obviamente, esta é apenas uma das muitas soluções, e você pode adicioná-la para que ela funcione somente em instâncias específicas de .dropdown. Ou adicione uma transição para pai ou filho.


Isso deve ocultar as listas suspensas e seus carets se eles forem menores que um tablet.

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}

Isso vai esconder os que estão acima

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}

Isto é construído em Bootstrap 3. Basta adicionar isso ao seu CSS:

.dropdown:hover .dropdown-menu {
display: block;
}

Para fazer o menu cair automaticamente, isso pode ser feito usando CSS básico. Você precisa trabalhar com o seletor para a opção de menu oculto e, em seguida, configurá-lo para exibir como bloco quando a tag li apropriada é pairada sobre. Tomando o exemplo da página de bootstrap do twitter, o seletor seria o seguinte:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

No entanto, se você estiver usando os recursos responsivos do Bootstrap, não desejará essa funcionalidade em uma barra de navegação recolhida (em telas menores). Para evitar isso, envolva o código acima em uma consulta de mídia:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

Para ocultar a seta (circunflexo), isso é feito de diferentes maneiras, dependendo se você está usando o Twitter Bootstrap versão 2 e inferior ou a versão 3:

Bootstrap 3

Para remover o cursor na versão 3, basta remover o HTML <b class="caret"></b> do elemento de ancoragem .dropdown-toggle :

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

Bootstrap 2 e inferior

Para remover o acento circunflexo na versão 2, você precisa de um pouco mais de insight sobre CSS e sugiro observar como o pseudo elemento :after funciona em mais detalhes. Para você começar no seu caminho para entender, para mirar e remover as setas no exemplo do bootstrap do twitter, você usaria o seguinte seletor CSS e código:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

Ele funcionará a seu favor se você analisar mais detalhadamente como eles funcionam e não apenas usar as respostas que eu lhes dei.

Obrigado ao @CocaAkat por apontar que estávamos perdendo o combinador filho ">" para evitar que os submenus fossem mostrados no pai dos pais


Só quero adicionar, que se você tiver vários dropdowns (como eu) você deve escrever:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

E isso funcionará corretamente.


Simplesmente personalize seu estilo CSS em três linhas de código

.dropdown:hover .dropdown-menu {
   display: block;
}

Sobrescreva bootstrap.js com este script.

jQuery(document).ready(function ($) {
$('.navbar .dropdown').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

$('.dropdown-submenu').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

}); 

Use este código para abrir o submenu em mousehover (somente desktop):

$('ul.nav li.dropdown').hover(function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').show();
    }
}, function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').hide().css('display','');
    }
});

E se você quiser que o menu de primeiro nível seja clicável, até mesmo no celular, adicione isto:

    $('.dropdown-toggle').click(function() {
    if ($(this).next('.dropdown-menu').is(':visible')) {
        window.location = $(this).attr('href');
    }
});

O submenu (menu suspenso) será aberto com mousehover na área de trabalho e com clique / toque no celular e tablet. Quando o submenu estiver aberto, um segundo clique permitirá que você abra o link. Graças ao if ($(window).width() > 767) , o submenu terá a largura de tela cheia no celular.


Você pode usar o método padrão $().dropdown('toggle') para alternar o menu suspenso em hover:

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});

Então você tem este código:

<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>

<ul class="dropdown-menu" role="menu">
    <li>Link 1</li>
    <li>Link 2</li> 
    <li>Link 3</li>                                             
</ul>

Normalmente, ele funciona em um evento de clique e você quer que ele funcione em um evento de foco. Isso é muito simples, basta usar este código JavaScript / jQuery:

$(document).ready(function () {
    $('.dropdown-toggle').mouseover(function() {
        $('.dropdown-menu').show();
    })

    $('.dropdown-toggle').mouseout(function() {
        t = setTimeout(function() {
            $('.dropdown-menu').hide();
        }, 100);

        $('.dropdown-menu').on('mouseenter', function() {
            $('.dropdown-menu').show();
            clearTimeout(t);
        }).on('mouseleave', function() {
            $('.dropdown-menu').hide();
        })
    })
})

Isso funciona muito bem e aqui está a explicação: temos um botão e um menu. Quando passamos o botão, exibimos o menu e, quando o mouse é pressionado, ocultamos o menu depois de 100 ms. Se você quer saber porque eu uso isso, é porque você precisa de tempo para arrastar o cursor do botão sobre o menu. Quando você está no menu, a hora é reiniciada e você pode ficar lá quantas vezes quiser. Quando você sair do menu, vamos esconder o menu instantaneamente sem qualquer tempo limite.

Eu usei este código em muitos projetos, se você encontrar algum problema em usá-lo, fique à vontade para me fazer perguntas.


Isso funciona para o WordPress Bootstrap:

.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
    content: none;
}

Aqui está minha técnica que adiciona um pequeno atraso antes que o menu seja fechado depois que você parar de passar o mouse no menu ou no botão de alternância. O <button>que você normalmente clicaria para exibir o menu de navegação é #nav_dropdown.

$(function() {
  var delay_close_it, nav_menu_timeout, open_it;
  nav_menu_timeout = void 0;
  open_it = function() {
    if (nav_menu_timeout) {
      clearTimeout(nav_menu_timeout);
      nav_menu_timeout = null;
    }
    return $('.navbar .dropdown').addClass('open');
  };
  delay_close_it = function() {
    var close_it;
    close_it = function() {
      return $('.navbar .dropdown').removeClass('open');
    };
    return nav_menu_timeout = setTimeout(close_it, 500);
  };
  $('body').on('mouseover', '#nav_dropdown, #nav_dropdown *', open_it).on('mouseout', '#nav_dropdown', delay_close_it);
  return $('body').on('mouseover', '.navbar .dropdown .dropdown-menu', open_it).on('mouseout', '.navbar .dropdown .dropdown-menu', delay_close_it);
});

Para melhorar a resposta do Sudharshan , eu coloco isso em uma consulta de mídia para evitar que o hover seja exibido em larguras de exibição do XS ...

@media (min-width:768px)
{
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;    
    }

    .nav .dropdown-menu {
        margin-top: 0;
    }
}

Além disso, o cursor na marcação não é necessário, apenas a classe suspensa para o li .





twitter-bootstrap