HOUR 17: Building a Functional Menu
1. With the default.html file open in Split view, create a div with the ID
#mainMenuand place it inside the header. In Code view, create a new
unordered list with three buttons named Home, Gallery, and Contact. Make
each of them a link pointing back to default.html.
2. Create a new style in kippleStyles.css and give it the selector
Set width to 100% so that the box spans the entire width of the header box.
3. Create a new style in kippleStyles.css and give it the selector
li. Under Block, set line-heightto 30px. Under Layout, set displayto
inline. This aligns the buttons on one line.
4. Create a new style in kippleStyles.css and give it the selector
#mainMenu ul li
a. Set colorto #000000, text-align(found under Block) to center, widthto
110px, heightto 35px, and under Layout, set displayto blockand float
5. Create a pseudoclass for
a:hoverand set colorto #FFFFFFand
At this point, you should have a basic three-item menu along the bottom left
side of the #header div, as shown in Figure 17.17. The buttons work, but there
are no backgrounds. Now, you assign separate graphic backgrounds to each of
the three buttons using custom classes.
6. Import the three files, green.png, blue.png, and purple.png, from the lesson
files for this hour and place them in the Graphics folder.
7. In kippleStyles.css, create a new style with the selector
.blue. Set background-
imageto blue.png, background-repeatto no-repeat, and heightto 35px.
8. In the Manage Styles panel, right-click the new
.bluestyle and select New
Style Copy from the pop-up menu. This creates an exact copy of the style.
Rename it .green and change background-image togreen.png. Click OK to
save the new style, and use the exact same technique to create a third style
with the selector .purple.
9. In Code view, find the anchor tag for the first of the three buttons and place
your cursor directly after the letter a. Press the spacebar and type
class=“blue”. This applies the .blue class to the first button.