After a few weeks and many late nights, my jQuery AppMenu plugin is ready for public release!
Please be aware that this plugin is not recommended for use on live websites – I haven’t had the time to turn it into something fully functional yet, and it won’t work in Windows because of the way alt+tab is handled. Also never really patched it for IE. Working on a solution though, and hope to have a totally rebuilt version done by 2012!
Introduction
AppMenu takes the default cmd+tab functionality on the Apple Mac and imitates it almost exactly on a website, instead using alt+tab (or option+tab).
A developer or site owner can use this plugin to provide a highly familiar, user-friendly navigation through a website or page with multiple tabs. Other possible uses are for online web apps, for scrolling within a long document or using it to make social bookmarking easy – see the demos page for more.
It’s flexible and easily customisable with plugin options and CSS, relying on only very simple markup, for example:
<div id="appMenu">
<ul>
<li><a href="#introduction" title="Introduction"><img src="icon-1.png" alt="" /></a></li>
<li><a href="#downloads" title="Downloads"><img src="icon-2.png" alt="" /></a></li>
Features
Basic usage: Simply hold alt/option and press tab or shift+tab to navigate forwards or backwards through the menu items. You can also use the mouse to manually select items from the menu, while holding it open.
Reordering of menu items: You can specify whether items should be reordered (last-selected item comes to front of menu, as on Mac) or not (items are static).
Configurable Options: The plugin accepts a number of configurable options via the initial call, as outlined in the options section below.
Callbacks: A customisable callback function allows developers to tell the menu exactly how to behave when an item is selected.
Planned for 2.0: An API for adding/removing items on-the-fly, as well as resizing of items to fit all inside menu.
Demo & Examples
For a basic demo of how the plugin works with scrolling content in a long document, hit alt/option+tab now to navigate between sections!
Please note – the default AppMenu doesn’t currently look so hot in IE (any versions). It’s fine in FF/Webkit. Fixes for IE are coming within a week…
For more demos, including how the plugin handles tabbed content, custom design/CSS, external links, using it for social media sharing and more:
Check out the AppMenu demos page here.
Installation / Usage
… is as easy as it comes. Just upload the scripts to a subdirectory and add the scripts (latest jQuery, plus the AppMenu script and CSS stylesheet) inside the <head> of your document or website, like so:
<script src="/js/jquery-1.4.2.min.js"></script> <script src="/js/jquery.appmenu-1.0.min.js"></script> <link href="jquery.appmenu.css" rel="stylesheet" type="text/css" />
Make sure to check the paths to the files! The amount of times I’ve been debugging a plugin, only to find the path was wrong, it’s not even funny. People keen on saving on external requests can combine the CSS file into their main stylesheet, but I recommend keeping the plugin file separate for easy upgrading later on.
Then you’ll need to add the initial function call, like so:
<script>
jQuery(document).ready(function($) {
$('#appMenu').appMenu();
});
</script>
Finally, you’ll need your HTML. Obviously the items you use will vary depending on your usage of the plugin, so here’s some I prepared earlier. Each of those demos has the source code ready to copy/paste into your pages, and instructions for customising the items.
For those of you who want to write it yourself, this is the format:
<div id="appMenu">
<ul>
<li><a href="[URL or #hash]" title="[Item Name]"><img src="[path/to/icon.png]" alt="" /></a></li>
<li><a [...]
Here are a few pointers to get you started:
- The
hrefattribute for the item’s link will vary depending on the type of callback function you’re using (the function that actions an event once an item is called). The default callback function will show the tab with the same #id as thehref, or if it’s a link (relative path or full URL), will attempt to load that page. See the Demos page for full examples. - The
titleattribute for the item’s link will be the name of the item, displayed below the icon. - For the image, a transparent PNG is recommended, at least 120px square. Drop shadows in the PNG make it look better too.
- Add as many items this way as you please. In the next version, there will be an API to add/remove items on-the-fly!
Downloads
Please note – the default AppMenu doesn’t currently look so hot in IE (any versions). It’s fine in FF/Webkit. Fixes for IE are coming within a week…
The plugin is available to download as a zip containing the following files/directories:
- jquery.appMenu-1.0.js (12.4kb) – the full plugin code, for editing and playing with
- jquery.appMenu-1.0.min.js (3.5kb) – the minified plugin code, for production websites
- jquery.appMenu.css (2.1kb) – the necessary CSS styles
- jquery.appMenu.min.css (1.6kb) – the minified CSS styles
- jquery-1.4.2.min.js – minified jQuery 1.4.2
- documentation.html – options and documentation for the plugin
- /demos/ – a folder with all the AppMenu demos and examples
Click here to download jQuery.AppMenu-1.0.zip (610kb)
There’s also a zip containing just the scripts (no demos/docs) which weighs in at about 1/20th of the size:
Click here to download jQuery.appMenu-1.0-just-the-scripts.zip (34kb)
Documentation
jQuery AppMenu has a number of customisable options, and a few known bugs, which are listed below.
Options are be passed into the plugin call as an {object}, for example:
jQuery(document).ready(function($) {
$('#appMenu').appMenu({
reorder: true,
showControl: false,
onSelect: function( obj, options ) {
alert( 'howdy' );
}
});
});
Options
- menuFadeSpeed
Speed at which the menu fades in/out, in milliseconds
default: 120 - reorder
Whether to re-order the items when one is selected, bringing the latest-selected to the front of the menu
default: false - resize
Whether to resize the items when items are added/removed (not currently active – planned for 2.0)
default: false - updateHash
Update the location hash in the browser when item selected
default: true - debug
Enable debug mode
default: false - centerHoriz
Center the menu horizontally on the screen, and keep it centered. Default is false, as it messes with custom CSS – but it can be useful.
default: false - showControl
Show navigation control info above menu
default: true - showControlText
Text for the navigation control
default: ‘Alt + Tab (+ Shift) or mouse to navigate.’ - onSelect
Callback function for selected item, which is passed the selected item (object) and the plugin options.
default:function( obj, appMenuOpts ) { $.fn.appMenu.onSelectDefault( obj, appMenuOpts, { tabFadeSpeed: 360 } ); }
Known Bugs
- The default AppMenu doesn’t currently look so hot in IE (any versions). It’s fine in FF/Webkit. Fixes for IE are coming within a week…
- When menu is closed, if you hold alt on its own and click and hold somewhere, isAlt is set to true. You can then open the menu just by pressing tab, which is a usability bummer. Fix planned for v1.1.
- …Found a bug? Please let me know in the comments.
More Stuff
jQuery AppMenu is totally free for you to use and modify – all I ask is that you let me know in the comments if you’re using the plugin, so I can see it in action! (You’ll even get a free backlink from the Showcase if it’s a good implementation…)
Also please give credit where credit’s due and leave the /* notice */ intact so more people can find out about this free plugin. Thanks!
Fantastic work! I really really like it! As I have a mac I compared and they look nearly the same. Nice way to scroll up or down or to change between tabs.
Yes, very cool !! Why you don’t send it on the Jquery website?
I’m RT it right now.
Thanks :o) I’m holding off on pushing this any further as it has a lot of issues that would prevent it from actually being useful to anybody… I’ll be releasing a new version by the end of December that addresses the usability and cross-platform issues.
Joss
Hi guys,
you should add support of left and right arrow on the keypad. Keycode 37 and 39. Maybe trigger events should help you ;)
Let me know if you will do it.
Greetings Hans
Hey Hans – that’s on the roadmap. Got some major issues in Windows to look into first : )
did you even think about testing this on a windows machine?
comes up just by pressing tab, which is highly annoying when trying to tab through this comments form.
Hey mate – very good point. I’ve been traveling with my Mac, so haven’t had access to a Windows computer since testing and launching this. An overhaul for Windows is on the map for v1.1.
Hello,
just tested , but crashes right away my IE8 and does nothing at all in Firefox . Finally saw what it was about in Chrome . (vista user .. not my choice)
Wow this is incredible!!! I would love to use it for my site.
Thanks for the support! Wouldn’t recommend using this on a production site until I can launch v1.1 with Windows fixes.
This is great. I rolled my eyes when I heard about it, but when I used it, it just felt right!
A couple of suggestions that I’m sure aren’t terribly difficult for either you to do or for anyone else who uses this:
1) Disable this when in an input box, so you can tab between the input boxes as per usual.
2) When I have ‘tabbed’ and brought the menu up, it’d be nice if the current option could be selected (scrolled to) by pressing Return, instead of needing to reach for the mouse to click on the right option.
These immediately jarred me because of how I tend to use OSX (and other OS’ with alt-tab!). Your mileage may vary and none of these might not bother anyone else, but if you’re emulating existing OS behaviour I think it’s best to emulate as much of it as possible.
Good work!
Hey Ian – thanks for the comments and support!
1) Very good point and that’s something I’ll look into.
2) The selected option ought to be actioned (i.e. scrolled to or loaded) when you let go of alt+tab on that option. If that’s not happening for you, that’ll be a bug for the bug list! :P
Awesome work, but in Windows if Chrome has multiple tabs open it switches between the tabs instead of opening the menu.
Hmm – what am I missing? Demos on Chrome & Safari on Windows show no tabs – and you do know that Alt+Tab switches between running applications on Windows, right? So either you’d be breaking the OS shortcuts, or anyone on Windows with >1 application running won’t be able to navigate your site. Please tell me I’ve missed something…
No, you’re quite right about that Pete. Unfortunately I’ve been traveling while working on and launching this, and so haven’t had access to a Windows machine. As soon as I’m back from China I’ll be doing a new version with an overhaul for Windows.
Absolutely fantastic! Brilliant work! Extremely smooth, I actually thought it was my Mac alt+tab thing that came up. Brilliant!
Thanks for the support! Stay tuned for v1.1 with heavy improvements.
Dude this thing is SO awesome. I would donate if you had a donate-button ;)
Just found a little bug. When focus is on an input-field or textarea you have to disable the keyhandler for “tab” because when you press “tab” and expect to get to the next input the appMenu opens.
keep up the good work!
Thanks Philip – I’ll look into the issue with form fields. It shouldn’t be opening the menu unless Alt is down as well, and seems to be fine for me, but it sounds like the handler for the Alt key is getting stuck even after the key is released..
Very clear guide. Thanks!
Looks great on FF4b7 with OSX 10.6
Can’t wait to have this usable for production, my boss loves shiny things. :p
Thanks! Working on it this month so watch this space.
Hi Josh.
Looking forward to using this very much! :)
As soon as it works for Windows.
Great work!
Hello,
Great tool, as the rest of your open source tools :)
But a problem, it doesn’t work at all on linux, alt tab just triggers my system’s app switcher. I guess my shortcut has the priority over yours.
Yeah, this was always a problem with it – guess I never did enough testing in other platforms. It’s probably also why I never maintained this one as much as I’d have liked.
If you have any ideas for improving it, suggestions are definitely welcome!