DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Securing Your Software Supply Chain with JFrog and Azure
Register Today

Trending

  • Extending Java APIs: Add Missing Features Without the Hassle
  • Knowing and Valuing Apache Kafka’s ISR (In-Sync Replicas)
  • Superior Stream Processing: Apache Flink's Impact on Data Lakehouse Architecture
  • How To Use Git Cherry-Pick to Apply Selected Commits

Trending

  • Extending Java APIs: Add Missing Features Without the Hassle
  • Knowing and Valuing Apache Kafka’s ISR (In-Sync Replicas)
  • Superior Stream Processing: Apache Flink's Impact on Data Lakehouse Architecture
  • How To Use Git Cherry-Pick to Apply Selected Commits

Links Inside Larger Clickable Areas

Chris Coyier user avatar by
Chris Coyier
·
Jan. 24, 08 · News
Like (0)
Save
Tweet
Share
5.07K Views

Join the DZone community and get the full member experience.

Join For Free
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.
Links

Opinions expressed by DZone contributors are their own.

Trending

  • Extending Java APIs: Add Missing Features Without the Hassle
  • Knowing and Valuing Apache Kafka’s ISR (In-Sync Replicas)
  • Superior Stream Processing: Apache Flink's Impact on Data Lakehouse Architecture
  • How To Use Git Cherry-Pick to Apply Selected Commits

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: