Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Links Inside Larger Clickable Areas

DZone's Guide to

Links Inside Larger Clickable Areas

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Imagine the common scenario of a 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...

[img_assist|nid=446|title=Clickable Areas|desc=|link=none|align=center|width=541|height=182] 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.


Original post here.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}