Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Yet another collapsing menu

    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 and make sure to check out all the relavent source-code here

    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)

    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
    Last edited by beetle; 11-15-2002 at 05:58 PM.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    A <ul> menu list similar to yours, but uses absolutely no Javascript:

    Code:
    <!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.

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by jkd
    I was just giving some insight on another way to do the same thing
    Ya, 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.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •