Substitution

With the widespread support of the CSS2 hover pseudo-class, you can create low-impact rollover effects without JavaScript. There are two general approaches:

  • CSS2 image rollovers These use transparent GIFs and colored backgrounds to cut in half the number of images required.

  • Pure CSS2 rollovers These use a text-only approach that entirely eliminates the need for images.

Either way, by using CSS to create a rollover effect, you save costly HTTP requests and code.

CSS2 Image Rollovers

CSS2 image rollovers use transparent GIFs and the hover pseudo-class to change the background behind the image on rollover. You get the same effect as conventional rollovers, without the extra images and JavaScript. Stuart Robinson of Designmeme.com demonstrates using this technique to improve Zeldman.com's toolbar (see Figure 8.1).

Figure 8.1. Designmeme.com's CSS2 image rollovers.
graphics/08fig01.gif

All you need are some images with aliased transparent cutouts and a couple lines of CSS:

 .zeldman a { display:block; width:100px; background-color: #000000;}  .zeldman a:hover { background-color: #CCFF00} 

The simplified HTML code looks like this:

 <div class="zeldman">  <table border="0" cellpadding="0" cellspacing="0">       <tr>              <td bgcolor="#000000"><a href=http://www.zeldman.com/glamorous/>                    <img name="glam" src="glam.gif" width="100"                    height="16" border="0"                    alt="MY GLAMOROUS LIFE: Tragicomic fodder from the life of Zeldman." / graphics/ccc.gif ></a></td> ... 

This ingenious method changes the background color of the link behind the image on rollover. Because the text within the images is transparent, the background color shines through. You could optimize this further by using the shorthand background property and shorthand hex colors, but you get the idea. This low-impact technique gracefully degrades for older browsers and requires no JavaScript.

For More Information

For more information on CSS2 graphic rollovers, see the following sites:

  • http://www.alistapart.com/stories/rollovers/

  • http://www.designmeme.com/zeldman/

Pure CSS2 Rollovers

You can go one step further and use CSS2 to eliminate entirely the need for images. Pure CSS2 rollovers use styled links for both the foreground and background menu items. Authors have discovered creative ways to turn links into rollovers. Some authors create 3D buttons that change on rollover. Some morph their links into block-level elements. Some go the other way and turn lists into inline elements. Whichever way you choose, they all use the hover pseudo-class to create pure text rollovers that gracefully degrade.

Simple Text Rollovers

The simplest way to add a rollover effect to your links is to use the hover pseudo-class as it was originally intended. Create your links as normal, but add a hover background color:

 a:hover{background:#fd3} 

Technically, this technique would affect all anchorsnot just the linksto display the hover effect. A more specific way to style hovers on links is the following:

 a:link:hover{background:#fd3}  a:visited:hover{background:#fd3} 

These rules change the background color behind links to yellow when users hover over them. To make sure that your background doesn't make your text disappear, you also can set the foreground color when specifying the background color:

 a:link:hover{background:#fd3;color:#00f}  a:visited:hover{background:#fd3;color:#00f} 

Putting all the link pseudo-classes together gives you the following:

 a:link            { color: #00f }   /* unvisited links - blue */  a:visited         { color: #609 }   /* visited links   - purple */ a:link:hover      { color: #fd3 }   /* user hovers     - yellow */ a:visited:hover   { color: #fd3 }   /* user hovers     - yellow */ a:link:active     { color: red }    /* active links */ a:visited:active  { color: red }    /* active links */ 

You can achieve a reverse effect by flipping the background and foreground colors on rollover:

 a:link            { color: #00f; background:#fc0 }  a:visited         { color: #609 } a:link:hover      { color: #fc0; background:#00f } a:visited:hover   { color: #fc0; background:#00f } a:link:active     { color: red }    /* active links */ a:visited:active  { color: red } 
Chained by Pseudo-Classes

Internet Explorer for Windows can have some trouble with chained pseudo-classes. It seems that IE4, 5, and even 6 can ignore all but the last pseudo-class when you string them together, at least as long as an element identifier is involved. Fortunately in this case, when you set the a:link:hover and a:visited:hover to the same style, this isn't a problem, because IE effectively resolves them both down to a:hover . The same goes for :active . IE may behave unpredictably, however, when you want to style chained pseudo-classes differently, or when you want to style one and not the other. Most authors don't bother with this level of specificity and use the simpler a:hover selector or a contextual selector. For more information, see http://www.meyerweb.com/eric/css/tests/css2/sec05-10.htm.

Vertical CSS2 Menus

At Webreference.com, we created a demonstration of vertical CSS2 rollovers that gracefully degrade for Netscape 4 (http://www. webreference .com/new/rollovers). They look nearly identical on Netscape 4, but without the rollover effect. On browsers that do support the hover pseudo-classOpera 3.5, IE4+, Netscape 6+ (Mozilla)they roll over. After extensive testing, we've arrived at a solution that works for all the browsers we tested , using the link tag for style sheets. Figure 8.2 shows the result, and Listing 8.3 shows the CSS.

Figure 8.2. Pure CSS2 vertical rollovers.
graphics/08fig02.gif
Listing 8.3 CSS2 Vertical Rollovers: CSS
 body {background:#fff;} h4 {margin:0;padding:0.3em;text-align:center;} div.menu {       width:125px;       background:#fff;       padding:0;       margin:1em;       border:1px solid #000; } div.menu a {       display:block;       margin:0;       width:100%;       padding:0.3em;       font-weight:bold;       border-top:1px solid #000;       color:#00f;       text-decoration:none; } html>body div.menu a {width:auto;} div.menu a:hover {background:#000;color:#fff;} 

Note that in order to get the rollovers to work for the entire width of the menu, we used the "Tantek hack" (www. tantek .com) to reset non-IE6 browsers to auto for the link width:

 html>body div.menu a {width:auto;} 

Authors who want to avoid this hack can just use width:auto; for the block-level links and omit the hack. IE6 will then rollover only on the links. All the other CSS2-aware browsers will rollover on the entire box, and the link will be active.

The menu code in Listing 8.4 looks like garden-variety HTML with some breaks thrown in to make the links behave for older browsers. Outside the links, the <br> 's tend to leave vertical gaps. Another option that allows you to avoid the gaps is to put them outside the links and style them to not display for CSS-aware browsers:

 div.menu br {display:none;} 
Listing 8.4 CSS2 Vertical Rollovers: HTML
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Pure CSS2 Rollovers</title> <link rel="stylesheet" href="vertical.css" type="text/css"> </head> <body> <div class="menu"> <h4>Menu Title</h4> <a href="/products/">Products <br></a> <a href="/services/">Services <br></a> <a href="/about/">About <br></a> <a href="/contact/">Contact <br></a> </div> </body> </html> 

To make the top menu item live, you can change the header into a styled link like the other menu items:

 <div class="menu">  <a href="/home/">Home <br></a> <a href="/products/">Products <br></a> 

The problem is that you'll get a double border above the top menu item, because the outer div and home link both have top borders (see Figure 8.3).

Figure 8.3. Pure CSS2 vertical rolloversseeing double.
graphics/08fig03.gif

To get rid of this extra border, simply eliminate it for the top of the surrounding div , like this (see the result in Figure 8.4):

 div.menu {        width:125px;       background:#fff;       padding:0;       margin:1em;       border:1px solid #000;       border-top:0px; /* eliminate the double line */ } 
Figure 8.4. Pure CSS2 vertical rolloversback to normal.
graphics/08fig04.gif

If you add problematic CSS2 commands, for Netscape 4 safety you can optionally use the @import directive to read in the external style sheet. This demonstration was designed for a black and white book, although normally I don't recommend using black links. Even in menus, users expect the default of blue for links or at least something easily discerned from the text color.

Real-World Examples of CSS2 Rollovers

Designers are substituting these lightweight menus for old-style JavaScript/graphics rollovers. Let's look at some real-world examples of CSS2 rollovers. First up, Designmeme.com.

Designmeme.com

Stuart Robinson, webmaster at University of Guelph in Canada, uses both types of CSS2 rollovers at his own site, which is shown in Figure 8.5. On the left of his home page, he uses transparent GIFs and the hover pseudo-class to create JavaScript-free image rollovers. On the right, he uses pure CSS2 rollovers to create an interactive vertical menu bar without images.

Figure 8.5. Designmeme.com.
graphics/08fig05.gif

Stuart is a pioneer who has been using CSS image rollovers since May 2001.

Eric Meyer's CSS Edge

Eric Meyer, author of Cascading Style Sheets: The Definitive Guide (O'Reilly, 2000) and Eric Meyer on CSS (New Riders, 2002), demonstrates many of the CSS techniques he discusses in his books and then some. His CSS Edge site is a proving ground for valid, standards-based CSS techniques that work in modern browsers (see Figure 8.6).

Figure 8.6. Eric Meyer's CSS Edge.
graphics/08fig06.gif

Horizontal CSS2 Rollovers

You can use a similar technique without the display:block trick to create horizontal CSS2 rollovers. Mike Hall has a nice demonstration of horizontal menu bars using pure CSS2 rollovers at BrainJar.com (see Figure 8.7). Mike adds a 3D look to his menu buttons by using an offset and "light-sourced" border colors.

Figure 8.7. Mike Hall's BrainJar.
graphics/08fig07.gif

He's taken it one step further by adding hierarchical drop-down menus using hidden div s and a dash of JavaScript. These menus work on Netscape 6 and IE5.5, but not on IE5 Mac or Opera (see Figure 8.8).

Figure 8.8. Brainjar.com's DOM-based hierarchical menus.
graphics/08fig08.gif

Thanks to Kwon Ekstrom and with Mike's permission, we "reverse engineered" the 3D menus to distill them down to the essentials. First, the HTML:

 <div class="menubar" width="100%">  <a class="button active" href="/">Home</a> <a class="button" href="/products/">Products</a> <a class="button" href="/services/">Services</a> <a class="button" href="/contact/">Contact</a> </div> ... 

The only thing unusual here is the extra "active" class . The optimized style sheet in Listing 8.5 sets up the nav bar and gives the active button a depressed look.

Listing 8.5 3D CSS2 Horizontal Menus
 body {       background:#fff;       color:#000; } div.menubar, div.menubar a:button {       font: bold .9em arial,helvetica,sans-serif;       text-decoration: none;       color: blue; } div.menubar {       background: #fd0;       padding: 4px 2px;       border: 2px solid;       border-color: #ff9 #777 #777 #ff9;       text-align: left; /* for ie when centering */ } div.menubar a.button {       background: transparent;       border: 1px solid #fd0;       cursor: default;       left: 0px;       top: 0px;       margin: 1px;       padding: 1px 4px;       position: relative;       z-index: 100; } div.menubar a.button:hover {       background: transparent;       border-color: #ff9 #993 #993 #ff9;       color: blue; } div.menubar a.active, div.menuBar a.active:hover {       background: #777;       border-color: #333 #ff9 #ff9 #333;       color: #fff;       left: 1px;       top: 1px; } 

The key rules are the a.button rule and the corresponding hover styles. The button is defined with the same background color (transparent) as the surrounding div , so it blends into the nav bar. By setting a relative position for each button, you can offset and shade it to simulate a depressed look (see Figure 8.9). The a.button:hover style changes all four of the border colors to simulate a raised 3D look. On the active page (home, in this case), the active hover style moves the button 1 pixel down and to the right, flipping the border colors and darkening the background. For more details, see Hall's "Revenge of the Menu Bar" tutorial at Brainjar.com.

Figure 8.9. CSS2 menu bar.
graphics/08fig09.gif

Dynamic CSS2 Menu Bar

You can combine this 3D interactive button idea with conditional SSI to create a dynamic CSS2-based menu bar. Begin by abstracting both the menu bar HTML code and the corresponding CSS (see Listing 8.6).

Listing 8.6 CSS2 Menu Bar HTML Template
 <html> <head><title>CSS Menu Bar Demo</title> <style type="text/css"> <!-- @import "/css/menubar.css"; --> </style> </head> <body> <!--#include virtual="/css/menubar2.html" --> </body> </html> 

This allows you to include the menu bar site-wide and sets things up so that updates require that you edit only two files. Note that you're including an HTML file, not a text file. By setting a flag in your server configuration file (see Chapter 17, "Server-Side Techniques"), you can include conditional SSI in any included HTML files (see Listing 8.7).

Listing 8.7 Conditional Menu Bar SSI
 <!--#if expr="(${DOCUMENT_URI} = /^\/products\/.*/)" --> <div class="menubar" width="100%"> <a class="button" href="/">Home</a> <a class="button active" href="/products/">Products</a> <a class="button" href="/services/">Services</a> <a class="button" href="/contact/">Contact</a> </div> <!--#elif expr="(${DOCUMENT_URI} = /^\/services\/.*/)" --> <div class="menubar" width="100%"> <a class="button" href="/">Home</a> <a class="button" href="/products/">Products</a> <a class="button active" href="/services/">Services</a> <a class="button" href="/contact/">Contact</a> </div> <!--#elif expr="(${DOCUMENT_URI} = /^\/contact\/.*/)" --> <div class="menubar" width="100%"> <a class="button" href="/">Home</a> <a class="button" href="/products/">Products</a> <a class="button" href="/services/">Services</a> <a class="button active" href="/contact/">Contact</a> </div> <!--#elif expr="((${DOCUMENT_URI} = /^\/$/)  (${DOCUMENT_URI} = /^\/index\.html/))" --> <div class="menubar" width="100%"> <a class="button active" href="/">Home</a> <a class="button" href="/products/">Products</a> <a class="button" href="/services/">Services</a> <a class="button" href="/contact/">Contact</a> </div> <!--#else --> <div class="menubar" width="100%"> <a class="button" href="/">Home</a> <a class="button" href="/products/">Products</a> <a class="button" href="/services/">Services</a> <a class="button" href="/contact/">Contact</a> </div> <!--#endif --> 

Now the rollover menu bar changes which button is active depending on where you are in the site's hierarchy. With the Listing 8.5 style sheet, all you have to change is the location of the "active" class in your HTML. For example, when you go to the "contact" directory, the Listing 8.7 conditional SSI looks at the current URL and finds a match for this statement:

 <!--#if expr="(${DOCUMENT_URI} = /^\/contact\/.*/)" --> 

This expression matches any URL beginning with /contact/ , such as /contact/staff.html (see Figure 8.10).

Figure 8.10. Dynamic CSS2 menu bar.
graphics/08fig10.gif

You could do this class assignment with JavaScript, but this method works with JavaScript turned off.

List-Based Menus

Christopher Schmitt, founder of BabbleList.com, is reportedly the first to publish the trick of using display:inline on list elements to get a horizontal rollover menu bar effect. See Figure 8.11 for an example.

Figure 8.11. Christopher Schmitt's CSSBook.com inline list menus.
graphics/08fig11.gif

The difference between this method and the previous one is that you're using inline list elements to separate the menu items, not straight links. The advantage to this method is that the entire box is active, because the entire box is the link. Any padding around the links creates space around the text. You don't have to resort to block element links with this method. Here's the HTML:

 <div id="nav"><p>Navigation:</p><ul><li><a href="/ankle">Ankle</a></li><li><a  href="/boat">Boat</a></li><li><a href="/cupcake">Cupcake</a></li><li><a href="/double">Double</a></li><li><a href="/eatery">Eatery</a></li></ul></div> 

Pretty straightforward; a "nav" div surrounding an unordered list, without spaces. Next, you style the list display to be inline , rather than the default, list-item :

 #nav li {        padding: 0;       margin: 0;       display: inline; /* turns li from block to inline element */       font-size: 0.9em;       font-family: Verdana, Arial, Helvetica, sans-serif; } 

Now add in some padding for the links and a hover effect as before:

 #nav li a {        display: inline;       padding: 7px;       margin: 0;       color: #333;       background-color: #ccc;       font-size: 0.9em;       font-family: Verdana, Arial, Helvetica, sans-serif;       text-decoration: none; } #nav li a:hover {       color: #fff;       background-color: #666;       font-size: 0.9em;       font-family: Verdana, Arial, Helvetica, sans-serif;       text-decoration: none; } 

Note that you could optimize this code using shorthand properties and eliminate some redundancy. Listing 8.8 shows the final optimized style sheet.

Listing 8.8 Optimized Inline List Menus
 #nav {       position:absolute;       top: 12px;       left: 12px;       color: #fff;       background: transparent;       font: 0.9em verdana, arial, helvetica, sans-serif; } #nav ul, ul {       margin: 0;       padding: 0; } #nav li {       padding: 0;       margin: 0;       display: inline;       font: 0.9em verdana, arial, helvetica, sans-serif; } #nav li a {       display: inline;       padding: 7px;       margin: 0;       color: #333;       background: #ccc;       font: 0.9em verdana, arial, helvetica, sans-serif;       text-decoration: none; } #nav li a:hover {       color: #fff;       background: #666; } #nav li a:active {       color: #ccc;       background: #333; } 
For More Information

You can learn more about inline list menus at Christopher Schmitt's CSSBook.com site, or in his book Designing CSS Web Pages (New Riders, 2002). See also Dave Lindquist's list-based DHTML menus for drop-down and expandable menus in under 6K at http://www.gazingus.org/dhtml/?id=109.

 



Speed Up Your Site[c] Web Site Optimization
Speed Up Your Site[c] Web Site Optimization
ISBN: 596515081
EAN: N/A
Year: 2005
Pages: 135

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net