[The Style Sheet Code] [The HTML Code]
[The Finished Product]So, I got this letter one day from someone who decided to shame me into writing a tutorial. I guess it worked. Here I sit writing it! Anyway, she said she wanted to know how to do the drop-down menus on the Microsoft Home Page and that she wondered if I would even be able to show her how to do it.
Well, after feeling bad I went to the page to see what she was asking for. I took the challenge and can honestly say that I built this little puppy myself without even looking at how the wizards at Microsoft did theirs. Mine’s a pretty good representation, if I do say so myself. However…
Like the menu on the Microsoft homepage, the drop function only works with MSIE version 4.0 and above. I used the SPAN tag to get the majority of the effect. I also made the little cross and dash images.
Also like the Microsoft menus, this pup cannot sit with anything underneath it because it needs space to expand. If something is underneath, it gets bumped as the menu expands. Those two concerns aside, let’s go see it, shall we?
See It In Action…
The Style Sheet Code
The event is created through the use of both Style Sheets and HTML. Let’s look at the Style Sheets first:<STYLE TYPE=”text/css”>
#menu1 { display : none }
#menu2 { display : none }
#menu3 { display : none }
A:link {color:black; text-decoration:none}
A:hover {color:blue; text-decoration:underline}
</STYLE>
If you remember in the example, there were three menus. Note above that I have three IDs set up, each representing one of those three menus. And each is set to show no display.
But I See the Heading!
Yes, you do. That’s because the heading is not part of the drop-down menu. It stays on the screen no matter what.
The second group of two lines creates the effect of black link text with no underline. That text then turns blue and gets an underline when the mouse rolls over it. That should look somewhat familiar to you if you’re reading this tutorial. If not, make a point of reading the basic Style Sheet tutorial right now, then come on back.
Got it? Super. Let’s hit the code:
The HTML Code
The code itself is the same thing three times. Three menus, three pieces of duplicate code. Plus, there are FONT commands (that make the text small), bold tags, and image tags(that put in the little cross and dash images). Later in the tutorial I’ll show the code in its full bore best with all the bells and whistles, but for right now, here’s the bare bones of how I got it to work:<TABLE BORDER=”0″>
<TD VALIGN=”top” Width=”200″>
<SPAN onMouseOver=”document.all.menu1.style.display = ‘block’”
onMouseOut=”document.all.menu1.style.display = ‘block’”>
Goodies Tutorials<BR>
</SPAN>
<SPAN ID=”menu1″ onClick=”document.all.menu1.style.display = ‘none’”>
<A HREF=”/tutors/frame1.html”>Frames</A><BR>
<A HREF=”/tutors/tbl.html”>Tables</A><BR>
<A HREF=”/beyond/dhtml.html”>DHTML</A><BR>
<A HREF=”/tutors/forms.html”>Forms</A>
</SPAN>
</TD>
</TABLE>
Here’s the concept:
There are two SPANs inside of one TABLE cell. The first SPAN contains the title and is set so it’s always visible, whether the mouse is over the text or not. Yes, I know that there are onMouseOver and onMouseOut commands in the tag, but those relate to the next SPAN tag coming up. (Note the SPAN tag that deals with the title does not have an ID=”–” attribute so it is not connected with the Style Sheet commands above, thus it will always display.)
But why have the onMouseOver and OnMouseOut in the top SPAN? Because that’s the SPAN that the mouse will pass over to trigger the effect. The SPAN that will appear is hidden. It can’t be passed over. Still with me?
The Event Handlers use this to denote the SPAN that will be affected:
document.all.menu1.style.display
You can pretty much pick out what each items means. It goes largest to smallest starting with “document,” meaning the current document. Then “all” that is contained in the document. Then “menu1,” which is the SPAN that’s hidden. You’ll see the connection in a moment. “Style” deals with the Style of the element and “display” deals with the element’s appearance on the page.
The second SPAN contains all of the links. Note that this SPAN tag contains the ID=”menu1″ attribute that links it to the style block and onMouseOver, above, which tells it not to display. Thus, it’s hidden.
When the mouse passes over the title, the onMouseOver in the first SPAN is brought into play. It says to ‘block’ what the Style Sheet commands are telling the second SPAN to do (hide). Thus, it displays. Notice also that when the mouse leaves the second SPAN, it remains hidden because the onMouseOut is also set to ‘block’ the Style Sheet commands.
The second SPAN does have an Event Handler, though. See the onClick=? That onClick will make the SPANs display ‘none’ when the mouse clicks. That’s why clicking off of the text, but still on the SPAN, closes it.
That’s the basic concept. I simply did it three times in a row in three different table cells. The only difference between the table cells was the text (of course) and I gave each SPAN that will cause a new ID name to appear and disappear. If they all had the same ID name, they would all display when the mouse passed over the first title. That’s why I need menu1, menu2, and menu3 in the Style Sheet commands. I have three different menus in three different SPANs.
0 komentar:
Posting Komentar