Simple CSS: How To Make Clickable Areas Bigger

Apr 20 2005

One basic principle of interaction design is that the larger the link you’re trying to click on, the easier it is to click it. With this in mind, if you are using text-based links (for example in a navigation bar), the actual ‘clickable’ area should be as large as possible.

Look at this example of a simple navigation bar, and try clicking on the links:

This demonstrates the default behaviour of hypertext anchor tags – the user has to move the mouse over the text to activate the link.

Now here’s a more usable example of the same navigation bar:

Notice that now the entire navigation item has become clickable! The user experience is greatly improved by this simple change – plus the site becomes easier to use for those with movement difficulties, who may have trouble clicking on a relatively small target such as a single word.

How Is It Done?

First let’s create our simple unstyled navigation, using an unordered list:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Now we add some CSS to turn it into a horizontal navigation bar:

ul {
  list-style-type: none;
  overflow: auto;
  padding: 0;
  margin: 0;
}
ul li {
  float: left;
  border: 1px solid #333;
  border-bottom: none;
  margin: 0 5px;
}
ul li a {
  text-decoration: none;
}
ul li a:hover {
  text-decoration: underline;
}

Without any margins or padding, the navigation items are squeezed into their containing boxes. We can use padding on the <li> elements (or margins on the <a> elements) to make some breathing room, but unfortunately the text remains the only clickable area.

Enter the magic ingredient:

ul li a {
  display: block;
  text-decoration: none;
}

By setting the display property of the <a> tag to “block”, the link expands to fill the entire area of its container. Now we can use padding on the <a> tag to set the size of the clickable area:

ul li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
}

And here is our final navigation bar, complete with big, easy to click tabs:

Internet Explorer and the Holly Hack

What’s that you say? It’s not working? You must be part of the 85% or so of internet users that are using Internet Explorer; unfortunately, IE has a bit of a blind spot where floated elements are used – specifically, it requires a width to be provided for a floated element. But we don’t want to give our list items a width! Never fear, another IE bug means that we can specify a tiny width and the <li> will expand to contain the contents:

 * html ul li a {
width: 1%;
}

The ”* html” part is a CSS hack to only allow IE browsers to ‘see’ the rule (the opposite hack to exclude IE browsers would be “html > body”).

Now we have a final working cross-browser compatible navigation bar:

More Examples

Now that the entire tab area is filled by the <a> tag, we can also use the :hover pseudo-element to create additional effects, such as colour changes and image rollovers – here are a couple more examples:

Filed under: CSS.

Digg this article

Bookmark this article with del.icio.us

Previously: Rather heady company

Next: How to stop Textpattern and Textile formatting


Comments

Rob Mientjes
3437 days ago
Neat and clear. One tip for those of you who want to use fixed widths/heights (yes, even em counts as fixed here) on the LIs, make sure you also apply those same widths to the anchors, otherwise there are browsers that will make a mess of it.

Overall it’s good. I won’t be talking about Fitts’s Law (I’ve done that before on my weblog; search for it if ya like) here, but large clickable areas are a must. A true must. Period.
#1
Schultzy
3433 days ago
Had this on my site for ages.
Never has worked with IE though..
One thing if the links are vertical they have to be height:1%: rather than width.
Thanks for the help on getting mine on IE.
#2
Ilya
3317 days ago
Except the links (or their list element containers) don’t appear at all in Opera.
#3
Matthew Pennell
3317 days ago
All looks okay to me, Ilya – which version of Opera are you using (I’m on 8)?
#4