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.
Download the
Scrolling Menus script,
copy it into your udm-resources
folder,
and add the script include to the body section:
<!-- scrolling menus extension -->
<script type="text/javascript"
src="/udm-resources/udm-x-scrolling.js"></script>
Then to style the scrolling buttons you need the following CSS:
/* 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;
}
The styles are split into two groups - core and customisable. Do not change the core styling.
You can change the custom styling pretty much as you like,
but do not set any of the following properties: position
(including left
, right
, top
or bottom
),
display
, visibility
, z-index
,
width
or height
- the script will take care of those,
and anything you define may affect or override that.
You can effectively control the height with top and bottom padding;
you shouldn't need any of the other properties.
Each button is comprised of two customisable elements - an outer button and an inner button:
class
name
"scrollUP"
; the bottom outer button has the
class
name "scrollDOWN"
.
class
name "scrollINNER"
; if you want
to address them individually you can use a descendent selector, such as
".scrollUP .scrollINNER"
. When the inner button is in its rollover
state it additionally has the class
name
"scrollMOVING"
.
If you want more obvious styling to start with, so you can easily identify the buttons, try something like this:
/* 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;
}
Once you have the CSS, the only other visual aspect of the buttons is the arrow inside each one, which serve to indicate the presence of content below the fold. These are defined in the script:
At the top of the script is a control array with 12 parameters:
//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"]
];
["px"|"%"]
["n" pixels per iteration]
The scrolling speed is the animation resolution - that is,
the number of pixels of movement with each loop.
You should set the minimum to a low number so that you get smooth movement at
slow speed. Don't set it to "0"
or the menu
won't be able to move at all.
The scrolling starts at this minimum, then accelerates until it reaches the set maximum. Users can also click the buttons to toggle between slow and fast scrolling, and when overriden like this it no longer accelerates, but remains constant at the selected speed until the menu is closed and re-opened.
["n" pixels per iteration]
["%" per iteration]
"100%"
gives no acceleration
at all, while "200%"
doubles each time.
This is most appreciable in the range
"101%"
to "120%"
.
["image.gif"]
Specify an image to use for the scroll-up indicator; images can be of any type.
The image should be in your udm-resources
folder,
and will be included using the path defined in the
um.baseSRC variable.
["text"]
alt
text of the
scroll-up button.
To help you choose suitable text or characters,
please read
The semantics of menu indicators.
["image.gif"]
Specify an image to use for the scroll-down indicator; images can be of any type.
The image should be in your udm-resources
folder,
and will be included using the path defined in the
um.baseSRC variable.
["text"]
alt
text of the
scroll-down button.
To help you choose suitable text or characters,
please read
The semantics of menu indicators.
Define the vocabulary to use for the scroll buttons'
title
text, which will say either
click to scroll slowly
or click to scroll quickly
,
using the language and grammar you define.
The %speed%
token is replaced
by the the word for slowly
or
quickly
as required,
so you can move the token around within this sentence
to acheive the appropriate grammar.
[as in "click to scroll slowly"]
slowly, used in conjunction with the pattern-match sentence defined above.
[as in "click to scroll quickly"]
quickly, used in conjunction with the pattern-match sentence defined above.
["yes"|"no"|"try"]
Specify whether the menus should still be shown to browsers that don't support or fully support this extension:
"yes"
will show the menus to all.
"no"
will hide the menus from unsupported browsers.
overflow:scroll
.
A value of "try"
will implement this, but otherwise
hide the menus from unsupported browsers.
How to set this value depends upon why you're using the extension:
If you're using it so that you can have menus with a
large number of links - more than would possibly be visible in
most people's window - you should set this
to "no"
or "try"
, because
in unsupported browsers such
menus will disappear below the fold,
becoming difficult or impossible to get to.
If you don't have any particularly long menus
- you may be using
the extension simply to improve general
usability, by ensuring that all the links in a menu
remain accessible in very small windows - you'll
proabably want this set to "yes"
,
because for unsupported browsers that's equivalent to not using
the extension at all.
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.
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.
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.
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:
html, body {
margin:0;
padding:0;
}
UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.