CSS MENU PARTNERING


TASK

1.  Again, find a partner.  A new partner would mean a new partnership.  
It's tautological.  

2.  Go to my examples from Tuesday, 1108.  I want you to build a
menu with the buttons stacked vertically on the left.  You choose
the height and width of each button, and the number of buttons
you stack.  But I think you should use my "Extension" rectangle
so you don't have to spend time making one yourself.  On the other
hand, if you want to practice making buttons, head to Photoshop...

When you have your buttons, I want you to place each one on the page
by using absolute positioning.

3.  Now let's plan on making two buttons open a menu to the right,
where the revealed menu aligns its top with the button you mouseover
to reveal it.  That's a mouthful, but what I mean is that we're
going to do the usual thing for pop-right menus.

Choose two of your buttons and call them one and two.

4.  In order to be impressive, we need to put something to the right
of your buttons.  This way, when our buttons pop-right, they have
something to pop over.  

Why don't you grab some other web site, like nytimes.com, and stick
some of its content in a big square to the right.  You could try using an
iframe, but you should also be able to make it work using a big table or a
span to control that space, and copying actual text and images into the
table or span.

Your page should be pretty full right now.

5.  Now, let's make the images we want to pop up when we mouse over one
and two.  You can use the drop-down image I used, "extension/till
Tuesday/if you beg now", or you can make your own.  Note the size
of this image.  Cut it into three pieces.  You only need the lower two,
actually, but you could do all three if you want to look a bit redundant
(extension will open into a choice of extension/till tuesday/beg).

Now, let's add the two hidden spans.  Name them revone and revtwo.
You need to absolute position each span so that it has the same top
offset as the corresponding button, and has the left offset which is
the width of the button, plus any margin you may have introduced.
You have to give them the height and width of the images that will
be revealed as if they were one image.  Inside each span you should
put the images you got from cutting into three pieces.  Use a BR tag
to separate them, or else absolute position these, too.  Put a link
around each image.  You can target google, yahoo, and wustl as I did.

Preview the page and make sure that both revone and revtwo are hidden
when the page loads.  Turn each one "on" using the visibility to make
sure it is whee you want it to be.  Check your links.

6.  Add the onmouseover to button one.  This should make
revone.style.visibility='visible'.  Add the onmouseover to button two,
too, which makes revtwo.style.visibility='visible'.

7.  Ah, onmouseout.  Well, you have a few choices here.  You can put
the mouseout on the spans, revone and revtwo.  Try it.  Can you get
to the second link?  Ha ha ha ha.

One thing you could do is repeat the onmouseover so that it is not
just on the button, but also on every IMAGE in the revone span.
You can look at 1108/test5a.html to see that this works, if it
doesn't work for you.

8.  If you couldn't get that to work, we can always go back to putting
onmouseout on some area that is not revone.  In fact, you should add
"revone.style.visibility='hidden'" as part of the onmouseover for revtwo.
Do that, add the analogous thing to revone's onmouseover, and add an
onmouseover to the main text block, which hides both menus.

9.  Have a look at t3.html in this directory.  Ha ha ha ha ha ha.
This is what I was actually trying to do in the bathtub (sorry about
that image) when I discovered that :hover didn't work in IE for
non-anchor elements.  Can you figure out what I did in t3.html?
Do you see how this give you yet another way to do a drop-down
or pop-right menu?  You would have to give a class to each of the
spans, then swap the className of the span when someone mouses
over the corresponding button.  It's all very indirect.

10.  I just deleted all the text I was writing that tried to take
you through the change-className-to-reveal-a-menu idea.  Let's let
it all sink in a bit more.  I know you probably want time to
work on your third assignment, so let's call it quits at this point.