How to make list items clickable?

How to make list items clickable?

by Mister Fox » Fri Feb 17, 2012 11:40 pm

How can a make the entire list item clickable? Currently, you have to click on the text in the list item to follow the link. How can I make it so you can click on the entire list item? Thanks

Re: How to make list items clickable?

by atik » Sat Feb 18, 2012 2:20 am

How can a make the entire list item clickable? Currently, you have to click on the text in the list item to follow the link. How can I make it so you can click on the entire list item? Thanks

Making a list with clickable items are very easy and i guess you already know the parts of it, just need to glue them together. First make your list of choice (whether it is ordered or unordered list) and then for the list items you want a clickable link, just make them hyper link with anchor tag. check the below example -

Code: Select all

<ul>
    <li><a href="http://www.google.com">Google</a></li>
    <li><a href="http://www.yahoo.com">Yahoo</a></li>
</ul>


Let me know if that helps and if you know any further help.

Re: How to make list items clickable?

by Mister Fox » Fri Feb 24, 2012 10:30 am

I'm talking about on my site: www.viddir.com, I want to make the whole box clickable in the categories box to the left, rather than have to click on the text.

Re: How to make list items clickable?

by XainPro » Tue Mar 06, 2012 7:36 am

if you want to make all make click-able you can use anchor tag on above of all li tags or ul tags.

Code: Select all

<a href="http://www.google.com">
<ul>
    <li>Google</li>
    <li>Yahoo</li>
</ul>
</a>

Re: How to make list items clickable?

by MattPils » Tue Aug 28, 2012 1:00 pm

I lost this forum topic for a second, then rediscovered it. I was searching for something alot more high level but thought I would stick my oar in here.

You need to take the code above (shown below):

<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
</ul>

and define the following css for your a tags eg:

ul li a {
display:block;
}

This will do what you need. The last solution suggested above will not work as this will make your entire list link to one place, which I imagine is not what you want.

Display: block works fine.

Re: How to make list items clickable?

by XainPro » Wed Aug 29, 2012 5:05 am

but MattPils your solution is surely make the box click able but it will drive user no where..
click on link will work only not the whole box...