Design, Development, and Consulting » CSS

Big Button CSS Menu Links

Peter — Sun, 30 May 2010 01:08:54 +0000

This post will show you how to make this:

Notice that the entire highlighted area is clickable, not just the lettering.

I’ll describe a simple way to make pure CSS menu links that highlight nicely when hovered over. Now, you can obviously get a lot fancier with Javascript, but a good website design degrades nicely. This means that you should stack as much functionality into the (X)HTML and CSS as you can, and then add extras on with Javascript. This will enable you to read the page nicely through the widest range of media. This is important these days when you don’t know whether your visitors are using a cell phone, iPAD, curl on a UNIX shell, text reader for the vision impaired, or whatever. There are obviously some things Javascript is great for, but there’s no need to kill a fly with an elephant gun. Don’t use it when you don’t have to.

The W3C page has a nice example of elegant page degradation when Javascript is turned off. The menu links on the left hand side of the page, for example the ones under standards, flash dark gray before settling to light gray when hovered over. The flash is Javascript. When you turn Javascript off, notice that the flash is gone, but the links are still highlighted in the same way. You can click anywhere in the Menu box to follow the link, not just over the lettering, and the entire menu box is highlighted in light gray.

Ok let’s build a similar but simpler vertical menu. Horizontal menus are easier to highlight, since the horizontal width of each box can vary without having the menu look unnatural.

Our menu will have three items: Home, Gnome, and Rome. It often makes sense to put your menu items in an unordered list, so we’ll do that, and we’ll set a fixed with for the items. We’ll use a 440 px body width and 220px menu width, just so you can easily see the results as displayed in this blog.

Ok, let’s set up the menu with simple highlighting using “a:hover”.

You can take a look at the menu above on its own page. Here is what that code looks like (remember to use style sheets; I used a style definition in head, so that all the code could be read easily in one go, but unless you like to individually and tediously change CSS rules one at a time for hundreds or thousands of pages, you’d better use external style sheets):

Bad Hover Menu

```
    
```

If you hover over a link, the background changes in color. Yeah, but it’s not very elegant, since the area that’s highlighted has a different shape for each link. Additionally, you have to be pretty precise with you mouse. The list takes up half the colored area, but you have to hover directly over letters in order to follow a link. Let’s deal with the first problem first.

It turns out that :hover is a valid pseudo class for a list item not just a. So if we change the a:hover code to li:hove like this:

```
div#da-body2 ul#da-menu2 li:hover {
```
```
    background-color:#BFB6AF;
```
```
}
```

We’ll see this:

Now we’re getting close. The problem is that you cannot click the entire highlighted area to follow the link. This is because we’re highlighting the li element and not the a element. Ok, well how about:

```
/* THIS WILL NOT WORK!!! */
```
```
div#da-body2 ul#da-menu2 a {
```
```
    width:100%
```
```
}
```
```
div#da-body2 ul#da-menu2 a:hover {
```
```
    background-color:#BFB6AF;
```
```
}
```
```
/* ^^ INCORRECT */
```

Nope, that’ll basically just look like the first example. The problem is that the “a” element cannot have a width attribute. It’s not a block level element. You can’t set it’s width normally.

Don’t you wish we could simply display the anchor element like a block item, in this case like a list item, and then we could set its width. Well, CSS knows about inheritance, and there is a display attribute. We just have to force the “a” or anchor tag to act different than usual using, “display:inherit;”. This means that the “a” tag will inherit whatever display mode its parent element has. In this case it will will inherit the “block” display from the li element. So, our solution is:

```
div#da-body ul#da-menu a {
```
```
    display:inherit;
```
```
    width:100%
```
```
}
```
```
div#da-body ul#da-menu a:hover {
```
```
    background-color:#BFB6AF;
```
```
}
```

This will produce:

Incidentally, “display:block” will work too. To wrap up, here is the full code:

Good Hover Menu:

```
    
```

Incidentally, you can see that I’ve got a few margin:0s and padding:0s thrown in to make things look neater. Instead of dealing with zeroing the margins, paddings, etc. for each item one by one, you can simply use a CSS reset. You can put this at the top of your style sheet, or add it in as a separate style sheet. I didn’t use a CSS reset for this example, since I wanted to keep the code as self contained as possible.

Ok, that’s all the hovering over CSS menus for today.

I Hope Your Inheritance Isn’t An EM

Peter — Sun, 28 Mar 2010 19:55:28 +0000

The web allows users to customize their experience. This can be satisfying for the user and scary for the designer. Designers often have very specific ideas about how their web pages should look. Phrases like, “pixel perfect” come to mind. Well, “pixel perfect” font size is limiting to users who want to be able to control the size of their text.

The idea of using units that are dependent on font size instead of pixel size has been around for a very long time now, yet there are still many designers who don’t use ems. I believe it’s an inherited problem. In other words, setting the font-size to two ems in a parent div will give a different result than setting the font-size to two ems in a child div. This is because the em unit size is inherited through font-size.

Changing the font-size, changes the length of an em, even when it is used in the width or length css properties.

Changing the font-size in a div, means changing the size of an em relative to how big an em is in the parent div. This new em size will apply not only to font-size, but also to width, height, etc.

Let me demonstrate:

Parent Div:

Font Size: 2em

Width: 20em

Height: 20em

(Line Height: 1.2em)

Child Div:

Font Size: 0.5em

Width: 20em

Height: 20em

(Line Height: 1.2em)

Notice that the width, height, and line height values do not change from one div to the other. The only thing that changes is the ems.

The font size of the child div is 0.5 em. This means that the font size is simply 1/2 of whatever the parent’s font size is. The new 1/2 sized em units that are used to calculate the size of the letters are also used to calculate the size of the width, height, and line-height of the child div. This is why all of those are 1/2 the size of their parent div counter parts.

This is just a simple introduction to how working with EMs……. works. You still have to do the math and deal with the defaults of browsers…. and IE. Here is some of the nitty gritty in the form of useful links:

JavaScript EM calculator by Piotr Petrus
How to Size Text in CSS, by Richard Rutter, from A List Apart
Old, slightly broken, but still useful article on the W3C.

Creating Simple Animations With Javascript

Peter — Fri, 16 Oct 2009 04:49:21 +0000

This is a basic JavaScript tutorial. I will describe how to move an element around the page using a simple animation script. The element you move around the page can be anything from an image to a paragraph.

Below is a working example:

Introduction
Starting and stopping the animation using checkButton()
Moving the ball image using animateBall()
References
Conclusion

Introduction

Here is the code that makes the ball move. For the rest of this post, I’ll go over the basic ideas required to put the code together and how the specific code works:

```
    
```

Here’s a jsFiddle for you to play with.

There are two functions in this script, animateBall() and checkButton(). animateBall() is what makes the basketball image move. checkButton() starts and stops the ball. Let’s start by going over checkButton(), since that is the function that is called if the viewer presses the “Animate Basketball” button.

Starting and stopping the animation using checkButton()

Whenever you create an animation, or any sort of constantly running JavaScript, it’s considerate to allow the viewer to stop the script somehow. This is done using the checkButton function. The checkButton function also starts the script running, so it serves a dual purpose.

```
function checkButton()
```
```
{
```

  if (document.getElementById(“ballButton”).value == ”Animate Basketball”)

```
  {    
```

    document.getElementById(“ballButton”).value = ”Stop Basketball”;

```
    animateBall();
```
```
  } else 
```
```
  {
```

    document.getElementById(“ballButton”).value = ”Animate Basketball”;

```
    clearTimeout(timerToggle);
```
```
  }
```
```
}
```

The checkButton function checks what the input button says and does one of two things based upon what the button reads. Looking at the HTML of the INPUT button, you can see that the INPUT button has the ID of “ballButton.” So, we can use document.getElementById(”ballButton”).value to access the words on the button. Accessing HTML elements, their attributes, and inline CSS styles on a web page with Javascript can be done using the Document Object Model (DOM). Here and here are two easy to use references for the DOM.

checkButton() first replaces the words in the button. If the button reads, “Animate Basketball” it writes in “Stop Basketball” instead. We know the button can only read one of two things, so we use the ELSE statement to set the INPUT BUTTON to “Animate Basketball” if it doesn’t already say that. So one of the things the IF, ELSE statement does is toggle the INPUT BUTTON between “Animate Basketball” and “Stop Basketball”

There is a second line after the writing on the button is changed. If the button read “Animate Basketball” then the function animateBall is called. This gets the ball moving.

If the button read “Stop Basketball,” the ELSE statement, then the ball is stopped using clearTimeout. I’ll go over how clearTimeout works later. For now it’s just important to understand that checkButton simply functions as a toggle that does two things whenever it’s called. First, it changes the writing on the INPUT button. Second, it either starts or stops the basketball image moving.

Let’s look at how the basketball image is moved when checkButton() calls the animateBall function.

Moving the ball image using animateBall()

This is the heart of the animation, and what’s startling is how few lines it takes to animate something with JavaScript.

Essentially what we want to do is move the DIV containing the basketball image small steps at a time. This requires two things: physical movement of the DIV and a time increment in which this movement will be done.

```
var distanceBall=0; 
```
```
var directionBall=1; 
```
```
var timerToggle=null; 
```
```
function animateBall() {   
```

    document.getElementById("basketball").style.top=distanceBall + "px";

```
    distanceBall+=directionBall;
```

    if (distanceBall>200) { directionBall=-1; }

    if (0>distanceBall) { directionBall=1; }

    timerToggle=setTimeout(function() { animateBall(); },10);

```
}
```

If you look at the HTML, you’ll see that the basketball image is in a div with the ID “basketball” and the it’s CSS style of postion is set to RELATIVE. It’s important to set the position to RELATIVE, since that means that we can use the TOP or LEFT CSS styles to change the position of the DIV relative to where you see it when the image loads.

```
    
```

There are three variables that the animateBall function uses. The first is distanceBall. distanceBall is how many pixels the TOP CSS property of the DIV with the basketball image in it is set to. So distanceBall will control where the image is displayed. directionBall will control whether the image is moving up or down. We need this so that the image doesn’t wander too far away. Finally the timerToggle variable will allow us to stop the ball from moving. This is done as a courtesy to the viewer.

The first line of the animateBall function adds directionBall to distanceBall. Initially directionBall is 1, so this simply adds 1 to distanceBall.

Next we display the DIV containing the basketball image at this new location. We use the HTML DOM objects to reference the DIV. We know the DIV has an ID of “basketball”. This makes it easy to pick out from all the other elements on the page by writing document.getElementById(“basketball”). Now to specifically target the CSS TOP style we’ll use document.getElementById(“basketball”).style.top. The top property can be read from the browser or it can be written to. In other words we can change it. It’s almost as simple as setting it equal to distanceBall. The only trick part is that TOP has units. We’ll use pixels, so me must concatenate “px” to the end of the number. We do this using the + string operator.

So with just two lines of code we’ve moved the DIV one pixel. The next two lines, the two if statements, check if the DIV is at a TOP greater than 200 or less than 0. If it is, it reverses the direction of movement, so that the ball ends up bouncing up and down 200 pixels. Here is an alternative way to write those two lines as one line (to understand the codes look at this page on JavaScript comparison and logical operators):

if(distanceBall>200 || distanceBall<0){directionBall*=-1;}

Anyway, this all looks great so far, but we’ve only moved the ball one pixel. We have to repeat this movement every few moments. This would be very easy if there was a function to pause a JavaScript program, but there isn’t, and trying to make a custom function to do this can end up with very messy results. There is, however, a way to tell JavaScript to do an action in a set amount of time. It’s like setting an alarm clock. It’s called setTimeout() and here is how it works:

setTimeout( [What to do] , [How long to wait] );

It’s important to realize that when you use setTimeout(), Javascript will keep evaluating the lines below setTimeout immediately. It does not pause. It’s like setting an alarm and keeping right on going, now with the alarm timer ticking in the background.

The way to use setTimeout in our animation function is to use it as the last line, and have it call our animation function itself. Like this:

```
function animateBall() {
```

    [ move ball one increment and show it at its new location ]

    setTimeout( function() { animateBall(); } , 10 );

```
}
```

This will perform the animateBall() function once every 10 milliseconds, since setTimeout measures time in milliseconds. It’s important that animateBall is not a for, while, or do loop, since setTimeout does not pause the execution of the script. Also, not the use of the anonymous function ( function () { … } ) in setTimeout. This is better than putting animateBall() in quotes and using eval().

Now that we have the ball going, how can we make it stop? The way to stop the animation and the ball is to somehow get setTimeout() to stop firing.

You’ll notice that the variable timerToggle is set equal to setTimeout() in the animateBall funciton. This may look confusing, since it’s not immediately apparent what sort of variable timerToggle is. Well, timerToggle simply allows us to keep track of the specific timer we used for the animation, so that we can stop it by using clearTimeout().

To stop a timer we’ll use clearTimeout(). The only thing we have to do is tell the browser which timer we want to stop. Luckily this is what the timerToggle variable is for, so clearTimeout(timerToggle) will stop the ball from moving.

clearTimeout() is not in the animateBall function, it is in the checkButton function. This is because clearTimeout is called if the viewer presses the button while the ball is moving.

Conclusion

Ok, so that’s it. You can animate a DIV on your page using one simple function, and you can stop and start the animation using a second function.

Remember that we are moving the DIV with the image inside. This means we could also put other things in the DIV like a paragraph, form, list, etc.

You should always consider the pros and cons of using animations on your page. As anyone who has sat through a few Power Point presentation knows, it is easy to go overboard with animations (and sound effects, but that’s another matter).

However, if you can link the animation to the content of your page, it may be well worth using it. For example, if you have a site about food, you could style the logo of your page to slide onto the page like a platter of food being served. Again, this can be done elegantly or it can be easily overdone. Additionally animation and interactivity (like the ability to start and stop the animation) is the seed of video games and interactive art.

Finally, you should consider how this simple function can be improved. You might have noticed that I used global variables. This limits the names of other variables that can be used on the same page, which can be especially problematic or confusing in large projects. So, removing the global variables would be ideal. This leads me to a second possible change. Instead of using an inline call to a javascript function in an HTML DIV, I could create an event handler for that DIV. This would allow me to get rid of the global variables too.

Exactly how to do that might be the subject for a later post.

References

Tutorial on JavaScript animation

Javascript operators

Javascript methods

Javascript DOM reference

Basketball Image

Style guides

Peter — Tue, 10 Jun 2008 17:12:21 +0000

One of the difficulties in having a web site designed for you is that you may not know what to look for. A way to get around this is to ask for explanations… in writing.

For example, you may have a web designer come up with a look for your site. Make sure you ask for a written description of this look. This is called a style guide. A style guide may relate to the combination of colors on a site, each page’s layout, the feel of the writing on the site, or all of the previous. The style guide itself may be online, in electronic form, or even a physical booklet. The style guide will not only help you understand the work that is going in to developing your site, it is also a very valuable resource. A style guide allows someone who has never worked on you site before to edit your current pages and add new pages to your site while maintaining the look and feel of the overall website. This guarantees that your site will not only look good the first day it goes live, but that your site will continue to look good after years of edits and updates.