Hello, good to have you back. This time we will continue to develop simple, yet powerful navigation iViews using the new JSP tag libraries of the EFP feature package. I can assure you that you'll like the two examples given here, especially the second one...
Here's our schedule once again:
. The “recursion” is done for all nodes, though.
</li>
<li>In the header of the framework page we will include a link that triggers the sitemap. This link will be rendered as a navigation link (to the currently launched page) with an additional GET parameter, say "&sitemap=true".</li>
<li>Within the JSP code of the framework layout the GET parameter is read and defines whether the sitemap or the content container is rendered to the response.</li>
<li>The styling will be done exclusively with CSS.</li>
</ul>
<p>Let's first tackle the sitemap link in the header:</p>
<pre>
<%@ taglib uri="NavigationTagLibrary" prefix="nav"%>...
Help (help.htm) |
Contact (contact.htm) |
As you can see, the rendering of the sitemap is done in a separate file (include.sitemap.jsp). This is just to keep my code clean. Let's see what this file does:You all know drop-down menus, you work with them all day. You have 'em even in the menubar of your browser. They are powerful and highly efficient when it comes to accessing certain functions directly, or here: navigating to certain pages. You find them on many websites as well. The challenge here is to find the right DHTML code that suites your needs, works across different browsers, and doesn't have much of a footprint. But generally, those DHTML drop-down solutions are mostly overloaded, add up to download times and bandwidth consumption, and on top aren't accessible. Well, there is a way to have much, much lighter drop-down menus that do without (or at least with only a tiny bit of) Javascript code.
The solution is known under the name “Suckerfish DropDowns” which are (almost) entirely realized using CSS. How? I'll show you...
For our example we will have the rendering of the HTML as done in the sitemap example - a hierarchical navigation list made up of
0.1. and
0.2.
tags, but only with two levels: one for the horizontal menu bar, the second for the respective drop-down menu. The Suckerfish DropDowns implementation itself will be done as described in http://www.alistapart.com/articles/dropdowns (http://www.alistapart.com/articles/dropdowns) or http://www.htmldog.com/articles/suckerfish/dropdowns (http://www.htmldog.com/articles/suckerfish/dropdowns).
But let's first approach the solution one by one. To start with you'll need a navigation list in HTML, e.g.:
0.1.
0.2. America
0.1.
0.2. Canada
0.3.
0.4. Mexico
0.5.
0.7.
0.3.
0.4. Europe
0.1.
0.2. Germany
0.3.
0.4. France
0.5.
0.6. United Kingdom
0.7.
0.8. Italy
0.9.
0.5.
0.6. Asia
0.1.
0.2. Japan
0.3.
0.4. Peoples Republic of China
0.5.
0.6. India
0.7.
0.8. Philippines
0.9.
0.10. Thailand
0.11.
0.7.
Without any CSS yet applied the browser will render the following:
Next, we apply some basic styling:
navigation, #navigation ul
#navigation a
#navigation li
This will make the first level display as a horizontal list without bullets. The second level “drops” automatically to underneath the first level items, also without bullets:
Now we add the styling for making the second level “drop down”:
#navigation li ul
#navigation li:hover ul
The first selector positions all second level
0.1. -s to the (invisible) left of the canvas.
The second selector positions them back to right underneath the first level
0.2. if the user hovers across the first level
0.3. .
Unfortunately in the MS Internet Explorer the :hover pseudo class can only be applied to tags. So for the IE we need a bit of Javascript coding to overcome this problem that Firefox/Mozilla and Opera don’t have:
makeHoverable = function(navigationDiv) {
if (!document.all) return; // continue only for IE
var liEls = document.getElementById(navigationDiv).getElementsByTagName("LI");
for (var i=0; i<liEls.length; i++) {
liEls[i].onmouseover = function() {
this.className += " hover";
}
liEls[i].onmouseout = function() {
this.className = this.className.replace(new RegExp(" hover
b"), "");
}
}
}
This will add an event handler for the mouse over and out events on
0.1. elements, thus simulating what the pseudo element :hover can do already for
0.2. -s in browsers other than IE.
The CSS code needs to be adapted slightly:
#navigation li:hover ul,
#navigation li.hover ul
That's it! That's what you need for fully functional drop-down menus! With a bit of additional styling you can get a nice looking, fast-loading, light-weight, and accessible drop-down menu solution for your portal. You can extend this functionality to more levels than just two of course. Please read http://www.htmldog.com/articles/suckerfish/dropdowns (http://www.htmldog.com/articles/suckerfish/dropdowns) for more.
9 Comments
