Jan 31
A call out to the experts
2004 at 02.19 am posted by Veerle
As I mentioned in my yesterday’s post, I’m still a bit of a newbie when it comes to advanced CSS. My blog is actually my first website made with CSS2. I learned this by exploring CSS blogs, analyzing their code, looking at online CSS tutorials, experimenting etc.
At the moment I’m working on a website where I want to use my experience on this as much as I possible, but I came across a rather big challenge. The site needs a 2 level horizontal navigation where the 2nd level shows when you roll over the the 1st level button. You can compare it with the navigation of the Macromedia website, but of course they implemented this in Flash.
So far I had no luck in finding this and I also haven’t found any site who does this entirely in CSS. It makes me wonder if it actually IS possible, maybe I’m digging onto something where there is no outcome? If there are any experts out there who want to assist me on this, I would really appreciate it and be forever grateful.
Here is what I got so far. I use CSS in combination with a JavaScript. You see that the 2nd level navigation creates a gab and I can’t find a way to fix this :-(
Please use comments to post possible answers, so that it benefits everyone.
12served
1
This might help.
2
Thank you my friend! Who knows I might find my solution in that code. It doesn’t seem to work with rollovers but, still, it might help me.
If I do find the solution, I’ll make a post here so others can learn from it… it would be nice if my blog can become some kind of “community” for css people. I’m planning on adding some tutorials in the future.
In the meantime if someone else got any tips, don’t hesitate to comment here. Thanks again.
3
i’d say your close to the answer..its just a matter of getting everything : inline;.
4
Maybe this link will help you out a bit.
click here
5
Now THIS is a very useful site to learn from. I’ve started this navigation by exploring on this site, so I’ve actually been there already and it got me as far as I am now. But thanks anyway, I much appreciate this ;-)
I think I’m close ... I think it has something to do with the way my listing is built. It is nested into each other, that might explain the gabs.... I’ll dig further, who knows…
6
do you mind if i play around with your nav bar, then i’ll post the solution?
7
Yes please do! I would appriciate that. Thanks.
8
Just moving the sub-menus out of the li’s fixes everything fine, but doesn’t make much sense logically. It might be the best temporary fix though. Let me know if you want me to email you the code changes I did.
9
This worked for me…
I replaced your “float:left” with “position:absolute” (top: 20px) on your #smenu1...4 rules. If you apply the left offset of 100px for each iteration in order, your alignment is as you would want it. This seems to work in my winXP system in Opera 7.23, Moz, Firebird and IE6. Hope this helps.
10
Actually, Macromedia does an identical version of their menu using CSS. Check the Flash player download page.
11
Thanks so much for all the efforts here. I’ll try both suggestions.
Philip: thanks, I never thought about the downloads page… OF COURSE! they use no Flash there.
Guess I have enough to try :-)
If I got it fixed (probably on Monday) I’ll post it.
12
Have a look at this
Project Seven