Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

Menu with levels and anchored



1:10 am on Jul 16, 2001 (gmt 0)

I am in need of a navigation menu that fits a couple of specific needs.

1) it must be anchored across the top of the page and always visable as the content is scrolled
2) it must not be in a frame
3) it must be capable of showing at least 3 sub-levels of links.

This is for a specific project for cd-distribution and i've hit a wall trying to find something that works. The menu will hold over 500 links in 6 catagories with 3 sublevels for each catagory.
If anyone has run across something that might fit the bill, please point me in the proper direction. This includes commercial packages, if it does the job, i will pay to get it.

I currently have a javascript menu that satisfies everything but the anchoring across the top, if there is a way to anchor a javascript menu, that would be an even better solution and save me a lot of work :)


9:07 am on Jul 16, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

The anchoring you describe "should" be taken care of by position:fixed.

However, the browser support for this CSS-2 declaration is still quite spotty. Reports are that it works in Opera 5, Explorer 5 on Mac (but not even the 6.0 preview on Windows), and Konqueror. It doesn't work in Netscape 6, but it does work in Mozilla 0.8.

Your audience would need to be quite "captive" to use this solution, but with a CD distribution, I thought maybe they just might be.


10:39 am on Jul 16, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Would you consider modifying your requirements?

>1) it must be anchored across the top of the page and always visable as the content is scrolled

>2) it must not be in a frame

These 2 requirements aren't outright contradictory (as demonstrated by tedster) but you like to make things difficult for yourself, don't you? :)

For rqmnt 2, is it VITAL not to use frames, or would you simply like to avoid them (which is entirely fair - just makes things tricky)?

If it is possible to use them, it may well be worth it. Use of frames need not be the kiss of death for SEO, or site usability, as long as they are used carefully

For rqmnt 1, is the prime requiremnet anchoring to the top of the screen, or that the navigation always be visible?

If it were possible to be flexible on the positioning of the navigation, you could consider duplicating the nav at the top and bottom of the screen (depends on how big the screen is) so surfers could always see one of the nav bits. Otherwise you may even have to stoop as low as LHS/RHS navigation bars :o

If you really, really want the nav at the top of the screen, without frames, then you may end up having to accept that only a limited number of browsers are going to be able to render the site properly. I'm sure CSS2 support will become more widespread as time goes by, but as tedster points out, you may be in a position to ask your users to conform to your standards.

Perhaps the front end of the site could be set up to detect the browser being used, and direct those not using a suitable one to somewhere they could acquire one that would work, or to another version of the site that didnt have that specific navigation setup? That would require some maintenance on your part, checking compliance of new versions, and updating the list of redirects accordingly, but it might prove to be the most elegant solution in the end


3:01 pm on Jul 16, 2001 (gmt 0)

First, compatibility is not really a big concern, it is expected that this will be veiwed in IE5.0 + as a requirement of the cd.

Second, navigation must always be visable, using a bar at the top and bottom of the page will not work since the context will be 30+ pages long in some cases. Preferrably we want it across the top of the page cascading downwards in order to minimize the footprint of the menu when not in use

third, I tried previously using other ideas like frames and secondary windows. the proble, i was having with the frame was that since the mneu is so large, it required a very large frame, reducing the space of the document considerably.

I have seen a nice menu called WebTech on project7, which i beleive uses CSS-2. this is the type of idea i am looking for. I tried a while ago to make a multi-leveled menu using CSS but was only able to make one level deep. Does CSS2 get around this allowing a full cascading menu? Is CSS2 part of Frontpage 2002, or will i need dreamweaver?
Any informative sites regarding CSS2 would be appreciated as well as any recomendations for books that i might purchase to help.



8:58 am on Jul 17, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member


Are you refering to projectseven.com? if so it is pretty easy to create mulit-level dynamic menus. P7 provides free extionsions for dreamweaver which will handle the complex functions for you but if you don't have DW I uess you could just take the actual code.

I have created multilevel menus and they work very nicely across ALL v4 browsers :)


9:52 am on Jul 17, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

OK, so the CSS2 route seems to be the top option, as using frames with a top-mounted menu would clearly make the CD unusable. You still might want to think about LHS/RHS navigation though. Depends how much text there is in the top-level links I suppose. If you could get away with say 120 - 150 pixel sidebars, you'd still have a usable main frame, and you could use all the screen you wanted to expand the sub-menus.

The top-mounted menu would probably require CSS2, yes? And not all browsers support that, yes? So either you limit the potential circuation of the CD, or you include on it a browser that does handle CSS2 position:fixed declarations, yes?

<stupid question>Is that legal?</stupid question>

I suppose it sounds reasonable given how easy it is to download upgrades etc, but do you need written permission to distribute, or what? Software companies can be funny about 3rd party distribution, even of things they themselves give away for free


1:29 pm on Jul 17, 2001 (gmt 0)

It is my limited understanding that LHS/RHS navigation uses frames seperated left to right. Is this correct? If so, how can the menu that is restricted to a LHS frame use the whole window to expand into? Would a javascript menu be able to do that as well?

I have a fully completed menu in js but my boss wanted fixed location so it went in the scrap heap.

As for compatibility issues, the ultimate output of this project is to display technical reports to a very limited audience (probably less than 200 copies) so as long as it works with I.E. 5+ then i'm not concerned.


2:26 pm on Jul 17, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

To clarify:

I have seen sites that have navigation menus fixed on the side of a page, and clicking on a top level item expands the menu over the main part of the page. Unfortunately, I havent really investigated the methods they used, cos I'm not a top coder by any means, and I didnt know anyone was going to ask. I cant even think of one offhand to go and have a look at

I had kind of assumed that someone had written a clever little bit of JS that would do it.

Hmmm, actually now I come to think about it, I seem to recall when I have had a look at the code for one or two, there was use of layers in there, I think.


3:03 pm on Jul 17, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

OK, after some digging, see here [dynamicdrive.com] for a vast number of options on menu/nav systems. For a particularly good one see here [burmees.nl] for demo of the excellent HV Menu. Note the menu boxes drop into the lower frame. I haven't really looked too hard at this one, but I think its all JS, no CSS declarations (may well be wrong there though)


6:03 pm on Jul 17, 2001 (gmt 0)

That second link is perfect
now i just have to figure out how the coding works and see if i can't replicate it for my own needs

thanks a bunch


Featured Threads

Hot Threads This Week

Hot Threads This Month