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!
Related
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...
I started using bootstrap and had a very good experience with it.
Today when I was testing it, I understood that the navigation menu doesn't work when javascript is disabled. i.e. drop down menus don't work (i know that they cannot work without javascript but atleast some alternative should be there) and the menu is not at all accessible for mobile devices having javasript turned off.
I didn't find any resources which helped to fix this online. So, is there any way (if not fix drop down menus) make the menu work on mobile devices?
Or do I have to stop using bootstrap?
Most modern mobile devices should be able to support JavaScript. And it is the recommended way of doing responsive Web pages.
However you may be able to use css for this type of function by using a hover which will display a div that you've defined and hidden further up in the css
There is also css animations if you wish to have some sort of movement.
http://www.w3schools.com/css/css3_animations.asp
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.
what i want to do is that i have a nice image Gallery which is currently working on Next and Previous Links to go back and forward.
i want to do the same when ever user swipe that is just like iPhone etc (touch Mobiles).
i am implementing it on my website for PC's not for mobiles.swipe in sense of mouse not thumb
how to catch these Events???
Any Idea will be ll help full
I had to do something similar for jquery draggable items.
Check out http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ it makes all jquery-ui elements work on iPhone and iPad :)
I'm developing a mobile website in HTML/HTML5. This is NOT an iOS app but I would like to provide the look and feel of an app. I found nice toolkits like iWebKit for the CSS.
Now I want to implement to standard sliding view: when you click an item in a list, the viewport slides horizontally to show the details of the item. Then you can move back to the list (without losing your scrolling position, etc.)
Is there a HTML/JS framework I can use the do this ? Thanks !
Do you mean jQuery Mobile collapsibles? Upon clicking, they can expand to reveal more detail.
http://jquerymobile.com/test/docs/content/content-collapsible.html
If you want something more akin to a means of navigating to more specific pages, jQuery Mobile offers support for remembering pages you've been to as well, so users of your mobile app can efficiently navigate back and go to the home page, as detailed here: http://jquerymobile.com/demos/1.0a4.1/docs/toolbars/docs-headers.html. This feature is automatically set in jQuery Mobile websites.