Meeting 6
Behavior
6.1 Homework Discussion
Mike: The homework was quite a challenge, but unfortunately we didn ’t succeed in
finishing it. Here’s w hat we did.
If you hover the mouse cursor over a menu item, the item changes to dark g ray and its
text to white.
Professor: Nice job! I can’t wait to see the code! Show me how you managed to line
up the items horizontally.
Maria: After a lo t of thought, we were surprised to find out how little effort it took
to com plete the task. We remembered the example from o ur last meeting where we
arrange d two blocks in a line by simply floating them. We used the same tr ic k here
and applied it to the list items:
#top-navigation li {
float: left;
}
This alread y placed the links horizontally but the list collapsed an d items were not
101
contained in the list any more. What’s more, the paragraph , which we added for
orientation—and made it float as well—was p ut to the right of the m enu instead of
below it.
So we floated the unordered list as we ll to make it grow vertically and embrace all its
floated children. We also made the list 100 percent wide in order to occupy the whole
width of the docu ment, which forced the paragraph following th e menu to move under
it. We also removed the annoying bullets by setting list-style to none:
#top-navigation ul {
float: left;
width: 100%;
list-style: none;
}
Professor: That’s it! How did you fine-tune the design?
Mike: First we took care of the list. We figured out that the items were moved to the
right becau se of the extra left padding that lists use in order to indent their items. So
we set the padding-left property to ze ro. We added some vertical margin s as well:
#top-navigation ul {
float: left;
width: 100%;
list-style: none;
padding-left: 0;
margin: .4em 0;
}
We also floated the header a nd specified its bottom border:
header {
float: left;
width: 100%;
border-bottom: 1px solid black;
}
Next, we designed the links within the navigation menu. I don’t think this needs any
commen ts:
#top-navigation a {
background-color: #DEF;
color: black;
text-decoration: none;
font-variant: small-caps;
padding: 0 10px;
border: 1px solid black;
border-radius: 5px;
102 Meeting 6. Behavior
margin-right: 3px;
}
At the end we added the hovering effect. A menu item and its text change color
whenever you hover the mouse cursor over it because of the next code fragment:
#top-navigation a:hover {
color: white;
background-color: blue;
}
Professor: Well done! Wha t about the sub-menu?
Maria: We tried it but weren’t successful.
Professor: Please, show me what you have.
Maria: All right. We switched off floating of the inner list’s items in order to stack
them vertically :
#top-navigation li li {
float: none;
}
Then we set the inner list’s top margin to zero in order to re move sp acing be tween the
sub-menu and the “More” item:
#top-navigation li ul {
margin-top: 0;
}
We also managed to hide the sub-menu by setting its d isplay to none:
#top-navigation li ul {
margin-top: 0;
display: none;
}
And that was about it. From then on, we were left without any clue on how to proceed.
Professor: You won’t believe how close to the solution you were. All there’s left to
do is to select a list item over whic h the mouse pointer is hovering and change the
display property of the unordered list within it back to block:
6.1. Homework Discussion 103
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.