dropdowns icon indicating copy to clipboard operation
dropdowns copied to clipboard

Sub items not displaying when loaded in mobile version

Open jackbarham opened this issue 10 years ago • 14 comments

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.

jackbarham avatar Jan 17 '15 16:01 jackbarham

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!

hansvanmeteren avatar Feb 19 '15 23:02 hansvanmeteren

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.

jackbarham avatar Feb 19 '15 23:02 jackbarham

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

hansvanmeteren avatar Feb 19 '15 23:02 hansvanmeteren

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 :)

jackbarham avatar Feb 19 '15 23:02 jackbarham

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 avatar Feb 19 '15 23:02 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

hansvanmeteren avatar Feb 19 '15 23:02 hansvanmeteren

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.

jackbarham avatar Feb 19 '15 23:02 jackbarham

Seems like this will work: before

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

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

Hartelijke groet, Hans van Meteren

hansvanmeteren avatar Feb 20 '15 00:02 hansvanmeteren

Good work - Lets hope she'll update the script

jackbarham avatar Feb 20 '15 10:02 jackbarham

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.

timrelton avatar Mar 11 '15 11:03 timrelton

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.

gresakg avatar Mar 11 '15 22:03 gresakg

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

tessalt avatar Mar 11 '15 22:03 tessalt

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 https://github.com/tessalt/dropdowns/issues/4#issuecomment-78389002.

hansvanmeteren avatar Mar 11 '15 23:03 hansvanmeteren

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

gresakg avatar Mar 12 '15 05:03 gresakg