need w/drop-down menus..

[Frances Del Rio]

after searching a lot on google I found what I think is the best (i.e.,
simplest..) implementation for this, at

http://www.alistapart.com/articles/horizdropdowns/

only thing is, I need to make two vital changes to it:

1) I need to do it w/images instead of plain HTML text;
2) I need images (main menus) to go ACROSS, right next to each other ina
row, with the sub-menu imgs to appear right below main imags (a pretty
classic setting..)

would appreciate help on how to do this.. (the main thing, the most
important thing here, that I don't understand is how he makes sub-menus
appear when you hover on main items..) thank you very much...

Frances

[Frances Del Rio]

Re: need w/drop-down menus..

mostly also what I don't understand is this construction:

li ul a {...}
li ul {...}

had never seen more than one selector (is this correct terminology?) in
front of that left brace.. thank you.. Frances


Frances Del Rio wrote:
[color=blue]
> after searching a lot on google I found what I think is the best (i.e.,
> simplest..) implementation for this, at
> http://www.alistapart.com/articles/horizdropdowns/
>
> only thing is, I need to make two vital changes to it:
>
> 1) I need to do it w/images instead of plain HTML text;
> 2) I need images (main menus) to go ACROSS, right next to each other ina
> row, with the sub-menu imgs to appear right below main imags (a pretty
> classic setting..)
>
> would appreciate help on how to do this.. (the main thing, the most
> important thing here, that I don't understand is how he makes sub-menus
> appear when you hover on main items..) thank you very much...
>
> Frances
>[/color]

[David Dorward]

Re: need w/drop-down menus..

Frances Del Rio wrote:
[color=blue]
> mostly also what I don't understand is this construction:
> li ul a {...}[/color]

http://w3.org/TR/CSS2/selector.html#descendant-selectors

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Neal]

Re: need w/drop-down menus..

On Fri, 05 Nov 2004 13:50:30 -0500, Frances Del Rio <fdr58@yahoo.co m>
wrote:
[color=blue]
> mostly also what I don't understand is this construction:
>
> li ul a {...}
> li ul {...}
>
> had never seen more than one selector (is this correct terminology?) in
> front of that left brace.. thank you.. Frances[/color]

li ul { ... } means "style any ul which is in a li."

li ul a { ... } means "style any a which is in a ul, which itself is in a
li."

[Neal]

Re: need w/drop-down menus..

On Fri, 05 Nov 2004 13:38:45 -0500, Frances Del Rio <fdr58@yahoo.co m>
wrote:
[color=blue]
> after searching a lot on google I found what I think is the best (i.e.,
> simplest..) implementation for this, at
> http://www.alistapart.com/articles/horizdropdowns/
>
> only thing is, I need to make two vital changes to it:
>
> 1) I need to do it w/images instead of plain HTML text;[/color]

Images as text aren't terribly usable. I don't recommend it. That said,
you should be able to put an image in the anchor just the same as text. Be
sure you size the list-related elements in CSS in pixels, and enough to
hold the image and any borders you may add. And use alt text, of course.
[color=blue]
> 2) I need images (main menus) to go ACROSS, right next to each other ina
> row, with the sub-menu imgs to appear right below main imags (a pretty
> classic setting..)[/color]

There should be an example there.

Go to http://www.htmldog.com and look in the Dog Blog for Suckerfish.
You'll find a LOT of examples, some of which might be of help.
[color=blue]
> (the main thing, the most important thing here, that I don't understand
> is how he makes sub-menus appear when you hover on main items..)[/color]

The sub-menus are in the HTML. They are set to display:none; normally.
Then the hover state changes it to a different display value. Fails in IE,
as hover only works on a elements in IE, but it works in most other CSS
browsers which correctly allow hover on other elements (like list elements
- which is how this works).

[Brian]

Re: need w/drop-down menus..

Frances Del Rio wrote:[color=blue]
> mostly also what I don't understand is this construction:
>
> li ul a {...}
> li ul {...}[/color]

These are descendent selectors.

li ul {} selects any ul element that appears inside an li element.
Here's an example:

li {color: black; background: white;}
li ul {color: red; background: white;}


<html>
<head>
<title>descende nts</title>
</head>
<body>
<ul>
<li>this is black</li>
<li>this is black
<ul>
<li>
this is red because its parent ul
is a descendent (inside of)
an li element
</li>
</ul>
</li>
</ul>
<p>This demonstrates a basic document tree in
<abbr title="hyper text markup language">html</abbr>.
</p>
<address>writte n by Brian</address>
</body>
</html>


It might help to consider the document tree created by this markup:


html -- head -- title
|
|--body -- ul -- li
| |-- li -- ul
| |-- li
|-- p
| | -- abbr
|
|
address


The ul that is nested inside the li is a descendent in this tree
representation.

HTH

--
Brian (remove "invalid" to email me)

[Frances Del Rio]

Re: need w/drop-down menus..



Neal wrote:[color=blue]
> On Fri, 05 Nov 2004 13:38:45 -0500, Frances Del Rio <fdr58@yahoo.co m>
> wrote:
>[color=green]
>> after searching a lot on google I found what I think is the best
>> (i.e., simplest..) implementation for this, at
>> http://www.alistapart.com/articles/horizdropdowns/
>>
>> only thing is, I need to make two vital changes to it:
>>
>> 1) I need to do it w/images instead of plain HTML text;[/color]
>
>
> Images as text aren't terribly usable. I don't recommend it. That said,
> you should be able to put an image in the anchor just the same as text.
> Be sure you size the list-related elements in CSS in pixels, and enough
> to hold the image and any borders you may add. And use alt text, of course.
>[color=green]
>> 2) I need images (main menus) to go ACROSS, right next to each other
>> ina row, with the sub-menu imgs to appear right below main imags (a
>> pretty classic setting..)[/color]
>
>
> There should be an example there.
>
> Go to http://www.htmldog.com and look in the Dog Blog for Suckerfish.[/color]

this is perfect.. thank you very much.. and thank you very much to
everyone else for their responses.. Frances