How do I unfold a vertical menu..?

HTML & CSS
1

I’m brand new to css web page design.
Have only spent a couple of days trying it out - with help from http://www.westciv.com/style_master/academy/hands_on_tutorial/index.html
Via this tutorial I have made my first example: www.computersys.eu/test

I have now come to the menu. I would like it to function like this one: http://www.brakesint.com/ - but as you can see on my page - in vertical iso horizontal position.

My example shows the menu items static open - but how do I make the menu items unfold into two or three submenus…?

2

Ah, a simple dropdown menu.

Try this out for size:
http://www.htmldog.com/articles/suckerfish/dropdowns/

I have a CSS dropdown menu that doesn’t use JavaScript (it uses a .htc file) but to write out a tutorial on it now would just take too much time right now, and one of my clients would really hate me for it if I did.

3

Hello.

I have tried many different techniques for the drop down menu.

The old ones from suckerfish seemed to work OK except in IE6 (worked fine in 7).

So I’ve tried the one recommended here (Son of Suckerfish Dropdowns - http://www.htmldog.com/articles/suckerfish/dropdowns/).

I now have a problem both in IE and Firefox since the menu images go to the right instead of going under each other.

Any idea. This is really driving me insane.

If someone could help me that would be great.

http://v2.zelink.com

Thanks

4

The old ones from suckerfish seemed to work OK except in IE6

They worked fine in IE6 :slight_smile: maybe yours didn’t but the originals did and you must have changed something :wink:

I now have a problem both in IE and Firefox since the menu images go to the right instead of going under each other.

The list items are floated and you have done nothing to stop this on the nested lists. You could either remove the float form the nested lists and they would display fine in firefox. However IE would have a whitespace bug then so you are better off keeping them floated but just make them clear each other so that they line up underneath each other.


 #nav li ul li{clear:left}
5

I think I’ve tried so many combinations that I forgot that one.

I don’t know why but I’ve come to thinking that CSS were a bit like fuzzy logic.

I know it’s not the case. But it is so easy to loose it !

Thank you again. Works great.

6

I don’t know why but I’ve come to thinking that CSS were a bit like fuzzy logic

No CSS is fine :wink: It’s the designers Fuzzy thinking that is usually the problem lol :slight_smile:

7

Hey guys - I was actually wanting to have a vertical unfolding menu.
Have now highlighted that in my first message.

8

Do you mean something like this then?

http://onlinetools.org/tools/dom-tree-menu-puredom/

I thought you were looking for a dropdown menu originally.

You can see an example of the menu in action at http://www.aurora-il.org (it’s the left side menu on my city’s Web site)

9

Hello Dan,
Yes - that’s what I’m looking for (or an unfold to the right)…
But if I can succeed to make my left hand vertical menu like on the Aurora site - I would be pleased…

I have fiddled around trying several different attempts to edit in the source view and the css file - I’m using GoLive CS2 - but simply can’t find out how to implement the menu…
I did browse around in the different links for a lot of tutorials - but still don’t get it. I cannot find out how to edit the source and which files and scripts to put where.
Are there anywhere I can see how to do it - step by step - with screenshots or images of how it should look in the source - and where the files should be…?

10

Dan,

Have been a little while since I last asked in this thread - but that is because I really wanted to try and find out myself how to do it… I’ve had to give up though - so now I’m throwing the towel into the ring…

I like the left hand vertical menu from your city’s web site - it’s exactly what I’m looking to create for my own project - although it does not need to be so comprehensive as in yours - only 2 or three main topics and then some unfolding beneath…

Are you willing to show me how I can achieve this…? To implement this on my test site: www.computersys.eu/test
I’m somewhat confused on what to put in the HTML and where - and what to put in the CSS - how and where…?

11

I’m at a public computer right now, so if you can wait until I get home, I should be able to help you.

12

Sure - thanks… Rome was not build in one day :slight_smile:

13

Turns out deathshadow did something like this for someone else recently. He gave me permission to use it on one of my sites (I was going to use the one I suggested to you previously - now I don’t have to).

You can see it in action here:
http://battletech.hopto.org/for_others/nroussi/test.html

As always, with deathshadow anyway, the directory is unlocked, so you can grab the source files directly.

Notice how the bottom area has a section where you can expand and collapse ALL of the main sections at once. You can even nest dropdown menus inside here as well.

But it didn’t even take Nero a day to play his fiddle while the city burned to the ground, either ;).

14

Thanks Dan - looks very interesting - and also I appreciate the courtesy of the battletech site - for allowing to download the examples…
I’ll try it out…

15

Don’t thank me, thank deathshadow. I’m just the messenger in this case.

16

Sure - I’ll thank deathshadow…

BTW: I have now managed to alter deathshadow’s design a bit - to suit my liking www.computersys.eu/test - and my next task is to find out how to make another page open within the #main section of the index.html
Is it possible to have another html page open within that one - without reloading the whole index page…? And how do I do that…? I mean from using one of the links in the menu…

17

OK guys - I think I found out myself:

I make new html pages - and enter the link to the css doc in the head of those - then edit the links forth and back - for the different pages - so that every click on a link actually looks like e.g. only the text in the Content changes - when it is actually the whole page that changes…

Is that correct…?

18

when it is actually the whole page that changes…

Yes you should open a new page for every link otherwise your whole webpage would be on one page and that’s not a good idea :slight_smile:

Once the first page has loaded and the css is cached the next page load won’t be as long anyway.

19

Thanks Paul - and I must say: I like this CSS more and more - it’s really fascinating

20