popout menu Options

[minidiapolis]

Where in the html code would I put this
<ul id="nav"> <li><a href="#">Percoidei</a> <ul> <li><a href="#">Remoras</a></li> <li><a href="#">Tilefishes</a></li> <li><a href="#">Bluefishes</a></li> <li><a href="#">Tigerfishes</a></li> </ul> </li> <li><a href="#">Anabantoidei</a> <ul> <li><a href="#">Climbing perches</a></li> <li><a href="#">Labyrinthfishes</a></li> <li><a href="#">Kissing gouramis</a></li> <li><a href="#">Pike-heads</a></li> <li><a href="#">Giant gouramis</a></li> </ul> </li> <!-- etc. --> </ul>

[pandy]

I don't know. What is it?

[minidiapolis]

it's from the webpage you gave me http://www.htmldog.com/articles/suckerfish/dropdowns/

[Darin McGrew]

Where do you want the menu?

[minidiapolis]

it's from the webpage you gave me http://www.htmldog.com/articles/suckerfish/dropdowns/

[Darin McGrew]

Okay, let's try this again. Where on your page do you want the menu? There's where you put the list of links.

If you want it to appear in a drastically different place when CSS/JavaScript are disabled/unavailable than when they are enabled, then you'll need to do more CSS positioning. For example, many like putting such navigation links at the end of the HTML document, but using CSS to position them at the top of the page, or along the left margin.

Maybe it would help to understand what is going on if you viewed the Suckerfish example with CSS and JavaScript disabled. Start with HTML like that. Then use CSS/JavaScript to dress it up.

[pandy]

In addition to that I think you should start with to try to get a menu working on a page of its own before you add it to your existing page.

[minidiapolis]

I'm embarrassed to ask this but how do you disable CSS and Javascript?

I need the menu where it is now

[pandy]

Depends on the browser. Somewhere in options.

For quick checks I personally like to use this very small browser that doesn't support anything.
http://www.OffByOne.com

Your page works very well in it, except that the new menu doesn't show.

[Darin McGrew]

There is a web developer toolbar plugin for Firefox that gives you buttons to disable CSS, JavaScript, images, etc. It's very nice.

[pandy]

With IE you can use the Web Accessibility Toolbar
http://www.wat-c.org/tools/
Opera already provides easy ways to do this.

Still think OB1 rocks though.

[pandy]

Oh, we forgot that for IE there's also the handy dandy WiDGets. Don't do JS though.
http://htmlhelp.com/tools/widgets/

[minidiapolis]

Ok, I have been looking at the webpage with and without javascript and I think I see where the javascript code is but I'm having trouble understanding where to put a popout menu. Sorry guys, I'm really trying

[minidiapolis]

I *might* be getting it. . . sorry about all the frustration. . .

On http://www.htmldog.com/articles/suckerfish/dropdowns/ the following code would go in the external stylesheet, right?

sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover);

[Darin McGrew]

That's JavaScript, not CSS. It could go in an external JavaScript file, but not in an external style sheet.

[minidiapolis]

Here's a stupid question but how do you create a javascript file and is that the only thing that goes in that file?

[Darin McGrew]

JavaScript files are just text files, like HTML and CSS files. I create all of them with the same text editor (although the syntax highlighting it uses is different in each language).

And yes, the JavaScript is all that goes into a JavaScript file.

[minidiapolis]

So, sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover);

is all that goes in the file? What file extension? does it need?

[Darin McGrew]

By convention, JavaScript files are usually named something.js. Just make sure that your server sends it with "text/javascript" as the content type.

[minidiapolis]

do I need to link it to the html page