Finally done writing this. I'll attach my test version on the page at the end so you can tinker with that if needs be. Just rename it from testpage.txt to testpage.html to see it in action.
OK. Sorry the reply took so long Rick. We had a 3 day weekend over here in the Uk and I didn't get a chance to get on my PC much. Well I'm on a train to work at the moment so I've got a good amount of time to write up a reply. The code below is similar to what I gave you last time in a way but it will hopefully be a little tidier. I'll also try and write it in a better to understand way. Hopefully...
The code is based on the
Suckerfish Dropdown article from A List Apart.
The HTML
The best kind of HTML to use for a navigation bar or some kind is a list. After all, it's just a list of pages. So for this navigation we'll use unordered lists. This way we'll have some nice, clean HTML that should be standards complient and accessible regardless of browser type. So
1. to start off, create a basic web page with this in the body: Code:
<ul>
<li>Categories
<ul>
<li><a href="">Computing</a></li>
<li><a href="">Geography</a></li>
<li><a href="">History</a></li>
<li><a href="">Science</a></li>
<li><a href="">Sport</a></li>
</ul>
</li>
<li>Members
<ul>
<li><a href="">LTheobald</a></li>
<li><a href="">Rickj</a></li>
<li><a href="">CurleyBen</a></li>
<li><a href="">ScottGem</a></li>
<li><a href="">Orange</a></li>
</ul>
</li>
<li>Tools
<ul>
<li><a href="">Search</a></li>
<li><a href="">Members List</a></li>
<li><a href="">New Posts</a></li>
</ul>
</li>
</ul>
That will give you a 2 level list. It should look like a helper page for AMHD. Now we have the HTML, we want to use some CSS to make this list look more like a series of dropdowns. I'm afraid this is where the CSS comes in. To keep this example simple, we'll keep the CSS styles in HTML page with the code.
2. In the <head> section of the page, enter the following: Code:
<style>
ul {
padding: 0px;
margin: 0px;
list-style: none;
background-color: #53BF58;
width: 10em;
}
</style>
This first bit of CSS styles all lists on the page (the <ul> elements) to remove the indentation and bullet points. I've also added a width and some colour in there just to make things a little clearer. The example will now just look like lines of text one under the other. As we want a dropdown list we now have to hide the inner lists (holding the categories, member names and tools in this example). To do this,
3. add the following lines between the style tags under the existing ul {} part: Code:
li ul {
display: none;
background-color: #86EF8A;
}
This bit of CSS means "For every list (ul) within a list item (li), set it's display to none (hide)". So this will hide all our inner lists. Yet again, a little colour added for clarity.
Now For The Magic
We now have our dropdown list all ready to code. So onto making the lists dropdown. There's two ways of doing this:
- Having the lists appear when the user hovers over a link
- Having the lists appear when the user clicks on a link
The code is pretty similar for either one. Now as the Suckerfish Dropdown article already handles what to do when hovering over links, I'll take what to do when the user clicks on the links. Before we can write the code itself we need to write two simple changes to the HTML & CSS we wrote earlier. First, the HTML change. We need to
4. change the root list tag (the very first <ul> tag from: to That will just give us a way of identifying our dropdown list. The CSS change adds a class that shows us which dropdown is currently active.
5. Add the following lines inbetween the style tags Code:
li.active ul {
display: block;
}
This code will set a list to be shown when it's parent's class is set to active. So for example if we set the Members <li> tag to have a class of active, the members list will be shown. Now it's time to write the code itself.
6. Inbetween the <head> tags for the page, enter the following: Code:
<script language="JavaScript">
function hideAll() {
var navList = document.getElementById("nav");
for (var i=0; i<navList.childNodes.length; i++) {
var node = navList.childNodes[i];
if (node.tagName == "LI") {
node.className = node.className.replace(new RegExp("\s?active", "i"), "");
}
}
}
window.onload = function () {
var navList = document.getElementById("nav");
for (var i=0; i<navList.childNodes.length; i++) {
var node = navList.childNodes[i];
if (node.tagName == "LI") {
node.onclick = function() {
hideAll();
this.className += " active";
}
}
}
}
</script>
There's two parts to this script. The first function, hideAll(), hides all the lists when shown. A call to this function will ensure that we only have one dropdown shown at a time. The second part sets up what happens when we click on a link.
And That's It
All done. Hopefully now you'll have a dropdown list that'll work in nearly all browsers. I've tested this in IE, Firefox and Opera and it looks just fine.
As always - if you have any questions feel free to ask. All you need to do now is to style it
Linear Mode
