Help - Search - Members - Calendar
Full Version: popout menu
HTMLHelp Forums > Programming > Client-side Scripting
Pages: 1, 2, 3
minidiapolis
I'm creating a popout menu for the very first time. Using this line as an example

sitems[0]=["<big><font face='Arial'>Site Menu</font></big>", ""]

is the first step to replace sitems with one of my menu options?
pandy
That line means nothing out of context, but I'd guess the answer to your question is "no".
minidiapolis
I'm sorry, I'm trying to follow the sample on http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm and I'm on the configuring the menu part,
pandy
OK, now I understand. Yes, you replace their link texts and URLs with your own. But the one you posted seems to be used for some kind of fake heading and doesn't have a URL.

Don't forget to provide navigation for those that can't use that menu.
minidiapolis
Can you explain "don't forgot to provide navigation for those that can't use that menu"?

Also, I'm really confused. . . . . . .I thought one time Darin said you didn't create different webpages for the different menu options. so what do you put for the URLS?
pandy
QUOTE(minidiapolis @ Apr 15 2008, 05:40 AM) *

Can you explain "don't forgot to provide navigation for those that can't use that menu"?


The menu doesn't provide any real links, so how will people without JavaScript get around your site if you don't provide an alternate way of navigating it? This isn't correct since the menu actually supports more browsers, but it does say the following in the description of the script: "Browsers other than NS 4+ and IE 4+ will simply see nothing". It's hard to click nothing.

QUOTE

Also, I'm really confused. . . . . . .I thought one time Darin said you didn't create different webpages for the different menu options. so what do you put for the URLS?

Now I'm confused. What's the purpose of a menu, or any links, if they don't lead to other pages?
Darin McGrew
QUOTE
Also, I'm really confused. . . . . . .I thought one time Darin said you didn't create different webpages for the different menu options. so what do you put for the URLS?
This may be a mis-communication. You don't need a separate page for the navigation links that pop up with a pop-up menu. Those links should be on the page the whole time. And they should be completely visible unless JavaScript is enabled.

The general idea is to have a list of links, or nested lists of links. Then use JavaScript to hide some/all of the list items. Then use JavaScript to display certain list items, depending upon what the user is doing with the mouse.

Or you can do everything in CSS, as in Eric Meyer's pure CSS menus example.

But you'll need multiple content pages, and the navigation links will need to go to those other content pages.
minidiapolis
I'm really confused. . . Darin, I could have sworn one time you said I did not need multiple content pages and that I would just need to change the display name. So, for the About Us page, say I have a popout menu with the doctrine, beliefs, mission statement, I need separate content pages for each, right?
Darin McGrew
I think you're putting the cart before the horse.

Start with the pages you want. Do you want a single "About Us" page? Or do you want a light-weight "About Us" page with links to "Doctrine", "Beliefs", and "Mission Statement" pages?

Once you figure out what pages you want, you can organize them and create navigation links to them. Then, if you want, you can hide some of the navigation links until the visitor hovers over something.
minidiapolis
I want a light-weight "About Us" page with links to "Doctrine", "Beliefs", and "Mission Statement" pages.
Darin McGrew
QUOTE
I want a light-weight "About Us" page with links to "Doctrine", "Beliefs", and "Mission Statement" pages.
Okay, then create multiple documents, with navigation links between them.

There are CSS/JavaScript tricks to make a single page act like somewhat like multiple pages, except that it works only somewhat, and it breaks users' expectations about how pages are supposed to behave. I don't recommend them.
minidiapolis
Ok, thanks so much for your help. I really appreciate your help with this
minidiapolis
For some reason the popout menu isn't displaying on www.fountainchurch.org/aboutUs.html, what am I doing wrong?
pandy
The same reason as almost all your problems, the other, positioned menu. It's on top of the new menu. It (the new menu) half works though. Are you really going to have both?
minidiapolis
It's what the client wants
minidiapolis
I deleted the absolute positioning but the menu goes under the content and it still doesn't display the popout menu
Darin McGrew
QUOTE(minidiapolis @ Apr 15 2008, 07:26 PM) *
For some reason the popout menu isn't displaying on www.fountainchurch.org/aboutUs.html, what am I doing wrong?
Well, among other things, you've created a menu that completely depends upon JavaScript.
minidiapolis
Can you help me a little more? I know nothing about javascript and was following the steps on http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm
Darin McGrew
The Pure CSS Menus example on Eric Meyer's css/edge site shows the right basic approach. Start with a list of links. Unfortunately, MSIE doesn't support the CSS required for Eric's pure CSS technique, but there are similar CSS-JavaScript hybrid techniques that work around MSIE's limitations.

When evaluating pop-up menu systems, make sure they start with a list of links. Don't use any like that dynamic drive menu that start with an array of data in JavaScript.

Then make sure the list of links remains accessible when JavaScript is disabled/unavailable. Some of them use CSS to hide the nested options, but use JavaScript to unhide them. That fails when JavaScript is disabled/unavailable, but CSS is supported.
pandy
QUOTE(Darin McGrew @ Apr 16 2008, 07:13 PM) *

MSIE doesn't support the CSS required for Eric's pure CSS technique, but there are similar CSS-JavaScript hybrid techniques that work around MSIE's limitations.

I linked to one the first time minidiapolis asked about menus.
http://www.htmldog.com/articles/suckerfish/dropdowns/
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. biggrin.gif
http://www.OffByOne.com

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

Click to view attachment
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. wub.gif
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
pandy
Yes. Otherwise the browser won't know it's there.
minidiapolis
What am I doing wrong now on http://www.fountainchurch.org/menu.html
Darin McGrew
It looks like you aren't setting a background for the sub-menu.

Oh, and you've got markup errors.
minidiapolis
background for the sub-menu?
minidiapolis
Am I on the right track though?
minidiapolis
What's wrong with lines 28, 56, 66, and 91?
Darin McGrew
It looks to me like there is an extra <ul> on line 56 that you should just remove. Also, you're using attributes in an <li> tag that don't apply.
Frederiek
Yes, see http://htmlhelp.com/reference/html40/special/script.html .

[edit]
Sorry, I didn't notice there was another page for this thread. Anyway, now you have a link on how to point a .js file in your HTML.
minidiapolis
What do I need to do to get the javascript to work?
Frederiek
Go see http://www.htmldog.com/articles/suckerfish...e/vertical.html, which probably is more convenient, since your links are vertical.
View the source. The script is self-contained, it should work as is, without having to add anything elsewhere to activate the script.

But if you are more comfortable with CSS only menu's, go see Listamatic.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.