PDA

View Full Version : Yet another collapsing menu

beetle
11-15-2002, 06:55 PM
As some of you know already, I've been working on a nav menu script that satisfies certain criteria that I couldn't find in other menus of it's ilk that are readily available.

Here it is (http://www.lanwizards.com/navtest/test.htm) and make sure to check out all the relavent source-code here (http://www.lanwizards.com/navtest/showsrc.php)

A quick list of features Uses validating XHTML UL trees for menu structure
Degrades twice (for CSS and javascript separately)
Custom image support
Cookie-based persistence
Tooltip Toggling
Easy config
Compatible with most browsers
Built-in sniffer
Low global namespace consumption

A quick word about namespace: Every global function/variable (there's only 1 variable) is prefixed with the string 'nm_' except the generic getCookie() and setCookie() functions. Any text-editor worth it's salt can do a find/replace on this string in the event that you happen to run into a conflict.

My only future plans for this script are to make it all OO, but I didn't have the moxie to do it this time 'round.

If anyone can test this on Opera7 or a Mac with IE, I'd like to know the results. I've tested it ok on IE5+ and Gecko. For everything else (like IE4 and NS4) it degrades. Heck, it's even readable in Lynx (http://www.delorie.com/web/lynxview.cgi?url=http%3A%2F%2Fwww.lanwizards.com%2Fnavtest%2Ftest.htm))

P.S. For those of you that check, I know the CSS doesn't validate, but it's just the cursor:hand rule to satisfy stoopid IE5, and not required for this script to work :D
jkd
11-15-2002, 11:52 PM
A <ul> menu list similar to yours, but uses absolutely no Javascript:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<style type="text/css">
li {
-moz-user-focus: normal;
}
li > ul {
display: none;
margin-left: 1%;
padding-left: 1%;

}
li:focus > ul {
display: block;
}
li {
color: #000;
cursor: pointer;
font: 0.8em Arial,Helvetica,sans-serif;
}
li > a, a {
color: #00f;
text-decoration: none;
}
li > a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li>CSS2
<ul>
<li>
<a href="/css2/properties.html">properties</a>
</li>
<li>
<a href="/css2/selectors.html">selectors</a>
</li>
</ul>
</li>
<li>
<a href="/dom1/dom1.html">DOM</a>
</li>
<li>DOM2
<ul>
<li><a href="/dom2/core.html">Core</a></li>
<li><a href="/dom2/events.html">Events</a></li>
<li><a href="/dom2/style.html">Style</a></li>
<li><a href="/dom2/traversal-range.html">Traversal-Range</a></li>
<li><a href="/dom2/views.html">Views</a></li>
</ul>
</li>
<li>DOM3
<ul><li>?</li></ul>
</li>
</ul>
</body>
</html>


I'm actually using something similar to this for a project for this weekend (documenting Opera 7's DOM2 and CSS2 support), but need to come up with a workaround for the necessity of a user-focus property for this to work.
beetle
11-16-2002, 06:56 AM
That's nice jkd. It has the sime concept of 'aim-high-trickle-down' that my menu does. Your's just aims a bit higher and trickles down a lot sooner =) Hopefully in 6 months or so that won't necessarily be the case. Besides, the persistence I included was a big goal for this little project, which no CSS-only menu can do.

P.S. I think I'd prefer if you posted this in a new topic on not here for 1) This is a post for MY script and the resultant discussion of it and 2) I don't want people who don't understand the differences to think your menu is interchangeable with mine, because it is not. I don't mean to be rude, but if I were an Admin I'd issue a wrist-slap to any user that posts their own scripts within an existing 'Post a Javascript' thread of which they are not the original author. Just my 2&cent;
jkd
11-16-2002, 06:46 PM
Originally posted by beetle
I don't mean to be rude, but if I were an Admin I'd issue a wrist-slap to any user that posts their own scripts within an existing 'Post a Javascript' thread of which they are not the original author. Just my 2&cent;

Never been an issue before, I don't see a reason to make it one now. I was just giving some insight on another way to do the same thing (minus the persistence) without using *any* Javascript, which many people would never have thought possible. Naturally, Moz only, but when CSS3 is supported, this may start becoming the norm. However, by the time CSS3 is supported, we'll probably have XHTML 2.0's <nl> element, which would make using <ul>'s for menus redundant.
beetle
11-16-2002, 07:13 PM
Originally posted by jkd
I was just giving some insight on another way to do the same thingYa, and I don't have a problem with that, I just don't think that's what the 'Post a Javascript' forum should be about...but, I'm not in control. I still think a post like yours deserves it's own thread.