Welcome to the MacNN Forums.

macgyvr64 · Feb 29, 2004, 05:07 PM

Is there a way do do automac updating of submenus using CSS? ...Like the bar at the top of this site: http://www.tiscali.fr

Jaey · Feb 29, 2004, 11:05 PM

Now this is just torturing me. I spent a couple hours trying to do this myself and I failed. Someone please solve it.

macgyvr64 · Feb 29, 2004, 11:13 PM

I wonder if this is tweakable...
http://members.tripod.com/~dyhtml/emagic.htm

Could that be modified to hide/show different submenus?

Synotic · Feb 29, 2004, 11:48 PM

Originally posted by macgyvr64:
I wonder if this is tweakable...
http://members.tripod.com/~dyhtml/emagic.htm

Could that be modified to hide/show different submenus?

Did you check the code for that site? It's using JavaScript. The basic idea would be to either... switch on and off visibility, switch on and off "display" or alternate between z-indexes. I gave it a shot and this is what I came up with. It's not as nice as the tiscali version but it's the closest I could come to getting the basic functionality. The biggest problem which I don't think is solvable is the fact that using the pseudo hover selector is inherently a toggle effect, on and off... therefore you can it have it "stick" on one tab once it's selected, although you may be able to have an initial tab selected which is defaulted to after you deselect other tabs. Another annoyance is that you can't select anything other than the object that's hovered and children of the object... This makes having the submenu properly positioned with text based tabs fairly difficult... with images however I think it'd work pretty nicely if you're willing to accept the flick-on, flick-off functionality. Anyways, give it a shot. It may be semi-helpful

Edit: I forgot to mention one of the biggest shortcomings... winie doesn't support hover on anything other than URLS

macgyvr64 · 12:04 AM

I messed around with google and subethaedit and managed to cobble this together. Maybe someone can tell me how to not have to manually hide the other styles when mouseover-ing over another one...it's a start. All one html file.

<html>
<head>
<title>submenu test grounds</title>
</head>
<body>

<span onMouseover="homeID.style.display='';aboutID.style .display='none'">
<a href="index.html"><b>Home</b></a>
</span>
<span onMouseover="aboutID.style.display='';homeID.style .display='none'">
<a href="about.html"><b>About</b></a>
</span>
<div ID="homeID" STYLE="display:none"><b>home submenu</b></div>
<div ID="aboutID" STYLE="display:none"><b>about submenu</b></div>

</body>
</html>

If I set the homeID syle to 'block' it is shown as the default, which is what I want for my site..your needs may be different. Also, I have NO idea if what I'm doing is valid at all. I've done some stuff with CSS before, but only by basically copying what others have done. This is my "hacking around with CSS" stage :-P

macgyvr64 · Mar 1, 2004, 12:34 AM

Update: It's starting to look better, I think. Some obvious optimization of the style tags can be done, but I'd like to make it work all nice first. I read somewhere, probably Slashdot:
1) Make it work.
2) Make it work well
3) Make it work fast
-----------------------------------------
<html>
<head>
<title>submenu test grounds</title>
</head>
<body>

<table border="0", cellspacing="0", cellpadding="0" width="300">
<tr>
<td width="150" style="background-color: #7BBCFF;padding: 5px;border-left: 1px solid #000000;">
<center>
<span onMouseover="homeID.style.display='';aboutID.style .display='none'">
<a href="index.html"><b>Home</b></a>
</span>
</center>
</td>
<td width="150" style="background-color: #FF6354;padding: 5px;">
<center>
<span onMouseover="aboutID.style.display='';homeID.style .display='none'">
<a href="about.html"><b>About</b></a>
</span>
</center>
</td>
</tr>
<tr>
<td colspan="2">
<div ID="homeID" STYLE="display:block;background-color:#7BBCFF;padding: 5px;border-left: 1px solid #000000;border-bottom: 1px solid #000000;"><b>home submenu</b></div>
<div ID="aboutID" STYLE="display:none;background-color:#FF6354;padding: 5px;border-left: 1px solid #000000;border-bottom: 1px solid #000000;"><b>about submenu</b></div>
</td>
</tr>
</table>

</body>
</html>

clam2000 · Mar 1, 2004, 07:00 PM

there is a "pure" css way of doing this, check out
http://www.meyerweb.com/eric/css/edge/menus/demo.html

it's pretty cool

--will

macgyvr64 · Mar 1, 2004, 07:04 PM

That's close to what I want to do..the unordered list is a good idea...

mzllr · 01:17 PM

i found this article which i thought was pretty interesting, especially this part about an IE work around...

Multiple level menus require a different approach though. This is because IE lacks support for the > child selector, which would be perfect to show direct submenus, and not yet the deeper nested ones:

[php]
li:hover > ul {
/* no go in IE */
}
[/php]

There is an alternative way to simulate this, using simple descendant selectors only. A previously described method was based on the use of extra classnames, but an easier way is to use the specificity of CSS. Every CSS rule has a certain importance, which can be determined by simply counting the different elements of a rule. Nodenames count as "1", class, pseuo-class and attribute selectors count as "10", and ids as "100". Take the example below.

[php]
ul ul {
display:none;
}

li:hover ul {
display:block;
}
[/php]

The reason that this works, is because of the specificity. The first rule contains only 2 nodenames, which makes its value 2. The second also contains 2 nodenames, but the :hover pseudoclass is worth 10, so the combined value of the rule is 12. Because 12 exceeds 2, a hover on the li will show the ul (or rather all of them) nested within.

So how does this help getting around the > child selector? Well, if a rule of 12 would show all submenu's, all we would have to do is make a rule that is worth more than 12 to hide the next menus. Subsequently, that menu would have to be shown by another rule, again worth even more, and so on. For 3 levels of navigation, the CSS code is surprisingly short:

[php]
/* 2 and 13 */
ul ul, li:hover ul ul {
display:none;
}

/* 12 and 23*/
li:hover ul, li:hover li:hover ul {
display:block;
[/php]

macgyvr64 · Mar 2, 2004, 12:22 PM

That's pretty cool..too bad about IE sucking and all :-P MS really needs to update it... maybe WXP SP 2 will fix things.