I have the following markup,
<ul> <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;
}14 Answers
#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.
5As Marineio said, you could use the onclick attribute of the <li> to change location.href, through javascript:
<li onclick="location.href='"> ... </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.
Just to throw this option out there:
<ul> <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.
2Just 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>This will make whole <li> object as a link :
<li onclick="location.href='page.html';">...</li>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%;
}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();
});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
Anchor href link apply to li:
#menu li a { display:block; }a { display: block; position: relative;
}I think that is all you need.
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.
2How 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.
3Use 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; }); });
}); I found a easy solution: make the tag " li "be inside the tag " a ":
<a href="#"><li>Something1</li></a>
