How to make the HTML link activated by clicking on the
?

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;
}

score 133 · Accepted Answer · answered Jul 13 '09 at 20:08

133

#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.

answered Jul 13 '09 at 20:08

MiffTheFox

21,302
14
69
94

1

This is how I would do it. It expands the link to the size of the
tag.

Austin Hyde

Jul 13 '09 at 20:18

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

– San Jul 13 '09 at 20:18

score 28 · Answer 2 · answered Jul 13 '09 at 20:16

28

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.

answered Jul 13 '09 at 20:16

Eric

95,302
53
242
374

1

can you expand on that? Why is it a bad idea – NuclearPeon Jun 23 '15 at 21:12

score 17 · Answer 3 · answered Jul 05 '13 at 14:03

17

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.

answered Jul 05 '13 at 14:03

Duncan

1,530
15
20

4

_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](https://stackoverflow.com/a/12129304/11700321) - this answer will result in invalid HTML – EGC Feb 04 '20 at 07:44
1

A wild Validator has appeared. :) – Duncan Jul 17 '20 at 11:33

score 13 · Answer 4 · answered Feb 20 '12 at 16:25

13

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>

answered Feb 20 '12 at 16:25

Adam

139
1
2

This one was actually the best for me. I used a `` and set the display to block. Span just seemed more correct that a paragraph. Either way it worked well. – Storm Muller Mar 04 '18 at 09:26

score 10 · Answer 5 · answered Nov 06 '11 at 22:54

10

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

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

answered Nov 06 '11 at 22:54

DejanR

441
4
11

score 2 · Answer 6 · answered Jul 13 '09 at 20:32

2

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%;
}

answered Jul 13 '09 at 20:32

Sinan Ünür

116,958
15
196
339

score 2 · Answer 7 · answered Apr 02 '19 at 06:40

2

Anchor href link apply to li:

#menu li a {
       display:block;
    }

answered Apr 02 '19 at 06:40

Khandoker Hirok

316
1
2
8

score 2 · Answer 8 · edited Aug 13 '20 at 07:50

2

a {
  display: block;
  position: relative;
}

I think that is all you need.

edited Aug 13 '20 at 07:50

Alan Liang

1,087
1
8
21

answered Aug 13 '20 at 04:14

Abaas Skills

81
1
4

score 1 · Answer 9 · answered Jan 16 '14 at 02:14

1

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();
});

answered Jan 16 '14 at 02:14

Mijail

19
1

2

This will trigger a continuous loop. Since clicking on the child->clicks on the parent too. – RockyK Jun 25 '20 at 21:30

score 1 · Answer 10 · answered Aug 30 '14 at 00:01

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

score 1 · Answer 11 · answered Jul 21 '22 at 07:17

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>

score 0 · Answer 12 · answered Jul 13 '09 at 20:09

0

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.

answered Jul 13 '09 at 20:09

Marineio

415
4
10

In my experience, faking links through Javascript almost always results in a poor user experience. – Chuck Jul 13 '09 at 20:19
It is simply one option for him to consider, after all it is his website. And he could keep the normal link there, and it would function as normal even if Javascript were turned off (just not if the li were clicked). – Marineio Jul 13 '09 at 20:38

score 0 · Answer 13 · answered Jul 31 '22 at 17:12

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.

score -1 · Answer 14 · answered Jul 13 '09 at 20:42

-1

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.

answered Jul 13 '09 at 20:42

FelipeAls

21,711
8
54
74

1

This doesn't work for me. When I change the display of the link to "block", it puts itself on a different line than the bullet point. – cartbeforehorse Sep 06 '12 at 22:18
Let me refine that response... The behaviour I explain above occurs in Firefox and Opera, but not in Chrome. It works fine in Chrome. – cartbeforehorse Sep 06 '12 at 22:26
What if you keep display: block on both li and a? Otherwise, please post your problem on a separate question. – FelipeAls Sep 06 '12 at 22:51

score -2 · Answer 15 · answered May 30 '13 at 23:49

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;
        });
    });
});

score -2 · Answer 16 · answered Dec 27 '18 at 22:19

-2

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

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

answered Dec 27 '18 at 22:19

rafaelsimoes85

5
1

3
This is not valid. The only element that may be a child of `
- `. ` ` has to be inside `
- `. http://w3c.github.io/html-reference/ul.html
– Daniel Sixl Dec 27 '18 at 23:58
There is not necessarily a connection between validity and functionality. – Daniel Sixl Jan 29 '19 at 16:55

How to make the HTML link activated by clicking on the
?

16 Answers16

Linked

How to make the HTML link activated by clicking on the ?

16 Answers16

Linked

How to make the HTML link activated by clicking on the
?