Expand a-link to whole li-item in categories widget

  • Resolved bananenkopf

    (@bananenkopf)


    6 years, 4 months ago

    Hey,

    I am not that familiar with php.

    Can somebody tell me how to make the whole <li> item of a <a> element in categories widget clickable? So it works like a button: not only the word acts as a link, but the whole cell acts as a link.

    (mobile user friendly)

    • This topic was modified 6 years, 4 months ago by bananenkopf.
Viewing 6 replies - 1 through 6 (of 6 total)

  • Move the <a></a> tags outside of the <li></li> tags

    • This reply was modified 6 years, 4 months ago by Andrew Nevins.
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    ^ I don’t think that would produce a valid list structure:

    
<ul>
 <a href="..">
  <li> .. </li>
 </a>
</ul>
    Thread Starter bananenkopf

    (@bananenkopf)

    Yes, thats exactly what I was going to do, but where is the file/line I have to edit?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @bananenkopf, The more information that is added inside the link, the harder it is for people to know what the link does.

    I recommend leaving the HTML the same as it is now and instead, enhance the click area using JavaScript. If you want help with that, you need to show us your site with the widget.

    Thread Starter bananenkopf

    (@bananenkopf)

    Alright,

    so I didn’t touch the php and solved it with CSS.

    a has to be a display:block; element, now the full line of a is clickable.

    Then I gave a and li the same attributes for width and height.

    (To give it a bit more style i used vertical-align:middle; for display:inline-block element with line-height: ...)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Good work!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Expand a-link to whole li-item in categories widget’ is closed to new replies.