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?
That line means nothing out of context, but I'd guess the answer to your question is "no".
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,
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.
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?
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?
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.
I want a light-weight "About Us" page with links to "Doctrine", "Beliefs", and "Mission Statement" pages.
Ok, thanks so much for your help. I really appreciate your help with this
For some reason the popout menu isn't displaying on www.fountainchurch.org/aboutUs.html, what am I doing wrong?
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?
It's what the client wants
I deleted the absolute positioning but the menu goes under the content and it still doesn't display the popout menu
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
The http://meyerweb.com/eric/css/edge/menus/demo.html 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.
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>
I don't know. What is it?
it's from the webpage you gave me http://www.htmldog.com/articles/suckerfish/dropdowns/
Where do you want the menu?
it's from the webpage you gave me http://www.htmldog.com/articles/suckerfish/dropdowns/
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.
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.
I'm embarrassed to ask this but how do you disable CSS and Javascript?
I need the menu where it is now
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.
There is a web developer toolbar plugin for Firefox that gives you buttons to disable CSS, JavaScript, images, etc. It's very nice.
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.
Oh, we forgot that for IE there's also the handy dandy WiDGets. Don't do JS though.
http://htmlhelp.com/tools/widgets/
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
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);
That's JavaScript, not CSS. It could go in an external JavaScript file, but not in an external style sheet.
Here's a stupid question but how do you create a javascript file and is that the only thing that goes in that file?
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.
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?
By convention, JavaScript files are usually named something.js. Just make sure that your server sends it with "text/javascript" as the content type.
do I need to link it to the html page
Yes. Otherwise the browser won't know it's there.
What am I doing wrong now on http://www.fountainchurch.org/menu.html
It looks like you aren't setting a background for the sub-menu.
Oh, and you've got http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Fwww.fountainchurch.org%2Fmenu.html&warnings=yes.
background for the sub-menu?
Am I on the right track though?
What's wrong with lines 28, 56, 66, and 91?
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.
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.
What do I need to do to get the javascript to work?
Go see http://www.htmldog.com/articles/suckerfish/dropdowns/example/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 http://css.maxdesign.com.au/listamatic/index.htm.
I copied the code from http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html but it didn't work. see www.fountainchurch.org/menu.html
You've just pasted CSS into the HTML document.
See http://www.htmlhelp.com/reference/css/style-html.html in our CSS reference.
Or even an opening STYLE tag.
The entire <style></style> declaration needs to go between the <head></head> pair. Put it just below the <link...> to your external CSS file.
The same goes for the script. And it should be written as:
<script type="text/javascript"><!--
//all the script functions here
//--></script>
Yeah, had there been a start tag.
Well, I might be getting closer. . . . maybe. . . although the popout menu still doesn't appear on the sidebar
Did you ever do what I suggested and tried it out first on a page of its own?
I thought you said to try it on the menu on a separate page first.
Yes. Did you?
yes at www.fountainchurch.org/aboutUs.html. The popout menu isn't displaying on the sidebar
I'm trying to convert the sample code to the code that will be on the church's website but it's not working. Look on www.fountainchurch.org/menu1.html
the AP menu? Also, I'm confused, what do you mean by without the content of the original page?
Clearly, Pandy means just the plain menu, nothing else.
Just a test page for only the menu, quoi.
look on www.fountainchurch.org/menu.html. it still isn't working
Why would the website work correctly in opera but not in IE?
Would it be the disappearing background list bug?
How many people use IE?
On www.fountainchurch. org/test.html how can the menu options be visible without the mouse hovering on it?
Your fountain.css interferes with the inline CSS. See what happens if you comment out the external CSS.
Get rid of all menu related CSS from fountain.css. Then either leave the menu CSS inline or move it to fountain.css.
Comment out external CSS?
On http://www.fountainchurch.org/test.html if you click on about us, our beliefs, it wants to do another popout menu but I don't need one. I think I have an extra end tag but I don't know which tag.
Yes, put comments around the <link> tag to your CSS, so it won't load with the page. It looks like this:
<!--
<link type="text/css" rel="stylesheet" href="fountain.css">
-->
The structure of your lists is broken. You have used <ul id="nav"> more than once, but a ID must be unique.
Such and some other errors would be reported by the http://htmlhelp.com/tools/validator/.
View the source of the http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones1.html to see how the HTML is marked up and structured. Markup your own menu accordingly, but use the CSS of the vertical dropdown menu.
How would I make the menu vertical? Thanks so much for the other dropdown example. It looks so much easier.
By using the CSS from the vertical exemple on the one level menu exemple, mainly. Leave out all CSS for "third and above level" lists.
I hope you didn't only copy the source from the exemple, but took a close look too. See when new <ul> and <li> pairs are used and when not. And read the http://www.htmldog.com/articles/suckerfish/dropdowns/ too.
BTW, more list menu's are explained at http://css.maxdesign.com.au/listamatic/index.htm.
I don't get it, I followed the example on http://css.maxdesign.com.au/listamatic/vertical01.htm# but I'm still getting horizontal lists, not vertical. See http://www.fountainchurch.org/menu1.html#
But your CSS is nothing like that at maxdesign. Among other things you float the LIs left. What do you think that does?
I fixed that problem but now if the mouse is hovering over about us, the popout menu covers the other menu options and even if the mouse is moved off that menu, the popout menu doesn't disappear at least in IE it doesn't. http://www.fountainchurch.org/menu1.html# shows this.
AFAICS, the CSS is doing just what you told it to do. The sublists start out positioned off-screen to the left. When you hover over a menu item, its sublist is repositioned in its normal location (left: auto).
What is it that you want to happen differently?
I think you got confused by the diffrent examples and mixed things up. That's partly my fault (sorry), but also caused by the fact that you don't seem to know what you are doing (no offence).
This is what your HTML for the menu should look like:
I forgot to say that I based that on your menu1.html code.
It's getting there. I'm still having problems though. . . if the mouse is over About Us that popout menu flips out, but if the mouse goes down to programs, that popout menu flips out as well.
Also, do I need separate html pages for our beliefs, doctrine, etc..?
Do you mean that you see both the "About Us" submenu and the "Programs" submenu at the same time? I see only one at a time, depending upon which top menu entry I'm hovering over.
If you're going to have separate links for beliefs, doctrine, and mission statement, then you need either separate pages for each one, or you need multiple anchors on a single page (so you can link to the anchors).
I found that the markup didn't validate. So I corrected both your and mine errors.
Then I thought it to be odd to have a link on the main menu items, though depending on where you want to go from there. So I changed those with a sub-menu to <p> tags, for which I gave CSS rules (to get rid of default margins on P tags, and a cursor to indicate some kind of link attachment (the hover)). See the result of all this in the attached file below (open it in a simple text-editor (not Word!)).
All this doesn't explain the double dropdown. Like Darin, I don't see that.
menu.html ( 2.33k )
Number of downloads: 703
Why isn't the border color changing to white?
It looks like a result of your http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.fountainchurch.org%2Fmenu1.html&profile=css21&usermedium=all&warning=1&lang=en.
Why isn't the picture showing up as the bullet? I followed the example on http://css.maxdesign.com.au/listamatic/vertical04.htm. Also, how can I put a vertical line between the bullet/picture and the menu option like on www.fountainchurch.org
I have played around with the margin/padding, still no picture
The images are there in FF. They'll be there in Opera too, if given some space to live in. But I don't think this will work in IE. I don't remember the details, but I think IE doesn't consider floated LIs to be list items anymore (display-wise), so no bullet.
So what do I do for IE?
Dunno if there is a way. Use a background image instead.
AFAICS, it's already a background image.
Problem is, the puddle image is too big to be some kind of "bullet", which makes the menu exaggeratedly big too. Normally, one would use a smaller image. An idea would be to use just a waterdrop or something.
See how Simplebits codes this kind of list (see the comments in the CSS for the width and height of the icon) at http://www.simplebits.com/notebook/2004/07/18/clickable.html.
And the image of the sub-menu shows behind the main menu items (except the last one of course). The sub-menu has to fold out sufficiently to the right to prevent this.
Am I looking at the wrong page? I looked at the last referred to (by Darin above) and there it's used with list-style-image.
http://www.fountainchurch.org/menu1.html
Ah, yes, it's the correct page and you're right, it is used as a list-style-image.
BTW, positioniseverything wrote about an IE bug which is caused by placing a list with a background set within a floated <div> that has been relatively positioned. See the article: http://www.positioniseverything.net/explorer/ie-listbug.html. Is that what you mean, Pandy? But I don't think this is the issue here, as there is no <div> around the list at all.
No. The image isn't used as a background, remember?
In IE it's enough to float the LIs for their bullets to disappear. No other styling needed. I'm not sure about IE7, but I think it's the same.
For you.
I'd better add that it doesn't help to add margin/padding.
Do you mean to say that most of maxdesign's Listamatic menu's don't work in IE, at least proir to IE7? What about the Simplebits sample? And what not…
Once I start up my VM, and when I remember, I'll give it a try.
No, I don't think there are many lists there, if any, that use floated LIs and bullets or list-style-image. But I haven't looked at them for ages. If you can point me to such a list there I'll check it out with my trusty IE6.
Maybe you're right again. In a quick search I found eg. this page with a "float: right;" : http://css.maxdesign.com.au/listamatic/horizontal20.htm.
Or take the sample from which this thread almost started: http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html, which also uses a float.
But effectively, there's no need for a float anyway in a list.
Thank you so much for all the help on this one. . . I really really really appreciate it!
You're welcome.
I hope you achieve what you're looking for and learn something in the long run.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)