Stylesheets - Side menu

Author

Side menu

Simon Birch

2004-02-14, 10:29 am

Hi, I hope someone can help with this, it is driving me bonkers. After
reading the Suckerfish Dropdown article on A List Apart, I decided to try
and create a side menu based on the code I'd seen. Note that this is an
experiment and I'm only trying to get it to work in Firebird 0.7 at the
moment. Once it is working in Firebird, I'll look at adding any IE
workarounds, starting with those in the Dropdown article.

Here is the code I've got at the moment;

<html>
<head><title>Tester</title></head>
<style>

ul {
list-style: none; /* Remove list bullets */
background: #ddd; /* Grey background */
border: thin solid black; /* Menu border */
padding: 0; /* Remove bullet indent */
width: 7em; /* Force a thin menu */
}
li { /* Space out menu lines a bit more */
padding: 2px;
}

li > ul {
display: none; /* Hide sub menus */
width: auto;
position: absolute; /* Take sub menus out of the normal flow */
}

/* Show the sub elements for the top level item hovered over */
li:hover > ul {
display: inline; /* Display sub menu block on the same line as top level item */
}
li:hover {
background: #aaa; /* Darken the item we are on */
cursor: default; /* Retain a pointy arrow */
}

</style>
<body>
<ul class="top">
<li>Main item 1
<ul class="sub">
<li>
Sub1 Item1
<ul class="sub">
<li>Sub2 Item1</li>
<li>Sub2 Item2 a bit longer</li>
<li>Sub2 Item3</li>
</ul>
</li>
<li>
Sub1 Item2 a bit longer
<ul class="sub">
<li>Sub2 Item1</li>
<li>Sub2 Item2</li>
<li>Sub2 Item3 a bit longer</li>
</ul>
</li>
<li>Sub1 Item3</li>
</ul>
</li>
</ul>
</body>
</html>

When I just had the 'main' and 'sub1' stuff, everything looked fine.

Problems began when I added the sub2 items. Although the text seems OK,
the bordered background to the UL tag seems to be getting constrained by
the border of the higher level UL.

I've looked at the CSS2 specification, hunted around on various websites,
and tried random alteration and movement of various parts of the
stylesheet, but nothing seems to be helping. Can someone point me in the
right direction, or better yet solve the problem and then explain the
answer!

Many thanks in advance.

Els

2004-02-14, 10:29 am

Simon Birch wrote:

> Hi, I hope someone can help with this, it is driving me bonkers. After
> reading the Suckerfish Dropdown article on A List Apart, I decided to try
> and create a side menu based on the code I'd seen. Note that this is an
> experiment and I'm only trying to get it to work in Firebird 0.7 at the
> moment. Once it is working in Firebird, I'll look at adding any IE
> workarounds, starting with those in the Dropdown article.
>
> Here is the code I've got at the moment;
>
[snip code]

> When I just had the 'main' and 'sub1' stuff, everything looked fine.
>
> Problems began when I added the sub2 items. Although the text seems OK,
> the bordered background to the UL tag seems to be getting constrained by
> the border of the higher level UL.

Not sure if this is what you need, but instead of
ul {}
use:
ul, ul.sub {}

Looks better at least in my Firebird 0.7.

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Eric Bohlman

2004-02-14, 2:29 pm

Els <els.aNOSPAM@tiscali.nl> wrote in
news:402e2673$0$41750$5fc3050@dreader2.news.tiscali.nl:

> Not sure if this is what you need, but instead of
> ul {}
> use:
> ul, ul.sub {}

That fixes it, but the better solution is to remove the width: auto from
li>ul and add an IE-only setting to provide width: auto for all ul's so the
fallback won't be a mess.

Additionally, in Opera 7.22 the sub-menus were appearing too far to the
left from their parents, requiring very rapid mouse movement to get across
the blank space before the parent disappeared. I was able to fix that by
specifying position: relative on li (thus making it the container for its
sub-menus) and specifying margin: 0 and top: and left: offsets on li>ul.
Opera doesn't seem to like absolute positioning with no offsets specified,
and apparently adds a default margin.

The final stylesheet looks like:

ul {
list-style: none; /* Remove list bullets */
background: #ddd; /* Grey background */
border: thin solid black; /* Menu border */
padding: 0; /* Remove bullet indent */
width: 7em; /* Force a thin menu */
}

li { /* Space out menu lines a bit more */
padding: 2px;
position: relative; /* Sub menus will be positioned with respect
to this */
}

li > ul {
display: none; /* Hide sub menus */
position: absolute; /* Take sub menus out of the normal flow */
left: 100%;
top: 0;
margin: 0;
}

* html ul { /* Allow proper fallback in MSIE */
width: auto
}

/* Show the sub elements for the top level item hovered over */
li:hover > ul {
display: inline; /* Display sub menu block on the same line as
top level item */
}

li:hover {
background: #aaa; /* Darken the item we are on */
cursor: default; /* Retain a pointy arrow */
}

Simon Birch

2004-02-15, 10:29 pm

Many thanks to both Els and Eric. Unfortunately both these approaches have
the side effect of causing the long menu items to wrap onto two lines. I
may just have to accept that, however I was surprised with the original
code when the sub1 menu got sized to fit it's contents. I was hoping that
the sub2 menu would exhibit the same behaviour.

Els

2004-02-16, 2:28 am

Simon Birch wrote:
> Many thanks to both Els and Eric. Unfortunately both these approaches have
> the side effect of causing the long menu items to wrap onto two lines. I
> may just have to accept that, however I was surprised with the original
> code when the sub1 menu got sized to fit it's contents. I was hoping that
> the sub2 menu would exhibit the same behaviour.

Kay, just adjust the width in your code:

ul {
list-style: none; /* Remove list bullets */
background: #ddd; /* Grey background */
border: thin solid black; /* Menu border */
padding: 0; /* Remove bullet indent */
width: 7em; /* Force a thin menu */
}

ul.sub {
list-style: none; /* Remove list bullets */
background: #ddd; /* Grey background */
border: thin solid black; /* Menu border */
padding: 0; /* Remove bullet indent */
width: 10em; /* Force a thin menu */
}

This is what you want, right?

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.