CODEWITHSUNDEEP
htmlcssanchor
Curyous
Curyous

Reputation: 8866

How do I make the whole area of a list item in my navigation bar, clickable as a link?

I've got a horizontal navigation bar made from an unordered list, and each list item has a lot of padding to make it look nice, but the only area that works as a link is the text itself. How can I enable the user to click anywhere in the list item to active the link?

#nav {
  background-color: #181818;
  margin: 0px;
  overflow: hidden;
}

#nav img {
  float: left;
  padding: 5px 10px;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: bottom;
}

#nav ul {
  list-style-type: none;
  margin: 0px;
  background-color: #181818;
  float: left;
}

#nav li {
  display: block;
  float: left;
  padding: 25px 10px;
}

#nav li:hover {
  background-color: #785442;
}

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}
<div id="nav">
  <img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
  <ul>
    <li><a href="#">One1</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>
<div>
  <h2>Heading</h2>
</div>

Upvotes: 105

Views: 98093

Answers (11)

greaterKing
greaterKing

Reputation: 317

If you have some constraint where you need to keep <li> structure as is and would like your a tag to take up the full area within the li element you can do the following:

a {
    display: flex !important;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    justify-content: center;
    align-items: center;
}

Upvotes: 0

user11077805
user11077805

Reputation:

here is how I did it

Make the <a> inline-block and remove the padding from your <li>

Then you can play with the width and the height of the <a> in the <li>

Put the width to 100% as a start and see how it works

PS:- Get the help of Chrome Developer Tools when changing the height and width

Upvotes: 0

vabi
vabi

Reputation: 1

Just simply apply the below css :

<style>
  #nav ul li {
    display: inline;
  }

  #nav ul li a {
    background: #fff;// custom background
    padding: 5px 10px;
  }
</style>

Upvotes: 0

Spudious
Spudious

Reputation: 39

Put the list item within the hyperlink instead of the other way round.

For example with your code:

<a href="#"><li>One</li></a>

Upvotes: -2

Sabby62
Sabby62

Reputation: 1717

Use following:

a {
  display: list-item;
  list-style-type: none;
}

Upvotes: 11

danvitoriano
danvitoriano

Reputation: 1431

You should use this CSS property and value into your li:

pointer-events:all;

So, you can handle the link with jQuery or JavaScript, or use an a tag, but all other tag elements inside the li should have the CSS property: 

pointer-events:none;

Upvotes: 1

crisis.sheep
crisis.sheep

Reputation: 399

Super, super late to this party, but anyway: you can also style the anchor as a flex item. This is particularly useful for dynamically sized/arranged list items.

a {
  /* This flexbox code stretches the link's clickable 
   * area to fit its parent block. */
  display:        flex;
  flex-grow:      1;
  flex-shrink:    1;
  justify-content: center;
}

(Caveat: flexboxes are obvs still not well supported. Autoprefixer to the rescue!)

Upvotes: 13

Kieran
Kieran

Reputation: 87

Or you could use jQuery:

$("li").click(function(){
   window.location=$(this).find("a").attr("href"); 
   return false;
});

Upvotes: 7

suren
suren

Reputation: 481

Define your anchor tag css property as: 

{display:block}

Then the anchor will occupy the entire list area, so your click will work in the empty space next to your list.

Upvotes: 48

Stussa
Stussa

Reputation: 3415

Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.

Upvotes: 121

Aaron Butacov
Aaron Butacov

Reputation: 34397

Make the anchor tag contain the padding rather than the li. This way, it will take up all the area.

Upvotes: 13

Related Questions