Make hover mouse effect with dropdown-menu

Question

I would like to improve my HTML part from my Django website and especially my Bootstrap navbar tab. Up to now, I have some dropdown-submenus and I have to click on one tab in order to access to the next menu, then submenu.

I would like to get hover effect in order to point my mouse on the tab and without click, get the menu and submenu.

For example, one of my HTML tab looks like :

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
        <span class="glyphicon glyphicon-book"></span> 
        Tables Annuelles & Décennales 
        <b class="caret"></b>
    </a>

    <ul class="dropdown-menu">
        <li class="dropdown dropdown-submenu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="glyphicon glyphicon-file"></span> 
                Edition Tables annuelles
            </a>

            <ul class="dropdown-menu">
                <li><a href="{% url "annuel" %}">Naissances</a></li>
                <li><a href="{% url "BCnotfound" %}">Reconnaissances</a></li>
                <li><a href="{% url "BCnotfound" %}">Mariages</a></li>
                <li><a href="{% url "BCnotfound" %}">Décès</a></li>
            </ul>
        </li>

        <li class="dropdown dropdown-submenu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
                <span class="glyphicon glyphicon-book"></span> 
                Edition Tables décennales
            </a>

            <ul class="dropdown-menu">
                <li><a href="{% url "BCnotfound" %}">Naissances</a></li>
                <li><a href="{% url "BCnotfound" %}">Reconnaissances</a></li>
                <li><a href="{% url "BCnotfound" %}">Mariages</a></li>
                <li><a href="{% url "BCnotfound" %}">Décès</a></li>
            </ul>
        </li>
    </ul>
</li>

And I have a javascript part which looks like :

    (function($){
        $(document).ready(function(){
            $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
                event.preventDefault(); 
                event.stopPropagation(); 
                $(this).parent().siblings().removeClass('open');
                $(this).parent().toggleClass('open');
            });
        });
    })(jQuery);

Where I have to modify elements in order to get hover effect on my navbar tab ?

Thank you

Works fine ! And if I want to add hover effect directly from my tab and not from dropdown-menu, I have to change `ul.dropdown-menu` by `li.dropdown-toggle` right ? — Essex, Mar 06 '17 at 15:12
Isn't this a dup of: http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click — Carol Skelly, Mar 06 '17 at 15:12

score 0 · Answer 1 · answered Mar 06 '17 at 15:13

0

Make this small change..

$('ul.dropdown-menu [data-toggle=dropdown]').hover(function(event) {

answered Mar 06 '17 at 15:13

Janen R

729
10
21

Doesn't work because I can't access to my `dropdown-menu`. I can display dropdown-menu but not access to it with my mouse ^^ – Essex Mar 06 '17 at 15:16

score 0 · Answer 2 · edited Mar 07 '17 at 10:55

0

<ul class="dropdown-menu"> --> change to <ul class="navbar-nav">
  <li class="dropdown dropdown-submenu">

After that, you can try below. I hope this will work.

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

edited Mar 07 '17 at 10:55

Karl Gjertsen

4,690
8
41
64

answered Mar 07 '17 at 09:47

duddu venkatesh

136
2
13

Make hover mouse effect with dropdown-menu

2 Answers2