• content
• navigation
• access
• search

Scrolling Menus extension

Version 2.1

The Scrolling Menus extension adds stylish, animated scrolling behavior to overlong menus, so they can contain more links than would otherwise be possible. It ensures that the menus remain useable even in very small windows, and allows you to design for an unknown number of links within a single menu.

View the demo to see it in action. Any end-of-branch menus menus which are taller than the window, or a set maximum height, will have buttons to scroll the content up and down.

• Installation
• Configuration
• Implementation notes
• Usability notes
• Accessibility notes
• Browser notes

<!-- scrolling menus extension -->
<script type="text/javascript"
	src="/udm-resources/udm-x-scrolling.js"></script>

/* core scrolling button styles - do not change these */
#udm .scrollBUTTON {
	display:block;
	visibility:hidden;
	position:absolute;
	z-index:33000;
	}
#udm .scrollUP, #udm .scrollDOWN, #udm .scrollINNER {
	display:block;
	line-height:0 !important;
	}


/* custom scrolling button styles - you can customise these freely, with restrictions */
#udm .scrollUP, #udm .scrollDOWN {
	border-color:#bdb #080 #080 #bdb;
	border-style:solid;
	background:#f8fbd0;
	}

#udm .scrollUP {
	border-width:1px 1px 0 1px;
	padding:1px 1px 3px 1px;
	}

#udm .scrollDOWN {
	border-width:0 1px 1px 1px;
	padding:3px 1px 1px 1px;
	}

#udm .scrollINNER {
	background:#f8fbd0;
	border:1px solid #f8fbd0;
	text-align:center;
	font:0.75em tahoma,sans-serif;
	color:#060;
	padding:4px 0 5px 0;
	}

#udm .scrollMOVING {
	border-color:#aba #cdc #cdc #aba;
	background:#f1f4c8;
	padding:5px 0 4px 0;
	}

/* custom scrolling button styles */
#udm .scrollUP, #udm .scrollDOWN {
	border:2px solid red;
	padding:2px;
	background:pink;
	}

#udm .scrollINNER {
	border:2px solid green;
	background:yellow;
	text-align:center;
	font:0.75em tahoma,sans-serif;
	color:#060;
	padding:3px 0 4px 0;
	}

#udm .scrollMOVING {
	background:white;
	border-color:blue;
	padding:4px 0 3px 0;
	}

//scrolling menu parameters
var scrolling = [
	'150px',           // maximum menu height ["px"|"%"]
	'2',               // minimum scrolling speed ["n" pixels per iteration]
	'25',              // maximum scrolling speed ["n" pixels per iteration]
	'110%',            // acceleration ["%" per iteration]
	'scroll-up.gif',   // scrollUP arrow ["image.gif"]
	'scroll up',       // scrollUP alt text ["text"]
	'scroll-down.gif', // scrollDOWN arrow ["image.gif"]
	'scroll down',     // scrollDOWN alt text ["text"]
	'Click to scroll %speed%', // vocabulary pattern-match for "click to scroll (slowly|quickly)"
	'slowly',          // vocabulary for "slowly" [as in "click to scroll slowly"]
	'quickly',         // vocabulary for "quickly" [as in "click to scroll quickly"]
	'try',             // show menus to browsers that don't support this extension ["yes"|"no"|"try"]
	];

Implementation notes

This extension relies on the functionality and data of the menu repositioning routine - you must have that feature enabled, which further implies that you can't be using the lite or ultra-lite menu script.

Scrolling behavior is only applied to end-of-branch menus - that is, menus which have no children. This is because the scrolling animation is based on clip - UDM is a true hierarchical menu (where child menus really are child elements), and it's not possible to display an element outside the clipping region of its parent. You should therefore try to keep child-bearing menus comparatively short.

Finally, don't use fixed positioning if you're using this extension, or you'll see a variety of issues, including a mad "jittering" of the navbar while scrolling in Firefox, and mispositioned buttons in Opera 7.

Usability notes

I made this extension because lots of people asked for it, but personally I do have some reservations about the usability of scrolling menus.

They require an extra user-action to see the content below the menu-fold, which means that people using a graphical browser can no longer take in the whole menu content at a glance. It also takes time to see all the options, and adds one more item of interface control for users to learn (albeit, one familiar to most computer users). All of this adds up to something that may try a user's patience, for the sake of an effect that's far more cool than it is really necessary. And in partially-supported browsers, where regular overflow:scroll is used, the menus might be a bit more difficult again, because interacting with them requires more-complex mouse actions over a smaller target area, compared with the animated scrolling.

Having said that, scrolling menus can also improve usability quite significantly, because they ensure that all the links in a menu remain accessible to the mouse even in very small windows.

So all things considered, I would look at the alternatives first - such as splitting a long menu into smaller subgroups - and implement this extension only if it's particularly necessary or appropriate to your needs.

I suggest that it's best as a background usability aid, and that you not rely on it to allow for very long menus.

Accessibility notes

When navigating with the keyboard, the menus will auto-scroll in response to focus events, so that the highlighted link remains close to the center of the scrolling region. The scroll buttons will still appear, serving to indicate the presence of content below the fold.

In partially-supported browsers, where regular overflow:scroll is used, keyboard navigation falls back on its natural behavior - focussed links in overflow elements automatically scroll into view.

Access for screenreaders is unaffected at all settings - to them it's just a regular list of links, although it may be longer than usual; the length does make it doubly-important that you provide additional semantics to help with navigation, by including navbar headings.

Browser notes

This extension is not supported in Opera < 7.5 (because of a now-fixed problem with its implementation of clip), or in Mac/IE5 (because of rendering problems for which I couldn't find efficient workarounds). It's only partly supported in Win/IE5.0 - animated clip-based scrolling is not stable in that browser, but it can use regular overflow:scroll.

Whether or not to let the menus show anyway is up to you, and will depend upon how you're using it - please see the configuration notes for details.

While developing this extension, I came across some curious CSS and javascript quirks in various browsers, notably Opera and Safari, which resulted in mis-positioned menus, or menus which don't completely fill the window when set to 100% height.

I never fully understood, let alone solved, these quirks; but if you get this kind of problem you should be able to workaround it with zero canvas margins:

• Skip code example

html, body {
	margin:0;
	padding:0;
	}

• ← More extensions

Search