Reset/collapse all elements of menu

JavaScript
1

I think and hope this is the last function for a menu I’m working on. The menu is responsive to window width, gets applied .hover above 600px and .click/.touch below. The problem is, if li elements are left open and the browser is dragged above 600px, those elements remain in an open state (like its being hovered over, but isnt) So I need to close all li elements prior to the hover being binded. Was hoping ther would be a .refresh / .collapse / .reset but seems not. Below is the binding of hover function, what can I use here to collapse all open li?

function applyHover() {
  $('#nav>ul>li, .subnav li, .sub_subnav li').unbind ("touchstart click");
  $("#nav>ul>li").hover(function() {
    $(this).find(".subnav").stop().fadeToggle(300);
  });

  $(".subnav li").hover(function() {
    $(this).find(".sub_subnav").stop().fadeToggle(300);
  }); 

  $('.sub_subnav li').hover(function() {
    $(this).find(".sub_subnav").stop().fadeToggle(300);
  });
}
2

As there is no working demo to test this on it may or may not work, but would hiding the list items as a part of unbinding them be an effective solution?

$('#nav>ul>li, .subnav li, .sub_subnav li')
    .unbind("touchstart click")
    .hide();
3

No, unfortunately not because when I do show again, they show in the previous left state… I think I know what I have to do, was just hoping for an easier way…

I think…
on click apply toggable class that shows active state,
if window .width goes above 600px check active states
if any, enforce a click event to remove the state (close li)

psuedo is there…skills are not! 1 step at a time hey

4

Then please provide us with a demo of what you currently have, so that we can supply a working solution for you. That’s far better than wading around in the dark.

5

ok upped at link below. Stupid yellow banner is pushing nav further down. If you shrink browser on load, then scroll down and open on toggle, yellow bar issue wont be noticeable… open toggle and click say quickview…leave quickview open and make browser window above 600px…there’s the prob

http://www.cwilliams.comule.com/reset/HDR/1502/desktop.php

6

You should be able to do this in CSS like this:

@media screen and (min-width:602px){
ul.subnav{display:none!important}
#nav-container li:hover ul.subnav{display:block!important}
}

It would have been better to toggle a class rather than using jquerys hide/show/fade because it writes inline styles and that means using !important to over-ride them.

7

Genious… Didn’t cross my mind. Will try it tomorrow and let you know. Btw I did take on board what u suggested in my previous thread about removing css changes from the js, but it messed things up cause the added classes are needed prior. May be worth adding the 1 needed class in html oh, so I can do what you said.

Thanks again… Will remove above link now…darn can’t edit. Will take off server tomoz

8

ye this works, but I get an annoying flash (double take) on hover and whatever was opened above 600px remains in an open state below 600px.

Be great if you could elaborate on the toggle class solution. Do you mean something like:

screen >600px add class (.hvr) to #nav
in css: .hvr li:hover display block poss with transition
prob is #nav id will take precedence

9

This nav demo example of mine uses a simple class to toggle on the hamburger but the rest is css although I am using superclick for the dropdowns as I find that the best solution.

Hover menus are usually useless on devices like the ipad and indeed are hard to use on a normal computer if your hand is a bit shaky. The click menus are much more accessible and solve the small device and touch device problems also in one go.

Note that if you open a submenu then that submenu should be open when you move to the smaller/wider screen otherwise the user will be confused.

10

This nav demo?
The idea is to get a .click/touch function for below 600px (covers a lot of hand held devices) and hover for above (assuming laptops/desktops) As for pads, I read adding :focus / modernizer.js will turn a hover function into touch. And ye suppose leaving menu open from big to small is fine…but small to big in my case causes problems. Ill backup what I have now and look into adding a dummy click to close from small to big

11

Sorry, I forgot the link to my demo :smile:

It’s not that reliable and you are usually left with a menu that won’t disappear (because it retains focus until some other link is clicked).

Hover drop downs are fraught with accessibility issues and best avoided if at all possible. If you do use them then you need to enhance them with tabbing and make them more stable for those with shaky hands so that the menu doesn’t diappear if you can’t hold still over the item (google superfish menus which is the hover menu of superclick).

12

ye I hear you…will have to see if hovering causes problems. May even put it to a public vote. For now I think it’s pretty much fixed with the below. When screen gets to 600px i’ll first call applyclick to clear active elements and then call applyhover…seems to have done the trick for now

function applyClick() {
$('#nav>ul>li, .subnav li, .sub_subnav li').unbind("mouseenter mouseleave");
   //reset active states on initial call
   if ($(".subnav").hasClass('active')){
	   $(".subnav").removeClass('active');
	   $(".subnav").css ({"display":"none"});
   }

$('#nav>ul>li').on('touchstart click', function(e){
   //check if active class exists on click, if so close and set inactive
   if ($(this).find(".subnav").hasClass('active')){
	   $(this).find(".subnav").toggleClass('active');
	   $(this).find(".subnav").css ({"display":"none"});
	   console.log('closed set inactive');
   }
	else{
		$(this).find(".subnav").toggleClass('active');
		$(this).find(" .subnav").stop().fadeToggle(300);
		console.log('active');
	}
 e.stopPropagation(); e.preventDefault();
});
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.