Sub items not displaying when loaded in mobile version

[jackbarham]

The navigation seems to work really well. However, I've noticed an issue which I can't seem to fix. When the page is loaded in desktop (over 768px) the drop-downs and sub-menus work well, then when I drag the browser to less than 768px so it switches to mobile view the sub-menus still work. But when I refresh the browser (under 768px) the sub-menus don't open. When a drag it to desktop and then back to mobile it works again. This only seems to be happening when the page is loaded in mobile size. This seems to be the case in Chrome, Safari and Firefox on the Mac.

[hansvanmeteren]

Same here (out of the box) , would be nice if this great script could be developped further! The purpose of the menu in mobile is evident and there's no way to load the site in desktop first when on mobile. So... please.. Tessa!

[jackbarham]

In the end I used Menuzord (only $7) from http://codecanyon.net/item/menuzord-responsive-megamenu/8536398 and, although a little bloated, it did do what I needed it to. Example: http://www.traveldivision.com

Hope that helps.

[hansvanmeteren]

Thanks Jack
I will try that script, but because of the simplicity of Tessa's menu I prefer being able to use that one.

[jackbarham]

I totally agree, but had to find a quick solution - It's actually pretty hard to find a simple, light-weight, responsive, dropdown, touch-enabled navigation script. I had high hopes for this, but I couldn't get it to work. Unfortunately my JavaScript is intermediate at best, else I would have forked this myself - I'm sure we're not the only people with such a requirement.

If you ever do find a better solution, let me know :)

[hansvanmeteren]

2015-02-20 0:18 GMT+01:00 Jack Barham [email protected]:

If you ever do find a better solution, let me know :)
Sure!!

Hartelijke groet,
Hans van Meteren

[hansvanmeteren]

Found this but unfortunately it doesn't make any sense to me
http://stackoverflow.com/questions/23585780/responsive-drop-downs-not-activating-until-resize

Hartelijke groet,
Hans van Meteren

[jackbarham]

Nor me either - Looks promising, but I wont be able to investigate until get some free time. If you get to the bottom of it, maybe do a pull request with the fixes here. I'd be keen to see this working correctly.

[hansvanmeteren]

Seems like this will work: before copy this (see underneath):
(found this on CodePen: http://codepen.io/massiebn/pen/lznxs where I
copied:

<script type="text/javascript" src=" http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868/script.js"></script>

and placed it in my index.html file.
Afterwards I downloaded the js file itself.
Please let me know if this works for you

<script type="text/javascript"> var ww = document.body.clientWidth; $(document).ready(function() { $(".nav li a").each(function() { if ($(this).next().length > 0) { $(this).addClass("parent"); }; }) $(".toggleMenu").click(function(e) { e.preventDefault(); $(this).toggleClass("active"); $(".nav").toggle(); }); adjustMenu(); }) $(window).bind('resize orientationchange', function() { ww = document.body.clientWidth; adjustMenu(); }); var adjustMenu = function() { if (ww < 768) { $(".toggleMenu").css("display", "inline-block"); if (!$(".toggleMenu").hasClass("active")) { $(".nav").hide(); } else { $(".nav").show(); } $(".nav li").unbind('mouseenter mouseleave'); $(".nav li a.parent").unbind('click').bind('click', function(e) { // must be attached to anchor element to prevent bubbling e.preventDefault(); $(this).parent("li").toggleClass("hover"); }); } else if (ww >= 768) { $(".toggleMenu").css("display", "none"); $(".nav").show(); $(".nav li").removeClass("hover"); $(".nav li a").unbind('click'); $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() { // must be attached to li so that mouseleave is not triggered when hover over submenu $(this).toggleClass('hover'); }); } } </script>

Hartelijke groet,
Hans van Meteren

[jackbarham]

Good work - Lets hope she'll update the script

[timrelton]

OK, downloaded the zip (March 2015) and had this same problem when implementing the code. The dropdown on click on a <768 screen only works if you change the orientation of the device and return it. If you reload the page into a <768 screen the onclick still functions incorrectly, but by resizing the browser window and returining it to <768 the code works exactly as required.

Figured the problem was due to the unbinding only being triggered by the window resize / orientation change rather than the determined screen width on page load.

After much wailing and gnashing of teeth I worked out a solution....

Change the toggleMenu section in dropdown.js to

        $(".toggleMenu").click(function(e) {
            e.preventDefault();
            $(this).toggleClass("active");
            $(this).next(".nav").toggle();
            adjustMenu();
        });

which fires the adjustMenu() trigger each time the menu button is clicked. This sets the unbind event going which is the cause of the failure.

And it works !

Thanks for the original code, it has sorted legacy Android 2 hover problem that was giving a client some headaches.

[gresakg]

Hi! I couldn't reproduce the bug on Linux so I just applied the fix on my branch. You can either wait for @tessalt to merge me, or clone the repo directly from me https://github.com/gresakg/dropdowns

I am actually actively maintaining this script since a year ago.

[tessalt]

Hi sorry I don't maintain this any more. If anyone wants write access to maintain or update they're welcome to it.

[hansvanmeteren]

Pitty and thanks for your script.

I hope gresakg will take care. To me this sort of things is totally
incomprehensible.

Hartelijke groet,
Hans van Meteren

Hans van Meteren, Numaga Design webontwerp, www.numaga-design.nl, Nijmegen
Mobiel te bereiken op: 0651 530 445; bij hardnekkig "geen
gehoor": 0683397770
​Alle verdere gegevens: zie ons digitale visitekaartje
http://www.numaga-design.nl/pages/visitekaartje.php (OV en adres-
/ routekaart, Skype, KvK, BTW). In onze mails genoemde bedragen zijn,
tenzij anders vermeld, exclusief BTW.

2015-03-11 23:43 GMT+01:00 Tessa Thornton [email protected]:

Hi sorry I don't maintain this any more. If anyone wants write access to
maintain or update they're welcome to it.

—
Reply to this email directly or view it on GitHub
#4 (comment).

[gresakg]

Hi, @tessalt , I can do it if you can give me write access. Regards, Greg