Latest TweetsVerify any search engine or visitor via CLI Forward-Reverse Lookup perishablepress.com/cli-forwar…
Perishable Press

CSS/(X)HTML Tutorial: Hovering Accessibility Jump Menu

[ Jump Menu ] Recently, a reader named Don asked about this theme’s accessibility (accesskey) jump menu located at the top of each page. Several people have commented that they like the way the jump menu “lights up” upon gaining focus. Whenever a user hovers their cursor over the region at the top of the page, all links in the jump menu change to a more visible color. Then, as the cursor moves over the various menu items, each jump link is further highlighted with an even brighter color and an underline. This progressive focusing is best seen in browsers that support the CSS :hover pseudo-class (e.g., Firefox, Opera, etc.), however the menu remains useful even in CSS-challenged browsers (e.g., Internet Explorer). In this article, I explain how the Perishable Press jump menu is built using Web standards via CSS and (X)HTML, and then provide the specific code required to emulate the jump menu as it appears here at Perishable Press.

Step 1: The Markup

For the markup, we want to adhere to the principles of standards-based Web-design and maintain a strict separation of structure ((X)HTML) and presentation (CSS). Structurally, the jump menu is comprised of a list of links, so let’s begin with something like this:

<ul>
	<li><a href="" title=""></a></li>
	<li><a href="" title=""></a></li>
	<li><a href="" title=""></a></li>
	<li><a href="" title=""></a></li>
	<li><a href="" title=""></a></li>
</ul>

For the first part of this tutorial, we will assume that all jump links target elements on the current page. For example, we want to target the content, comments, sidebar, footer, search, etc., which are all assumed to be present on the same page as the menu itself. Of course, it is trivial to add links to other pages (e.g., the home page, login page, etc.) as well, as we will see later in the article. For now, we need to “flesh out” our list with a few important details:

<ul id="jump">
	<li><a href="#content" title="Jump to main content">Content</a></li>
	<li><a href="#sidebar" title="Jump to sidebar menu">Sidebar</a></li>
	<li><a href="#explore" title="Jump to footer items">Footer</a></li>
	<li><a href="#discuss" title="Jump to comments">Comments</a></li>
	<li><a href="#search"  title="Jump to search">Search</a></li>
</ul>

Here, we have given our list an id="jump", which will serve as a hook for various CSS styles. We have also completed our links with the desired targets, titles, and link text. At this point, we have everything we need to begin styling with CSS, however, we also want to implement complete “AccessKey” functionality. AccessKeys enable users to quickly navigate your site using keyboard shortcuts. These predefined shortcut links are especially helpful for users of text-only browsers such as Lynx. Thus, to equip our menu with some AccessKey excellence, we modify our list as follows:

<ul id="jump" role="heading">
	<li><a href="#content" accesskey="1" title="AccessKey[1]: Jump to main content">Content</a></li>
	<li><a href="#sidebar" accesskey="2" title="AccessKey[2]: Jump to sidebar menu">Sidebar</a></li>
	<li><a href="#explore" accesskey="3" title="AccessKey[3]: Jump to footer items">Footer</a></li>
	<li><a href="#discuss" accesskey="4" title="AccessKey[4]: Jump to comments">Comments</a></li>
	<li><a href="#search"  accesskey="5" title="AccessKey[5]: Jump to search">Search</a></li>
</ul>

Okay, looking good. Notice the addition of the accesskey="#" attribute. This associates the specified shortcut key with the corresponding link target. Here we are using numbers for our accesskey values, however, other characters will also work1. We have also indicated related AccessKey information in the title attribute of each link. This helps to inform users of associated AccessKey functionality. Update: to adhere to Accessibility guidelines, we have added the requisite role="heading" attribute (hat tip: H5N1).

At this point, we are finished with the (X)HTML portion of the tutorial. Let’s have a look at how the list markup appears without any applied CSS:

[ Screenshot: Unstyled Jump Menu ]

Very nice. Now, before moving on to the CSS styling, keep in mind that the jump menu that we are building is intended to be placed at the top of your pages, before any other content. The whole point of an access menu is that it enables users to bypass unnecessary information and “jump” directly to the target location. Also, the links in our jump menu point to the following array of anchor elements [ Note: replace the name attributes with ids if you are using XHTML for markup (hat tip: Louis) ]:

<div><a name="content"></a></div>
<div><a name="sidebar"></a></div>
<div><a name="explore"></a></div>
<div><a name="discuss"></a></div>
<div><a name="search"></a></div>

Each of these anchor elements should be present at their associated target locations. For example, the <div><a name="content"></a></div> element should be placed directly before the main content of the page. Without the proper target elements in place, the menu links will point to nowhere!

Step 2: The Presentation

With our solid, standards-compliant list-markup in place, we are ready to begin styling with CSS. The first thing we want to do is format the list for horizontal presentation:

ul#jump {
	font-family: Verdana, sans-serif;
	text-align: center;
	font-size: 12px;
	padding: 7px 0;
	color: #999;
	margin: 0;
	}
ul#jump li {
	list-style: none;
	display: inline;
	padding: 0 3px;
	margin: 0;
	}

Hopefully, this CSS code is self-explanatory. Basically, we are styling the text, centering the menu, specifying spacing, removing list bullets, and displaying the list horizontally. After applying these rules, we get something similar to this (depending on browser, settings, etc.):

[ Screenshot: Jump Menu List Styles ]

Next, we want to style the menu links to replace the default browser styles with something a little less ugly. So, we add the following CSS to our previous code:

ul#jump a:link, ul#jump a:visited {
	text-decoration: none;
	color: #777;
	}
ul#jump a:hover, ul#jump a:active {
	text-decoration: underline;
	color: #333;
	}

Here is what our list looks like after adding these basic link styles:

[ Screenshot: Jump Menu List and Link Styles ]

Although our jump menu is looking great so far, unfortunately, that’s as far as we can go with our old friend, Internet Explorer. However, for browsers that understand the CSS :hover pseudo-class (e.g., Firefox, Opera, etc.), we can do much better. First, let’s add that spiffy “hovering” action to the menu bar:

ul#jump:hover, ul#jump:focus {
	background: #ffff33;
	cursor: pointer;
	color: #777;
	}

Adding that to our previous CSS, the jump menu will change color upon either hover or focus (depending on browser). The menu background will brighten to a light yellow, and any non-link text will appear darker and easier to read. Here is a screenshot:

[ Screenshot: Jump Menu when Hovered ]

Now let’s add similar hover styles for the menu links themselves:

ul#jump:hover a:link, ul#jump:focus a:link, 
ul#jump:hover a:visited, ul#jump:focus a:visited {
	text-decoration: none;
	color: #333;
	}
ul#jump:hover a:hover, ul#jump:focus a:hover, 
ul#jump:hover a:active, ul#jump:focus a:active {
	text-decoration: underline;
	background: #ffcc66;
	color: #990000;
	}

Now, whenever the menu is hovered or receives focus, links and visited links will appear darker and easier to read. Likewise, upon menu focus, hovered links and active links will change to a maroon color with an orange background. Of course, the colors and other aesthetic styles used in this tutorial were chosen for clarity, and should be customized as needed. Once in place, this code completes the progressive focusing of menu links. Here is a screenshot of the menu when a particular link is hovered:

[ Screenshot: Jump Menu with Hovered Link ]

Although we could call it done at this point, the magical functionality provided by CSS 2.1 and CSS 3.0 enables us to add visual spacing elements between each of the menu list items. We add this to our code to further style modern browsers:

ul#jump li:before {
	content: " | ";
	}
ul#jump li:first-child:before {
	content: " ";
	}

Here, we are using the :before pseudo-element (from CSS 2.1) to add a vertical bar ( | ) before each menu item. Then, to remove an unwanted vertical bar from appearing before the first menu item, we are using the pseudo-selector :first-child (from CSS 3.0) to replace the bar with an empty space. [ Note: IE 6 does not understand the :first-child pseudo-selector. ] Here is a screenshot showing the addition of the vertical bars:

[ Screenshot: Jump Menu with Vertical Bars ]

This step demonstrates perfectly why CSS is critical to designing with Web Standards in mind: it enables the strict separation of structure from presentation.

To understand this, consider the first screenshot above showing the unstyled menu list. Without CSS, our menu presents as a well-structured list, appearing squeaky clean in any compatible browsing device. Users (and machines) without the pleasure of CSS support will be able to understand and use the menu as intended. The list itself includes no extraneous elements, inline styles, non-semantic markup, unnecessary text, or any of that. It’s just a list, plain and simple. Then, by applying our carefully designed CSS, we instantly and unobtrusively transform the presentation of the list markup to suit our needs. Thus, supportive browsers see the well-styled, aesthetic bliss provided by the CSS, which, when unavailable, degrades gracefully, leaving the pure, unadulterated (X)HTML markup. This is why I love designing with Web Standards! :)

The Finished Product

Now that we have completed both (X)HTML markup and CSS presentation, it’s time to put it all together and present the finished product. First, place the the markup at the top of the <body> element of your web page:

<ul id="jump" role="heading">
	<li><a href="#content" accesskey="1" title="AccessKey[1]: Jump to main content">Content</a></li>
	<li><a href="#sidebar" accesskey="2" title="AccessKey[2]: Jump to sidebar menu">Sidebar</a></li>
	<li><a href="#explore" accesskey="3" title="AccessKey[3]: Jump to footer items">Footer</a></li>
	<li><a href="#discuss" accesskey="4" title="AccessKey[4]: Jump to comments">Comments</a></li>
	<li><a href="#search"  accesskey="5" title="AccessKey[5]: Jump to search">Search</a></li>
</ul>

Then, make sure that you have the associated target anchor elements in place throughout the document [ Note: replace the name attributes with ids if you are using XHTML for markup (hat tip: Louis) ]:

<div><a name="content"></a></div>
<div><a name="sidebar"></a></div>
<div><a name="explore"></a></div>
<div><a name="discuss"></a></div>
<div><a name="search"></a></div>

And finally, place this code into your CSS file:

ul#jump {
	font-family: Verdana, sans-serif;
	text-align: center;
	font-size: 12px;
	padding: 7px 0;
	color: #999;
	margin: 0;
	}
ul#jump li {
	list-style: none;
	display: inline;
	padding: 0 3px;
	margin: 0;
	}
ul#jump a:link, ul#jump a:visited {
	text-decoration: none;
	color: #777;
	}
ul#jump a:hover, ul#jump a:active {
	text-decoration: underline;
	color: #333;
	}
ul#jump:hover, ul#jump:focus {
	background: #ffff33;
	cursor: pointer;
	color: #777;
	}
ul#jump:hover a:link, ul#jump:focus a:link, 
ul#jump:hover a:visited, ul#jump:focus a:visited {
	text-decoration: none;
	color: #333;
	}
ul#jump:hover a:hover, ul#jump:focus a:hover, 
ul#jump:hover a:active, ul#jump:focus a:active {
	text-decoration: underline;
	background: #ffcc66;
	color: #990000;
	}
ul#jump li:before {
	content: " | ";
	}
ul#jump li:first-child:before {
	content: " ";
	}

And that’s it! I highly encourage you to experiment with this code, play with different CSS styles, and even customize the (X)HTML markup as needed. For those of you looking for a “live” example of the jump menu, you may either look at the top menu of any page in the current theme, or else download an example page using the exact code used in this tutorial.

Download

Download the demo! Contains all the codez in zipped HTML file.

Demo - Access/Jump Menu – Version 1.0 (1,019 B zip)

Specific Example: Perishable Press Jump Menu

Having explained the process involved with designing this type of “hovering” jump menu, I feel comfortable sharing the code required to emulate the accessibility/jump menu used here at Perishable Press. As always, we add the HTML first, with carefully prepared attributes:

<div id="jump">
	<a href="#top"                           accesskey=""  rel="nofollow" title="Jump Menu [0]" id="top">Jump Menu</a> : 
	<a href="#content"                       accesskey="1" rel="nofollow" title="Jump to Main Content [1]">Content</a> | 
	<a href="#explore"                       accesskey="2" rel="nofollow" title="Jump to Explore Menu [2]">Explore</a> | 
	<a href="#search"                        accesskey="4" rel="nofollow" title="Jump to Site Search [4]">Search</a> | 
	<a href="http://example.com/"            accesskey="5" rel="nofollow" title="Perishable Press Home [5]">Home</a> | 
	<a href="http://example.com/sitemap.xml" accesskey="6" rel="nofollow" title="Perishable Sitemap [6]">Sitemap</a> | 
	<a href="http://example.com/contact/"    accesskey="7" rel="nofollow" title="Contact Perishable [7]">Contact</a> | 
	<a href="http://example.com/wp-admin/"   accesskey="8" rel="nofollow" title="Login / Register Page [8]">Login</a> | 
	<a href="http://example.com/access/"     accesskey="9" rel="nofollow" title="Accessibility Info [9]">Access.</a>
</div>
Note: if adding this code to your own project, feel free to remove all the extra whitespace characters. They are included for the sake of the tutorial, to make things easier to understand.

As you can see, there are several differences between my current implementation of the Jump/Access menu and the one created in the tutorial. These improvements were made while writing this article. The improvements are significant, and I will be using the tutorial version in my next redesign.

A significant difference between the tutorial version and my implementation is the addition of a link to the Jump Menu itself. Labeled with an id="top", the Jump Menu anchor serves as a description of the menu links, while also serving as the target for all “top” links (e.g., “Return to Top”) throughout the remainder of the page.

Also, I have given accesskey attribute a value of zero to further distinguish and establish it as a key link. And further, the vertical dividing bars are explicitly defined within the markup, rather than implicitly added via CSS. There are many arguments either for or against such handling, but I will defer the topic for now.

And finally, the vertical bar otherwise appearing after this first link is replaced by a colon ( : ) to further emphasize its semantic purpose. Here is the associated CSS for this markup:

div#jump {
	text-align: center;
	overflow: hidden;
	font-size: 1.0em;
	color: #555;
}
div#jump:hover, div#jump:focus {
	cursor: pointer;
	color: #777;
}
div#jump a:link, div#jump a:visited {
	text-decoration: none;
	color: #555;
}
div#jump a:hover, div#jump a:active {
	text-decoration: underline;
	color: #eee;
}
div#jump:hover a:link, div#jump:focus a:link, 
div#jump:hover a:visited, div#jump:focus a:visited {
	text-decoration: none;
	color: #aaa;
}
div#jump:hover a:hover, div#jump:focus a:hover, 
div#jump:hover a:active, div#jump:focus a:active {
	text-decoration: underline;
	color: #eee;
}

Aside from expected differences in the design-specific aesthetic properties of the jump menu, the CSS used for the Perishable Press Jump Menu is essentially the same. The only major difference is the lack of the pseudo-element :before and the pseudo-selector :first-child, which are used in the tutorial version to unobtrusively add the vertical bar dividers. And of course, to see this CSS and (X)HTML code in action, refer to the source code of any page presented via the current theme.

As always, feel free to share your CSS and/or (X)HTML expertise with our growing community. I also welcome criticism, complaints, questions, and just about everything else that is useful and isn’t spam. Cheers!

Footnotes

  • 1 Valid AccessKey values include any alphanumeric character, plus perhaps a few others, but I honestly don’t know for sure. To be safe, stick with letters and numbers. Note: If you happen to have a good resource providing this information, I would be very grateful. Thanks!

Jeff Starr
About the Author Jeff Starr = Web Developer. Book Author. Secretly Important.
Archives
15 responses
  1. Hi Jeff,

    I’m a little surprised by your use of the name attributes as anchors, instead of id. You repeat all along the post that you use “standards-compliant (X)HTML markup”, but don’t you know name attributes are deprecated in XHTML ?

    Maybe you started writing this article a while ago, as the anchors in the site’s source are fine. Anyway here is the W3C specification.

  2. To be honnest, I don’t think I need any help to build such a simple menu.

    Though, I read your post and admired once again your in-depth and perfectly organized style of writing (snippets, explanations, downloadable example, etc).

    You are quite a pedagogist; you should’ve been a teacher :)

  3. Jeff Starr

    Thanks, Louis. I am glad you found the tutorial interesting and helpful. ;) I have edited the article to note that the name attributes should be changed to ids when using XHTML for markup. Thanks for pointing it out. :)

  4. While that menu is accessible, if you are a first time user, and do not know your hot keys, it is very hard to use. Why? You have defined the tab index to start at the name field, thus having me skip all of the nav, and links in this post if you are keyboard user you cannot get to the menu that easily.

    The tutorial was well done. Howver, you make it seem that IE doesn’t understand :hover and :focus, which it does…

  5. Hey Jeff thank you so much for generously sharing and kindly explaning to us how the menu works in terms of (X)HTML coding and CSS styling. Two-thumbs up for the effort, especially the part where you explain the usage of the CSS styling.

    For the pseudo-classes like :hover and :focus, they seem to work well with IE7.0, but I guess all the other versions before that will simply ignore them. Anyway, there’s IE8.0 in beta already, I hope they’ve ironed out all the other cranky CSS intepretations by this time, AS PROMISED :) heheh.

    Oh and for the <a name=”something></a> thing, I guess that it will be better if you can just directly insert id=”something” into the preceding <div> tag. I once did the same thing but a visitor is kind enough to look through my code and helped me optimise it a little. Just my 2 cents though!

    Have a great weekend (and easter!). Take care, and again, thanks for sharing. It’s just very nice of you.

  6. Hi Perishable :)
    Only one more thing!
    Just to keep your jump menu in the Accessibility guidelines an “UL” list that is a navigation bar should be preceded immediately by a header (h2..h6) element or must have the “role” property set to “heading”.

    This can be done with this (X)HTML code:

    <ul id="jump" role="heading">

    I prefer to use this code:
    <div id="navigation">
    <h2>Menu</h2>

    and then hide the H2 text using CSS:

    text-indent: -9999em; /*or higher*/
    position: absolute;
    overflow: hidden /* IE sucks... e-ehm... hacks :) */

  7. Can I use the content as an educational reference?

  8. Chetan, if I know Perishable the answer will be yes… :)

  9. Jeff Starr

    @Ryan B: Thanks for the comment! Although not directly related to the article, your point about the tab index (as applied here at Perishable Press) is much appreciated. When redesigning the site, I simply copy/pasted a previous comment form without taking into account the newly added jump menu. Your insight is most enlightening and definitely will be applied for the next theme/redesign.

    As for your statement that IE understands :hover and :focus, I refer you to the following article:

    CSS testing of Selector and Pseudo selectors (404 link removed 2015/11/19)

    ..which clearly suggests the contrary: :hover fails in IE6, and :focus fails in IE6 and 7. So I’m not exactly sure where you were coming from on that point — perhaps you were thinking about the anchor element ( <a href=""> ), which is “hoverable” in all versions of Internet Explorer.

  10. Jeff Starr

    Hi teddY :) Thanks for the kind feedback on this article! I was surprised that it required as much work as it did, especially given the simplicity of the overall concept. In any case, I remain hopeful that others will continue to benefit from it, and as you are probably well-aware (given your recent article on CSS rollover effects), writing tutorials is always an enlightening experience, even when you think you actually know how to do it. Great for others, better for authors! ;)

    As for :hover and :focus, only :hover works in IE7, and :focus fails with both IE6 and 7 (and all previous versions). But you are correct that IE8 is designed to support both of these very useful pseudo-classes, which will be sweet indeed! :)

    And, great idea about using the <div> element for additional CSS hooks. I have used similar techniques in previous designs. Works great!

    Thanks again for sharing your thoughts with us, teddY — they are greatly appreciated! — Happy Easter! :)

  11. Woah that’s one lengthy reply from you Jeff. I’m so ashamed that my short comment deserve a long reply from you… thanks for being so polite and humble :)

    Yea it is really some complicated CSS for just very simple rollover effets, but what really bugs me the most is cross-browser CSS styling which can be very tedious. Most of the time I’ll try my best to iron out the wrinkles myself for Googling possible CSS fixes, but if they’re too much for me to handle, I’ll just ignore it heheh.

    Thanks for the generous link to my tutorial… well it was very different but basically we leverage a lot on the :hover effect :D

    I was about to say that great minds think alike in the previous comment but when I looked for the phrase it didn’t show up. My bad, perhaps I forgot to include it when I wrote the comment. I quite enjoy writing CSS tutorials even sometimes I know that there are a lot of them floating around in the web and people usually prefer those written by experience CSS designers, but sharing that very little bit of knowledge I know is indeed, a very enlightening procedure. Internet is for sharing, that’s why it’s there :)

    IE8 shoud by right support pseudo classes because the creators and designers said that they’ll try their best to make IE8 display pages like how Firefox, Safari and opera do. Finally they’re admitting that IE7 sucks in one way or another, lol!

    One question though: does :hover and :focus have identical functions? Sorry but I’ve never heard of :focus before, I’m still quite new to CSS.

    Happy Easter!

  12. Jeff Starr

    @H5N1: Some sweet tips, as usual! I was completely unaware (obviously) about these Accessibility requirements for navigation lists. Very good information indeed. Preceding all such menus with a heading element makes good sense, and hiding it with CSS when necessary is a fine solution. Even then, adding and setting the <ul> role="" attribute to heading is another useful technique, either used independently or to reinforce a literal heading element. ‘Tis my new favorite snippet :) — Many thanks!

[ Comments are closed for this post ]