Links Inside of Larger Clickable Areas

By: Chris Coyier on January 24th, 2008 — Posted in: Quick Tip / Trick

Imagine the common scenario of a large header containing a horizontal menu. You want the entire header area to be clickable as a “home” button, but obviously you need your menu items to be clickable as well.

Let’s write the HTML for this in this super-standard way:

<ul id="header">
   <li><a href="#">Menu Item</a></li>
   <li><a href="#">Menu Item</a></li>
   <li><a href="#">Menu Item</a></li>
   <li><a href="#">Menu Item</a></li>
</ul>

Because the Unordered List has a unique ID and is by nature a block-level element, we can stretch it to whatever shape we need and apply a background-image to make our header.

ul#header {
   height: 238px;
   width: 780px;
   background: url(images/header.jpg) no-repeat;
   list-style-type: none;
}

In order to push our menu items down to the bottom of the menu, it’s safer to apply top margin to the list items than to apply padding to the unordered list (stupid IE box model thing).

ul#header li a {
   display: block;
   margin-top: 168px;
   width: 130px;
   height: 40px;
   background-color: red;
   color: white;
}

The trick to making the whole header click-able, is with a simple Javascript addition to the list element.

<ul id="header" onclick="location.href='index.php';" style="cursor: pointer;">
   ...
</ul>

The bit about location is obviously what makes it link and inline styling there is to make sure the cursor changes into a pointer so that users know it’s a link. That could be moved into the CSS as well…

There you have it. Pretty straightforward trick but I thought I’d share it since I find myself doing this all the time and it’s a very nice semantic solution to the header/menu thing.

UPDATE: Jerry Nummi posted a comment with an example he worked up with a CSS-ONLY solution for this same problem. Thanks Jerry!

Theoretically Related Articles:

Responses

1

inline js is fugly :p

Comment by atom — January 24, 2008 @ 5:57 pm
2

its nice that your using the same UL to style the header image this saves some markup. but personally i am never in-favor of inline javascript. never the less its gr8 work.

i have built something that somehow has the same look and feel but different functionality.
http://www.some1ne.com/d/bigHover/bigHover.htm
the tabs can be easily made clickable.

Comment by Fouad Masoud — January 26, 2008 @ 4:17 am
3

I’m reading this blog since the first days of 2008 and until now I enjoyed this. Hopefully, i believe I’ll enjoy this in the future too.. this it’s my first comment, and I wanna tell to the writter of this article that these informations really helped me. i’ve also implemented this in my blog. I was looking for quite a while after this solution.

Comment by A.Faith — January 27, 2008 @ 5:29 am
4

nice.

I was trying to help. sorry if I was aggressive or something.

Comment by camilo vitorino da costa — January 27, 2008 @ 3:43 pm
5

Nice. Interesting technique.

Does it validate? Fully? XHTML Strict?

Comment by Jaime J Aleman — January 27, 2008 @ 10:20 pm
6

Nice tip. Thanks

Comment by Navdeep — January 28, 2008 @ 10:19 am
7

Apart from the obvious inline javascript, I think its a great idea!
I wonder if there is any other ways to do this???

Comment by Jermayn Parker — January 28, 2008 @ 5:17 pm
8

I whipped up a CSS only solution. There were a couple issues with IE so I had use a hack.

http://nummi.org/large_clickable.html

Comment by Jerry Nummi — January 30, 2008 @ 8:31 pm
9

Nice work Jerry! That is really thinking. Much nicer solution, really. That absolute positioning stuff can get a little tricky, especially when it’s part of a larger layout, but I’m sure it can be worked around.

I am going to update the article to point to your example.

Comment by Chris Coyier — January 30, 2008 @ 9:26 pm