How to make the HTML link activated by clicking on the <li>?

Question

I have the following markup,

<ul id="menu">              
    <li><a href="#">Something1</a></li>
    <li><a href="#">Something2</a></li>
    <li><a href="#">Something3</a></li>
    <li><a href="#">Something4</a></li>
</ul>

The <li> is a bit big, with a small image on its left, I have to actually click on the <a> to activate the link. How can I make a click on the <li> activate the link?

Edit1:

ul#menu li
{
    display:block;
    list-style: none;
    background: #e8eef4 url(images/arrow.png) 2% 50% no-repeat;
    border: 1px solid #b2b2b2;
    padding: 0;
    margin-top: 5px;
}

ul#menu li a
{

    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    padding-right:.5em;
    color: #696969;
}

Gayden

Answer 1

#menu li { padding: 0px; }
#menu li a { margin: 0px; display: block; width: 100%; height: 100%; }

It may need some tweaking for IE6, but that's about how you do it.

Hatter

This is how I would do it. It expands the link to the size of the <li> tag. – Dostie

Its working, but the text(link) is sticking to the right border, when I gave a padding-right: .5em the <a> is going out of <li> – Gayden

Keep tweaking and you'll get it looking perfect. Check for negative margins and padding, something probably isn't adding up and its collapsing. Also, make sure you don't have an errant text-align: right; stuck in there. – Curtsey

I gave the text(link) a right padding by actually giving the the <li> a padding-right:0.5em and having the <li> and <a> having the same background color. But now that .5em right part of <li >is not click able, but that's fine. – Gayden

San: Fixed that problem by intelligently placing the padding on the link itself: li { padding-top: .3em; padding-bottom: .3em; a { display: block; margin: 0px; padding-left: 10%; width: 90%; height: 100%; } } – Ivon

Answer 2

As Marineio said, you could use the onclick attribute of the <li> to change location.href, through javascript:

<li onclick="location.href='http://example';"> ... </li>

Alternatively, you could remove any margins or padding in the <li>, and add a large padding to the left side of the <a> to avoid text going over the bullet.

Cranwell

can you expand on that? Why is it a bad idea – Enchantment

Answer 3

Just to throw this option out there:

<ul id="menu">
    <a href="#"><li>Something1</li></a>
    <a href="#"><li>Something2</li></a>
    <a href="#"><li>Something3</li></a>
    <a href="#"><li>Something4</li></a>
</ul>

This is the style I use in my menus, it makes the list item itself a hyperlink (similar to how one would make an image a link).
For styling, I usually apply something like this:

nav ul a {
    color: inherit;
    text-decoration: none;
}

I can then apply whatever styling to the <li> that I wish.

Note: Validators will complain about this method, but if you're like me and do not base your life around them, this should work just fine.

Lithographer

The children (direct descendants) of a ul element must all be li elements. This is a purely syntactic requirement. as per correct semantics for ul in ul - this answer will result in invalid HTML – Reginareginald

A wild Validator has appeared. :) – Lithographer

Answer 4

Just add wrap the link text in a 'p' tag or something similar and add margin and padding to that element, this way it wont affect the settings that MiffTheFox gave you, i.e.

<li> <a href="#"> <p>Link Text </p> </a> </li>

Falcate

This one was actually the best for me. I used a <span> and set the display to block. Span just seemed more correct that a paragraph. Either way it worked well. – Friendly

Answer 5

This will make whole <li> object as a link :

<li onclick="location.href='page.html';"  style="cursor:pointer;">...</li>

Jeffreys

Answer 6

The following seems to work:

ul#menu li a {
    color:#696969;
    display:block;
    font-weight:bold;
    line-height:2.8;
    text-decoration:none;
    width:100%;
}

Siena

Answer 7

Anchor href link apply to li:

#menu li a {
       display:block;
    }

Alexia

Answer 8

a {
  display: block;
  position: relative;
}

I think that is all you need.

Craner

Answer 9

jqyery this is another version with jquery a little less shorter. assuming that the <a> element is inside de <li> element

$(li).click(function(){
    $(this).children().click();
});

Iverson

This will trigger a continuous loop. Since clicking on the child->clicks on the parent too. – Cassareep

Answer 10

Or you can create an empty link at the end of your <li>:

<a href="link"></a>

.menu li{position:relative;padding:0;}
.link{
     bottom: 0;
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
}

This will create a full clickable <li> and keep your formatting on your real link. It could be useful for <div> tag as well

Scalf

Answer 11

try:

ul#menu li a {
    color:#696969;
    display:block;
    font-weight:bold;
    line-height:2.8;
    text-decoration:none;
    width:100%;
}

<ul id="menu">              
    <li><a href="#">Something1</a></li>
    <li><a href="#">Something2</a></li>
    <li><a href="#">Something3</a></li>
    <li><a href="#">Something4</a></li>
</ul>

Inquisitionist

Answer 12

You could try an "onclick" event inside the LI tag, and change the "location.href" as in javascript.

You could also try placing the li tags within the a tags, however this is probably not valid HTML.

Zeeland

In my experience, faking links through Javascript almost always results in a poor user experience. – Willumsen

It is simply one option for him to consider, after all it is his website. And he could keep the normal <a> link there, and it would function as normal even if Javascript were turned off (just not if the li were clicked). – Zeeland

Answer 13

Ignacio Pascual provided this code, which work like a charm. I would like to enhance it with a smooth scroll.

$(document).ready(function(){
    $("li > a").each(function(index, value) {
        var link = $(this).attr("href");
        $(this).parent().bind("click", function() {
            location.href = link;
        });
    });
}); 

I tried to add a smooth scrolling, by using part of this code both separately or by inserting it :

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

But I never got thought it :(

I think there is a trick because smooth scroll event work on a element and with the hack of the li element making it linkable it's not really an a element.

Benildis

Answer 14

How about this one? This working in <ul> block:
  <li class="valid nav-item"><a href="http://www.google.com">Click for Search</a></li>

I copied from the post of Valid <li> Link by user "ryanr".

Submicroscopic

Answer 15

In order to fix this for accessibility issues where I had <a> nested inside <li role="tab"> I legitimately had to remove the <ul> and <li> from the equation. My tabs are now <a role="tab"> nested directly in a <div role="tablist"> which is wild to me, but the roles on those elements seem to be doing the job.

Kyl

Answer 16

ul#menu li a {
    color:#696969;
    display:block;
    font-weight:bold;
    line-height:2.8;
    text-decoration:none;
    width:100%;
}

<ul id="menu">              
    <li><a href="#">Something1</a></li>
    <li><a href="#">Something2</a></li>
    <li><a href="#">Something3</a></li>
    <li><a href="#">Something4</a></li>
</ul>

Columbite

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Poly

Answer 17

How to make the HTML link activated by clicking on the <li> ?

By making your link as big as your li: just move the instruction

display: block;

from li to a and you are done.

That is:

#menu li
{
    /* no more display:block; on list item */

    list-style: none;
    background: #e8eef4 url(arrow.gif) 2% 50% no-repeat;
    border: 1px solid #b2b2b2;
    padding: 0;
    margin-top: 5px;
}

#menu li a
{
    display:block; /* moved to link */
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    padding-right:.5em;
    color: #696969;
}

Side note: you can remove "ul" from your two selectors: #menu is a sufficient indication except if you need to give weight to these two rules in order to override other instructions.

Anacrusis

This doesn't work for me. When I change the display of the <a> link to "block", it puts itself on a different line than the bullet point. – Yoong

Let me refine that response... The behaviour I explain above occurs in Firefox and Opera, but not in Chrome. It works fine in Chrome. – Yoong

What if you keep display: block on both li and a? Otherwise, please post your problem on a separate question. – Anacrusis

Answer 18

Use jQuery so you don't have to write inline javascript on <li> element:

$(document).ready(function(){
    $("li > a").each(function(index, value) {
        var link = $(this).attr("href");
        $(this).parent().bind("click", function() {
            location.href = link;
        });
    });
}); 

Pilkington

Answer 19

I found a easy solution: make the tag " li "be inside the tag " a ":

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

Darill

This is not valid. The only element that may be a child of <ul> is <li> . <a> has to be inside <li> . w3c.github.io/html-reference/ul.html – Bulimia

There is not necessarily a connection between validity and functionality. – Bulimia