css - working - logo navbar bootstrap 4




Come rendere il menu a discesa Twitter Bootstrap al passaggio del mouse anziché fare clic (20)

Mi piacerebbe che il mio menu Bootstrap scendesse automaticamente al passaggio del mouse, piuttosto che dover fare clic sul titolo del menu. Mi piacerebbe anche perdere le piccole frecce accanto ai titoli dei menu.


Aggiunto anche margin-top: 0 per reimpostare il margine cst bootstrap per il menu .dropdown in modo che l'elenco dei menu non scompaia quando l'utente passa lentamente dal menu a discesa alla lista dei menu.

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

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

Ancora meglio con jQuery:

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).show();
  jQuery(this).addClass('open');
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).hide();
  jQuery(this).removeClass('open');
});

Ecco la mia tecnica che aggiunge un leggero ritardo prima che il menu venga chiuso dopo aver smesso di passare con il mouse sul menu o il pulsante di attivazione / disattivazione. Il <button> che si farebbe normalmente clic per visualizzare il menu di navigazione è #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);
});

Ho creato un menu a discesa puro al passaggio del mouse sopra l'ultimo (v2.0.2) framework Bootstrap che supporta diversi sottomenu e ho pensato di pubblicarlo per i futuri utenti:

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


Ho usato un po 'di jQuery:

// Add hover effect to menus
jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

Il modo migliore per farlo è semplicemente attivare l'evento click di Bootstrap con un hover. In questo modo, dovrebbe comunque rimanere in contatto con il dispositivo.

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

La soluzione jQuery è buona, ma dovrà gestire gli eventi di clic (per dispositivi mobili o tablet) poiché il passaggio del mouse non funzionerà correttamente ... Potrebbe forse eseguire un rilevamento della ridimensionamento della finestra?

La risposta di Andres Ilich sembra funzionare bene, ma dovrebbe essere racchiusa in una query multimediale:

@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;
    }
}

Oltre alla risposta di "My Head Hurts" (che è stato grandioso):

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

Ci sono 2 problemi persistenti:

  1. Facendo clic sul collegamento a discesa si aprirà il menu a discesa. E rimarrà aperto a meno che l'utente non clicchi da qualche altra parte o rimanga sospeso su di esso, creando un'interfaccia utente scomoda.
  2. C'è un margine di 1 pixel tra il collegamento a discesa e il menu a discesa. Ciò fa sì che il menu a discesa diventi nascosto se ti sposti lentamente tra il menu a discesa e il menu a discesa.

La soluzione per (1) sta rimuovendo gli elementi "class" e "data-toggle" dal link nav

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

Questo ti dà anche la possibilità di creare un link alla tua pagina padre, cosa che non era possibile con l'implementazione predefinita. Puoi semplicemente sostituire il "#" con qualunque pagina desideri inviare all'utente.

La soluzione per (2) sta rimuovendo il margine superiore del selettore .dropdown-menu

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

Per migliorare la risposta di Sudharshan , lo avvolgo in una query multimediale per impedire il passaggio del mouse quando su XS visualizza larghezze ...

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

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

Non è richiesto il caret nella markup, solo la classe dropdown per la li .


Personalizza semplicemente il tuo stile CSS in tre righe di codice

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

Questa è probabilmente un'idea stupida, ma per rimuovere semplicemente la freccia rivolta verso il basso, è possibile eliminare il

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

Questo non fa nulla per il puntamento verso l'alto, però ...


Questo è integrato in Bootstrap 3. Basta aggiungere questo al tuo CSS:

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

Questo funziona per WordPress Bootstrap:

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

Questo ha funzionato per me:

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

Quindi hai questo codice:

<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 funziona su un evento click e vuoi che funzioni su un evento hover. Questo è molto semplice, basta usare questo codice 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();
        })
    })
})

Funziona molto bene ed ecco la spiegazione: abbiamo un pulsante e un menu. Quando passiamo il mouse sul pulsante, visualizziamo il menu e quando tocchiamo il mouse sul pulsante nascondiamo il menu dopo 100 ms.Se ti chiedi perché lo uso, è perché hai bisogno di tempo per trascinare il cursore dal pulsante sopra il menu. Quando sei nel menu, il tempo è resettato e puoi rimanere lì per tutto il tempo che desideri. Quando esci dal menu, nascondiamo il menu all'istante senza alcun timeout.

Ho usato questo codice in molti progetti, se incontri qualche problema usandolo, sentiti libero di farmi domande.


Se hai un elemento con una classe di dropdown come questa (per esempio):

<ul class="list-unstyled list-inline">
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
        <ul class="dropdown-menu">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
        <ul class="dropdown-menu">
            <li><a href="">Item A</a></li>
            <li><a href="">Item B</a></li>
            <li><a href="">Item C</a></li>
            <li><a href="">Item D</a></li>
            <li><a href="">Item E</a></li>
        </ul>
    </li>
</ul>

Quindi puoi fare in modo che il menu a discesa venga automaticamente spostato al passaggio del mouse sopra, piuttosto che dover fare clic sul titolo, utilizzando questo snippet di codice jQuery:

<script>
    $('.dropdown').hover(
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
        },
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
        }
    );

    $('.dropdown-menu').hover(
        function() {
            $(this).stop(true, true);
        },
        function() {
            $(this).stop(true, true).delay(200).fadeOut();
        }
    );
</script>

Ecco una demo

Questa risposta si è basata sulla risposta di @ Michael , ho apportato alcune modifiche e aggiunto alcune aggiunte per far funzionare correttamente il menu a discesa


Sovrascrivi bootstrap.js con questo 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') })
});

}); 

Usa questo codice per aprire il sottomenu su mousehover (solo 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 vuoi che il menu di primo livello sia cliccabile, anche su dispositivo mobile aggiungi questo:

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

Il sottomenu (menu a tendina) verrà aperto con mousehover sul desktop e con clic / tocco su cellulare e tablet. Una volta aperto il sottomenu, un secondo clic ti consentirà di aprire il collegamento. Grazie a if ($(window).width() > 767) , il sottomenu prenderà la larghezza dello schermo intero su mobile.


[Aggiornamento] Il plugin è su GitHub e sto lavorando su alcuni miglioramenti (come usare solo con attributi dati (non è necessario JS). Ho lasciato il codice in basso, ma non è lo stesso di quello che c'è su GitHub.

Mi è piaciuta la versione puramente CSS, ma è bello avere un ritardo prima che si chiuda, poiché di solito è un'esperienza utente migliore (cioè non punita per uno slittamento del mouse che va 1 px al di fuori del menu a discesa, ecc.) E come menzionato nei commenti , c'è quel 1px di margine che devi affrontare o, a volte, il nav si chiude inaspettatamente quando ti sposti nel menu a discesa dal pulsante originale, ecc.

Ho creato un plug-in rapido che ho usato su un paio di siti e ha funzionato bene. Ogni oggetto di navigazione viene gestito in modo indipendente, quindi hanno i propri timer di ritardo, ecc.

JS

// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();

// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {

    // the element we really care about
    // is the dropdown-toggle's parent
    $allDropdowns = $allDropdowns.add(this.parent());

    return this.each(function() {
        var $this = $(this).parent(),
            defaults = {
                delay: 500,
                instantlyCloseOthers: true
            },
            data = {
                delay: $(this).data('delay'),
                instantlyCloseOthers: $(this).data('close-others')
            },
            options = $.extend(true, {}, defaults, options, data),
            timeout;

        $this.hover(function() {
            if(options.instantlyCloseOthers === true)
                $allDropdowns.removeClass('open');

            window.clearTimeout(timeout);
            $(this).addClass('open');
        }, function() {
            timeout = window.setTimeout(function() {
                $this.removeClass('open');
            }, options.delay);
        });
    });
};  

Il parametro delay è piuttosto auto-esplicativo, e instantlyCloseOthers chiuderà immediatamente tutti gli altri dropdown che sono aperti quando si passa con il mouse su uno nuovo.

CSS non puro, ma speriamo che aiuti qualcun altro a quest'ora tarda (cioè questo è un vecchio thread).

Se vuoi, puoi vedere i diversi processi che ho seguito (in una discussione sul #concrete5 IRC) per farlo funzionare attraverso i diversi passaggi di questo elenco: https://gist.github.com/3876924

L'approccio del modello di plugin è molto più pulito per supportare i singoli timer, ecc.

Vedi il post del blog per ulteriori informazioni.


Per il caret ... Non ho visto nessuno specificando CSS semplice che blocchi totalmente il cursore.

Ecco qui:

.caret {
    display: none !important;
}




twitter-bootstrap