How to automatically reset or hide drop down menus in navbar

36 views
Skip to first unread message

Octavio

unread,
Oct 1, 2020, 1:42:22 AM10/1/20
to web2py-users
I'd like to make the dropdown menus included in the navbar (response.menu in models/menu.py) at the top of each page either disappear when no longer hovered over or timeout where the menu goes away after n seconds after no longer hovered over.. Currently, by default, mine drop when I click on them and stay dropped until I click somewhere else on the page or on an item in the menu.

For example, the book (http://web2py.com/book) has the Books dropdown menu which drops on hover and then goes away immediately after you stop hovering over it. 

How can I do this?

TY for the help!!

Annet

unread,
Oct 1, 2020, 4:40:26 AM10/1/20
to web2py-users
 
uses a script named web2py_bootstrap.js

// this code improves bootstrap menus and adds dropdown support
jQuery(function(){
  jQuery('.nav>li>a').each(function(){
    if(jQuery(this).parent().find('ul').length)
      jQuery(this).attr({'class':'dropdown-toggle','data-toggle':'dropdown'}).append('<b class="caret"></b>');
  });
  jQuery('.nav li li').each(function(){
    if(jQuery(this).find('ul').length)
      jQuery(this).addClass('dropdown-submenu');
  });
  function adjust_height_of_collapsed_nav() {
        var cn = jQuery('div.collapse');
        if (cn.get(0)) {
            var cnh = cn.get(0).style.height;
            if (cnh>'0px'){
                cn.css('height','auto');
            }
        }
  }
  function hoverMenu(){
    jQuery('ul.nav a.dropdown-toggle').parent().hover(function(){
        adjust_height_of_collapsed_nav();
        mi = jQuery(this).addClass('open');
        mi.children('.dropdown-menu').stop(true, true).delay(200).fadeIn(400);
    }, function(){
        mi = jQuery(this);
        mi.children('.dropdown-menu').stop(true, true).delay(200).fadeOut(function(){mi.removeClass('open')});
    });
  }
  hoverMenu(); // first page load
  jQuery(window).resize(hoverMenu); // on resize event
  jQuery('ul.nav li.dropdown a').click(function(){window.location=jQuery(this).attr('href');});
});


I think this adds the support you're looking for.


Annet

Op donderdag 1 oktober 2020 om 07:42:22 UTC+2 schreef Octavio:
Reply all
Reply to author
Forward
0 new messages