I am having a problem with a site I am building where a dropdown menu isn't always getting displayed when viewed on an iPad. The site can be found here:
http://bit.ly/RtGfPn
To see the menu the iPad should be in landscape orientation. It is the navigation bar that is causing the problems (ie. Men, Women, Brands)
The dropdown menu seems to only work on some pages and even then it seems a little inconsistent. It always seems fine on desktop browsers.
Does anyone have any ideas why the menu only displays sometimes?
I experienced a similar issue awhile back adding "onClick="return true" to my top level nav item seemed to force the sub menu to open.
Related
I've been working on my church website to get things updated and make it easier for volunteers to manage pages as well as menu's in a logical way. The menu system uses Superfish, with a top menu (working fine) and a secondary horizontal menu on some pages.
Getting submenu's to load on this secondary horizontal menu has been complicated. For some strange reason the submenu doesn't show up on my iPhone. When testing in Safari and Chrome it shows up completely fine, on all window sizes.
On the iPhone I can see a slight animation starting, but the submenu never appears. I suspect there's either an issue with the Z-index, or perhaps an overflow issue - either way I've tried many things to get it working with no success.
The secondary menu is in a wrapper with class 'localmenu', and the ul submenu has class 'sub-menu'.
Things I've tried
Various overflow options
Z-index
I read about this '-webkit-transform: translate3d(0px, 0px, 1px)' trick, but it didn't seem to make a difference
Any help would be greatly appreciated - feeling a bit stuck here!
Website: https://www.lifechurchbradford.com (the secondary 2nd menu item 'Get involved' has the issue described)
I've managed to fix this. Turns out I had accidentally removed HoverIntent.js - which in turn broke the touch support. Happy to have this working at last!
So I've built a website and everything is going fine except one thing. When you go to the shop page on a mobile and hit "filter products" (only visible on screens up to 1000px wide), the filter menu that slides out doesn't scroll.
If you try it on your laptop using the mouse wheel it will scroll fine, but go on your phone (or get the chrome inspector to mimic a touch device) and you'll see it doesn't scroll any more when you touch the screen, only with the mouse wheel.
Here is the page in question: https://growitmowit.co.uk/shop/
I have tried ripping the css & js out but once you've clicked "filter products" and the menu has slided out you cannot scroll (with touch) until you slide the filter menu away.
I've now spent hours trying to figure it out and need some help :) Thank you in advance.
oh yeah - sometimes, when you first open the page with the inspector in device mode it is fine. If that's the case refresh the page and it'll start playing up :(
On my travels I found this website http://pawtrack.com/, which uses an interesting mobile menu.
As someone always on the lookout for a solution for a mobile menu, I was intrigued on how the menu for this site worked. When the burger nav is pressed on my android phone, this expands a menu which seems to have been generated by the browser.
This image shows how the menu appears on the site
I have inspected the source on desktop and mobile but I can't understand how this is achieved. Is this some kind of plugin or script? I'm sure the answer is quite simple but I can't discern it myself.
Any help?
Many thanks.
I think they used two menu :
one for large devices and second for small devices.
They used select dropdown for mobile devices so it looks like dropdown menu...
So I'm trying to have a mobile menu that slides out on the left when an icon is clicked, and disappears again after you click outside the menu. Like this:
http://codepen.io/anon/pen/LzJuq (old, see new codepen below)
And it works fine on desktop and in Android's default Browser.
On my phone, in Chrome, the menu will only open the first time. Each subsequent time it closes itself before it finishes opening.
I can see that it tries to open... so I assume, because the #menu-icon is actually within the #content, it tries to run them both... but I don't exactly know what to do.
Edit: So I've changed it to just manually set the width instead of adding/remove a class that specifies the width: http://codepen.io/anon/pen/Bmdny
The menu consistently opens now, however the links in the menu seem to be 'transparent' on subsequent opens. I.e, I see the blank background of the menu, but nothing in/on it, but I can still click the links. If I zoom in, even just a little bit, it seems to force the browser to repaint and the menu items appear.
Everything seems to work fine in Android's default browser, just not in Chrome for Android.
I've tried commenting out the css transitions, to no effect. I've tried giving the menu items a z-index higher than the menu itself (I'm desperate, lol), no change.
I just don't understand what's going on.
Thanks.
Info:
Chrome for Android v32
Android 4.3
Samsung Galaxy Nexus
What navigator are you testing it on? I can't reproduce the error on my phone nor my tablet.
However, it seems that as the button is over the #content div, when you click on it, you are clicking both elements.
Try to remove the class only when the menu has it:
$("#content").bind( "click", function() {
if ($('#mobile-menu').hasClass('open'))
$('#mobile-menu').removeClass('open');
});
EDIT
Let's try to put an intermediate layer between the menu and the content. Let's bind the menu-closing event to this layer.
Have a look at this: http://codepen.io/anon/pen/jiyHI
After much searching, tweaking, and hair pulling I began to narrow the problem down to having overflow:hidden; on my menu.
I came across a few random posts of various sources that described a problem similar to mine, and there were always suggestions that it had something to do with the overflow property, but at first I didn't understand.
I was 'hiding' the menu by setting width:0;, so in order to hide the content as well, I had to set overflow:hidden;. If I commented that line out, the menu opened fluidly and consistently, but of course: I could see the menu items all the time. Not what I wanted.
I tried transition the display property to learn that you can't do that. So I tried the visibility property, and at first that didn't work either. However, I came across this post from a guy trying to transition the display property, and this answer happened to work for me.
I still don't understand exactly why this works, I think it has something to do with delaying the second transition so it doesn't stop the first... Here's the article he linked in his answer.
So I guess the problem really had something to do with Webkit and fixed/absolute elements with ul's in them... not repainting after certain... anchor tag clicks? Or transitions? Yeah, I still don't really understand. But it works now!
Does anybody know a good horizontal slide menu jquery plugin that could emulate Facebook's relatively new mobile site/app's menu?
Basically you have a view of all the content, and when you click a button, a menu slides from the left, moving the content a little to the right (to the width of the menu sliding in). When a button on the menu is clicked, the menu slides out of view, the content slides back, and then changes corresponding to whatever menu button was clicked.
Aldomatics code doesn't behave well in windows phone and doesn't handle orientation issues
This topic is old but here is a working solution for mobile devices (Build with Jquery) :
it's working on Windows phone, iOs and Android Devices.
I've tried to keep the code as simple as possible, it's easy to understand and modifiy.
http://apptitudes.github.com/SlidingMenuJS/
I was looking for the same thing.
The best example I can find is a paid mobile Wordpress theme:
http://themeforest.net/item/hotcake-mobile-business-html-template/1065437
Pretty slick and you could at least see how it is done.
Cheers,
I find this implementation the best example currently available:
https://github.com/aldomatic/FB-Style-Page-Slide-Menu
It's not a jQuery plug-in, per se, but it should to the trick!