25

So I'm trying to make each list-item on my site clickable but I'm not sure what is the best way to do it. Please help me out.

So here is the relevant HTML:

<ul>
    <li>Backpack <a href="#" title="Buy on Amazon" target="_blank"><img src="img/basket.png" height="16" width="16" alt="Buy" class="buy" onClick="pageTracker._trackEvent('Amazon', 'School Supplies', 'Backpack');"/></a></li>
    <!-- More List Items -->
</ul>

And here is the relevant CSS:

.content ul li {
    display:block;
    list-style:none;
    padding:5px 10px 5px 15px;
}

.content li li {
    // This is for when there are sub-categories.
    border-bottom: none;
    border-top: 1px solid #f8d9d0;
    margin: 3px -10px -3px -15px;
    padding: 5px 0px 5px 30px;
}

.buy {
    float: right;
    margin-top: -2px;
}

// The next ones all deal with the shopping cart icon that appears only on hovers.

.listblock ul li img { 
    visibility: hidden;
}

.listblock ul li:hover img { 
    visibility: visible;
}

.listblock ul li ul li img { 
    visibility: hidden !important;
    margin-right: 10px;
}

.listblock ul li ul li:hover img { 
    visibility: visible !important;
    margin-right: 10px;
}

How can I make the whole list-item clickable and still have the shopping cart icon and Google Analytics Event tracking still work? Is there some jQuery magic I can use?

I've tried using display:block for the Amazon links, but that seems to mess up the image placement.

Thank you so much!

Improve this question
1

8 Answers 8

Reset to default
26

I think you could use the following HTML and CSS combo instead: 

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

Then use CSS background for the basket visibility on hover:

.listblock ul li a {
    padding: 5px 30px 5px 10px;
    display: block;
}

.listblock ul li a:hover {
    background: transparent url('../img/basket.png') no-repeat 3px 170px;
}

Simples!

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

That looks like it will do the trick. Do you know if there's anyway to automate this in Dreamweaver or Coda? I have 150+ list-items. If you're not sure, don't worry about it though.
If you have that many items you should really be using some sever side generation like Ruby on Rails or Django.
22

The li element supports an onclick event.

<ul>
<li onclick="location.href = 'http://stackoverflow.com/questions/3486110/make-a-list-item-clickable-html-css';">Make A List Item Clickable</li>
</ul>
Improve this answer

1 Comment

MDN discourages the use of event handlers in HTML (such as onclick=). This approach could lead less maintainable code. developer.mozilla.org/en-US/docs/Web/HTML/…
16

The key is to give the anchor links a display property of "block" and a width property of 100%.

Making list-items clickable (example):

HTML:

<ul>
    <li><a href="">link1</a></li>
    <li><a href="">link2</a></li>
    <li><a href="">link3</a></li>
</ul>

CSS:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul li a {
  display: block;
  width: 100%;
  text-decoration: none;
  padding: 5px;
}
ul li a:hover {
  background-color: #ccc;
}
Improve this answer

2 Comments

this helped me, thanks!
This won't work for list-style-position: inside since you'll have a line break after the bullet
9

Here is a working solution - https://codepen.io/dragoeco/pen/YMJYqW (edit: dead link http://jsfiddle.net/STTaf/)

I used simple jQuery:

$(function() {
    $('li').css('cursor', 'pointer')

    .click(function() {
        window.location = $('a', this).attr('href');
        return false;
    });
});
Improve this answer

1 Comment

Perfect solution for me, thanks. The demo link seems down so I made this codepen : codepen.io/dragoeco/pen/YMJYqW
5

HTML and CSS only.

#leftsideMenu ul li {
  border-bottom: 1px dashed lightgray;
  background-color: cadetblue;
}

#leftsideMenu ul li a {
  padding: 8px 20px 8px 20px;
  color: white;
  display: block;
}

#leftsideMenu ul li a:hover {
  background-color: lightgreen;
  transition: 0.5s;
  padding-left: 30px;
  padding-right: 10px;
}
<div id="leftsideMenu">
  <ul style="list-style-type:none">
    <li><a href="#">India</a></li>
    <li><a href="#">USA</a></li>
    <li><a href="#">Russia</a></li>
    <li><a href="#">China</a></li>
    <li><a href="#">Afganistan</a></li>
    <li><a href="#">Landon</a></li>
    <li><a href="#">Scotland</a></li>
    <li><a href="#">Ireland</a></li>
  </ul>
</div>

Improve this answer

2 Comments

Very bad answer, I've improved it. I will remove the -1 if you correct your "answer".
I've already corrected it with the edit. You could correct it yourself and I undo my -1.
4

Ditch the <a href="...">. Put the onclick (all lowercase) handler on the <li> tag itself.

Improve this answer

Comments

2

How about putting all content inside link?

<li><a href="#" onClick="..." ... >Backpack <img ... /></a></li>

Seems like the most natural thing to try.

Improve this answer

Comments

2

I'm sure it is a late response, but maybe is useful for somebody else. You can put all your <li> element content into <a> tag and add the following css:

li a { 
    display: block; 
    /* and you can use padding for additional space if needs, as a clickable area / or other styling */ 
    padding: 5px 20px; 
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.