CSS Menu Help

Hi there,

without having to search for a new forum, I thought I would post this here as an off-topic. I have been comissioned to make a website and I must admit that I am very new to CSS.

The client wants a vertical drop down menu such as the one that you will see on the Apple site: http://www.apple.com/startpage/

The menu is on the left hand side (and the right) - when you click on a header box the menu drops down. I have seen one at simply the best scripts, but it is not a css based one like on the Apple page.

Can anyone please advise as to how I can achieve this or know of a link, I would appreciate any help, my client is very fussy.

Thanks a stack.

Hi,

It's javascript
Take a look here http://www.dynamicdrive.com/dynamicindex1/

Hans

Thanks Hans

I did look at that page before and may have overlooked or missed something there. What I have done is save the Apple page - delete all unwanted text, graphics and links by process of emilination and kept testing the page to see if the menu still worked.

I then saw that it was dependant on a whole lot of .js files (as you said: javascript) - after examining these .js files I saw where they came from and now the whole problem is solved. Any person interested should take a look at this site: http://script.aculo.us/ and here is the download page http://wiki.script.aculo.us/scriptaculous/show/Usage and the code is for free.

I should have done this in the first place. Thank you for your reply. Now the trick is getting this to work. :( The web is advancing so quickly I am getting left behind! :)

Hi Barry,

Thanks for that great link,like to go with the animation fx
I'm using flash but like to know other ways to get the same results

Hans

Am I missing something here? This is the worst navigation page I've ever encountered. Firstly I see no drop down menus, so perhaps that would be a good place to start.

I'm using windows XP Home and Firefox 2.0.0.6

I am serious, I just can't navigate this site.

Hi

Which you don't see,Egg??

I see no drop down menu whatsoever. I see a horizontal "sub menu" that bears no relation to any sensible navigation.

I'm obviously missing something here, but what it is I have no idea.

Hi Egg,

Is it for the apple site??
tested with same FF version as you have,no problems here
The dropdowns are on left and righthand side
the topbar,which seems to have dropdowns don't have them,are just buttons

Hans

(2B.OT,Got to sleep,have to take the kids to school in the morning)

no probs here with FFox 2.0.0.6 - either site - as long as js enabled of course

Hi Everyone

Problems I have noticed with that drop down menu is that it only works once the page has fully loaded. The page opens with all the menu's expanded out, once the script comes into action, they concertina closed.

I personally do not like this navigation method as their sub-links are so long, and when you go to a certain section and it expands, the section heading is so high you do not know where you are.

I would prefer it if you could open and close the menus, giving you more control, such as the one that I have on my site: http://www.psptubez.com/

I had started on some designs - but he did not like them. I see where he is coming from - he want's his site to have a "blog" feel to it and I know that is what will make him happy, so I must look for a blog template and add that fancy schmancy menu to it and he will be happy.

Here are some links to some designs that he was not happy with, but he left it wide open for me as he had given me no direction and then was not happy with what I had done, needless to say this is a silly way to operate and it made me mad. (when you are desperate for money you will do anything!!) :D The only thing I knew what he wanted was red, grey and blue (so what is the Apple site all about then I ask you??)

Here are the test pages he declined.

http://www.legyle.com/test/index.html

and

http://www.psptubez.com/test/index.asp

Do you guys think that it is suitable to have your menu based on javascript? Surely some internet folk do not have java enabled or is that an archaic thought?

I personally think that the Apple site is very boring, but the client likes the style and as I said he is very fussy. The upside is that the site is about diving with sharks and marine photography, at least the images will brighten it up, hopefully. I must just mention that the client is a very nice guy should he ever stumble upon this thread!

Barry,

lots of big sites still have problems with IE7. If you have a content management system, 50 templates and perhaps 4 times the number controls (logical elements like menu, list and such), it takes a long time to adapt to a new browser.

Without JavaScript, you are pretty limited. As long as you can navigate everywhere without, you're fine. Just ensure, that you loose nothing but some effects when JavaScript is turned off.

I did not try myself but I would guess you could achieve the same effect with CSS, where you either bring a <div> to full height, or change visibility. For example the height solution could be a <div> containing "Top Songs" AND the songs. For example the hover event could expand the layer to full height. Thats just brainstorming btw. never tried something like that.

Juergen

I don't really like those collapsing sections on the left side of the Apple site, if that's what you're talking about.

I agree with Egg in that I saw no "drop-down menus." Just that terrible collapsing thing on the left.

I have put together a CSS based navigation for vertical and horizontal navigation system from resources around the web. I'm happy to share if you're interested. You can see an example of a horizontal menu in a test site I've been developing here: http://www.bigplan.net/client/mha/index.cfm?id=home A vertical menu system here: http://www.sebp.org/index.cfm?id=1000

As Juergen pointed out, you can't really have CSS navigation without JavaScript. You'll need it to make IE compatible. The menus won't work in IE without it, even though they are CSS based.

Hi there Red

Yes, I must agree with you those collapsing sections on Apple's site arn't the best and that it was I meant by drop down, sorry.

I LOVE your expanding buttons at the top on the http://www.sebp.org/index.cfm?id=1000 site, and THAT IS EXACTLY what my client wants on an opening page, except that I have to put an image of a shark in there, like the one in "Jaws" the movie.

I also like the vertical css menu and I would appreciate any help you can give me with regards to that "expanding button" menu at the top of the page.

I can get CSS code for normal vertical dropdown menu off the net, but at this stage the client still is set on those collapsing ones.

Tks everyone for assisting.

The ADxMenu is a great CSS based menu:

• Simplest possible HTML
• Simplest possible maintenance
• Ready-made CSS for basic work
• Visual design limited only by your graphic skills and CSS knowledge
• It's free ;)

See also the examples for the different menu types (horizontal/vertical/top to bottom/bottom to top).

Regards,
Remi

Tks Remi for that link. Great resource - it will definitely come in handy.

Wow, thanks Remi. I had not seen ADxMenu before.

The menu I use is adapted from the Suckerfish Dropdowns, looks like from about the same time period. It doesn't use as much Javascript though.

Here's a link to a few resources I found and used to make mine.

http://www.alistapart.com/articles/dropdowns
http://solardreamstudios.com/learn/css/cssmenus

I did add and change a few things like the transparent background etc., but otherwise it's pretty close.

I noticed the ADxMenu has two more menu types than I have, that's nice.

We had a similar discussion about this awhile back. You might find it helpful as well: http://www.talkgraphics.com/showthre...&highlight=css

Barry, the menu at the top of the example you saw was a simple Flash menu - no drop-downs. The CSS menu is on the left of that site.

It seems, the website for ADxMenu has changed:
http://aplus.rs/adxmenudev/adxmenu-v...rop-down-menu/

Examples:
http://aplus.rs/adxmenu/examples/

Regards,
Remi

Vertical menus? :confused::confused:

same here, no vertical menus

Sorry, I don't understand. What are you missing?

I can't see/find any vertical menus at the side :o:confused:

Vertical menu for the left side and for the right side. You can change the font, colour, size, background, ...

Remi

Thanks Remi :) But the problem is I don't see any on that Apple site but they are supposed to be there, aren't they?

Where are you getting the 'Apple' link from John??

Remi isn't linking to 'Apple' in either of his posts :confused:

Quote:

---

Originally Posted by remi

It seems, the website for ADxMenu has changed:
http://aplus.rs/adxmenudev/adxmenu-v...rop-down-menu/

Examples:
http://aplus.rs/adxmenu/examples/

Regards,
Remi

---

Post #1 Steve.

Isn't there supposed to be a vertical menu on the Apple site linked to? Not that I'm bothered whether the Apple site has a vertical menu or not :p but I was just wondering why I can't see it. Let me know if I've got the wrong end of the stick and I'll beat myself over the head with it :D

Make it a rubber stick John.

Post# was posted 03 September 2007

Likely Apple have updated a bit since then :D:D

Quote:

---

Originally Posted by haakoo

...Is it for the apple site??tested with same FF version as you have,no problems here The dropdowns are on left and righthand side
the topbar,which seems to have dropdowns don't have them,are just buttons

---

Egg was having problems with them as well ;)

Quote:

---

Originally Posted by sledger

make it a rubber stick john. Post# was posted 03 september 2007

---

D'OH!!! Time for bed :D:D:D

Yes - this is the problem when bumping very old threads, the topic and original content might be completely irrelevant or obsolete..

Best to start a new thread in these cases.