Having a menu system is a common feature for all web sites.
For your new HTML5 web site there is no reason why you, too, cannot have a cool menu system. The current navigation uses just text, but with a little more effort we can create an elegant CSS solution. The screenshot in Figure 2.13Proj shows what the new menu will look like.
The new menu is now more graphically pleasing and comes with submenus that can link to different web sites. Believe it or not, this menu is not created with JavaScript or Flash. It is all CSS.
There are three main elements to this menu:
• HTML content
• Images to create the button effects
• Lots of CSS
Let’s start by looking at the HTML. The current menu looks as follows.
<navigation id=“NavigationLink” style=“” class=
“navigationStyle”>
<a href=“default.html”>Home</a>|<a href=“products/
products.html”>Products</a>|<a href=“news/news.
html”>News</a>|<a href=“contactUs.html”>Contact Us</a>
</navigation>
You cannot add submenus to this structure. To add submenus you need to control how the content is listed on the page.
Fortunately, HTML has the LIST element that allows you to Figure 2.13Proj A 100% CSS
menu system.
easily indent lists. Using CSS you will see how to show and hide top- and second-level list elements (Figure 2.14Proj). Your new HTML will look like the following.
<navigation id=“NavigationLink” style=“” class=
“navigationStyle”>
<li><a href=“products/ideas.html”>Submit An Idea</a></li> amount of CSS. To keep your design workspace clutter free let’s go ahead and create a second CSS file. The great thing with HTML is that you can have multiple CSS files in a single web page.
Add the file “menu.css” to the CSS folder. Open “default.html”
and add the following link below your current “style.css” link:
<link href=“css/menu.css” rel=“stylesheet” type=“text/css”>
The next step is to create the images you will need in your menu. Figure 2.15Proj shows a screenshot of the images and an explanation for each image is as follows (see also Figure 2.16Proj):
1. center.png—center background image
2. center_hassub.png—center background image when you roll cursor over it
3. left.png—left background image
Figure 2.14Proj The new menu will start as a list with sublists.
116
ProjeCT 2: APPLying CSS3 To your Web DeSign4. left_hassub.png—left background image when you roll cursor over it with a subimage
5. left_nosub.png—left background image when you roll cursor over it with no subimage
6. right.png—right background image
7. right_hassub.png—right background image when you roll cursor over it with a subimage
8. right_nosub.png—right background image when you roll cursor over it with no subimage
9. dropdown.png—gray background when dropdown menu appears
10. sub_active.png—background image for submenu options 11. sub_hover.png—highlighted background when cursor hovers
over a submenu
Up to this point you have the HTML and images needed to create your menu. The final step is to add the CSS. Looking at the HTML above you will see that there are four main CSS class references defined. Each reference refers to an HTML LIST on the page.
• The SECTION element has the class reference “menu.”
• The first LIST ITEM has the class reference “left_nosub.”
• The last LIST ITEM has the reference “right_nosub.”
• The middle LIST ITEMs have the reference “center_hassub.”
These references are used in the CSS file “menu.css” to create your design.
1. Open up “menu.css” and start adding CSS to build out the menu. Begin by adding the reference to an embedded font.
@font-face {
font-family: ‘SansationRegular’;
src: url(‘fonts/Sansation_Regular.eot’);
src: local(‘Sansation’), local(‘Sansation’), url(‘fonts/Sansation_Regular.woff’) format(‘woff’), url(‘fonts/Sansation_Regular.ttf’) format(‘truetype’), url(‘fonts/Sansation_Regular.svg#Sansation’) format(‘svg’);
}
2. The first class you need to define is the menu class. This forms the basis for all of your definitions. The default is to apply the font-family SansationRegular with the font size of 11 points.
The outline of the menu has a zero margin, and is positioned relative to the placement of the SECTION elements on the page with a z-index of 1000. The z-index is important, as it forces the submenu items to be in front of any content on the screen.
Figure 2.15Proj Here is the collection of Png files you need in your menu.
Figure 2.16Proj Here is how the Png files are used in the menu structure.
.menu {
3. The next step is to add the default style that will apply to all elements—in this case the UNORDERED, LIST ITEM, and ANCHOR elements. You will see a default font color (#f0f0f0) is applied to all text items and all text is now centered. The “cen-ter.png” image is now being used as the background image to all items (you will see how to override this in a moment) and all items have a default width and height. It is important to add the width and height properties, otherwise the width and height are defined by the text elements. Forcing a width and height allows you to create a buttonlike effect.
.menu ul li a {
4. Because you are using CSS you can override elements. The fol-lowing CSS adds custom left and right end caps to the menu. At this point you can choose to up the ante by using the rounded corners and gradients colors now supported in CSS. However, to illustrate how PNG files can also be used, we will use images.
118
ProjeCT 2: APPLying CSS3 To your Web DeSign5. The next step is to add the default presentation for UL elements that are contained within the menu class. Controlling elements within classes is one of the strengths of CSS.
.menu ul { over a link. The top-level navigation elements change the color of the text and the background image as you move the cursor over them. The following CSS does this for you.
.menu ul li:hover a { color: #000;
background: url(‘../images/black/center_
hassub.png’);
}
.menu ul li:hover ul li a.center_hassub { background: #6a3;
color: #000;
}
.menu ul li:hover ul li:hover a.center_hassub { background: #6fc;
7. The background image for the far-left and far-right buttons will also be swapped out with the following.
.menu ul li:hover .left_nosub { color: #000;
background: url(‘../images/black/left_nosub.png’);
}
.menu ul li:hover .right_hassub { color: #000;
background: url(‘../images/black/right_hassub.png’);
}
.menu ul li:hover .right_nosub { color: #000;
background: url(‘../images/black/right_nosub.png’);
}
8. This menu structure is exciting because you can add submenus. The following CSS controls how the submenus appear on the screen. You will see a display property is forc-ing the objects in the submenu to flow down in a block format and formats each object into a fixed area. As with the main heading items, forcing the area of the item gives you the illu-sion of a button effect.
.menu ul li:hover ul li a {
.menu ul li:hover ul { margin: 0 0 0 3px;
10. As you move the cursor over each item in the submenu, the but-ton effect changes to a different background. This is achieved with a PNG file called “sub_hover.” The following CSS applies the hover effect.
.menu ul li:hover ul li a:hover { color: #000 !important;
background-image: url(‘../images/black/sub_
hover.png’);
}
.menu ul li:hover ul li:hover ul { display: block;
position: absolute;
left: 105px;
top: 0;
}
.menu ul li:hover ul li:hover ul.left { left: -105px;
}
120
ProjeCT 2: APPLying CSS3 To your Web DeSign11. The final CSS definition changes the background image as you click on the item selected.
.menu ul li:hover ul .sub_active {
background-image: url(‘../images/black/sub_
active.png’);
margin-right: 1px;
}
12. At this point you will want to save “menu.css” and preview your page.
You now have a 100% CSS menu structure. Again, you will see there is no JavaScript here.