Use Mobile Browser UI for menu - javascript

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...

Related

pagePiling.js pp-scrollable not working for mobile devices

there
I have been using the pagePiling.js library for creating a scrollable website, and used the pp-scrollable class for allowing scroll for contents that are huge so that the user can scroll through the section content before moving on to another section.
The functionality is working fine on desktop browsers but isn't working on mobile browsers.
Has anyone had any similar issues with the plugins, if so please any help or tips is welcome.
Thanks,

Javascript show menu on hover for iPad only

The menu on this site doesn't show when using an iPad. It's designed so that the menu is hovered on and the ul li list below should show, but it doesn't. When you click the menu, nothing appears.
I need to write some JS using onclick events instead to make the sub menu show. But this needs to be specific for iPad ONLY.
Is it possible to write JS specific to only certain devices?
I just need to get this menu working, it seems iPads will not show hover items even when you click... which renders the entire use of :hover defunct on iPads.
You will need to use browser sniffing to detect the mobile touch devices. Don't do it yourself, use one of the excellent scripts from http://detectmobilebrowsers.com/
You will needs to do this for iphones, androids, phones etc. anything with a touch screen.

Dropdown menu not displaying on iPad

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.

How to modify Kwicks.js with links for mobile/touch navigation?

I am trying to build a website with the excellent Wordpress theme Minimatica. Problem is, Minimatica uses a Kwicks.js (jQuery) based slider of image links for its main navigation. These are rollover slides and they don't behave nicely on mobile, since touching any of the slides causes a click-through. I want to tweak it so that on mobile/touch devices, the first touch causes the slider to open, and the second touch actually clicks through. I am not sure how to do this.
A working demo of the theme and the Kwicks panel can be found here:
http://demo.onedesigns.com/minimatica/
Opening it on a mobile device should readily demonstrate the problem.

Facebook's mobile app/site horizontal slide menu : Jquery plugin?

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!

Categories

Resources