Making anchors within a list clickable including the list item number

HTML & CSS
1

Hello! I’m trying to create a step-indicator component. I want the list numbers to appear, but I also want the entire area to be clickable (no jquery/javascript solutions please, routing is handled using the hash!)

Do I need to manually create the numbers, if I want them to be part of the clickable area?
I tried to set list-style-position to inside. Although, while this helps to make the area of the list item better to design, it still does not help with the anchor.

I found something on StackOverflow, but unfortunately, this does not solve the problem: https://stackoverflow.com/questions/3074454/how-do-i-make-the-whole-area-of-a-list-item-in-my-navigation-bar-clickable-as-a

Thank you in advance!

2

I think the number could be made using a css counter and a ::before pseudo element, so all will be within the <a>.
I’ll have a dig around for an example demo…

3

Here is a fork.

See what I added to the end of the css.

4 Likes
4

Hi there MartinMuzatko,

here is my little attempt, but using “CSS - MORE”…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }
ol {
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #fff;
 }
ol li {
    position: relative;
    width: 25%;
    padding:0.25em 0 0.25em 0.25em;
    border: 0.062em solid #333;
    border-left: 0;
    box-sizing: border-box;
    list-style-position: inside ;
}
ol li:first-of-type {
    border-left: 0.062em  solid #333;
 }
ol a {
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%;
    padding: 0.25em 0.5em 0.25em  2em;
    color: #333;
    text-decoration: none;
 }
ol .active {
    background-color: #333;
	color: #fff;
 }
ol .active a {
    color:#fff; 
}
@media screen and ( max-width: 27em ) {
ol {
    display: block;
 }

ol li {
    width: 100%; 
    padding-left: 0.25em;
    border: 0.062em  solid #333;
    border-bottom: 0;
 }
ol li:last-of-type {
    border-bottom: 0.062em  solid #333;
 }
</style>
</head>
<body> 
 <ol>
  <li class="active"><a href="#general">General</a></li>
  <li><a href="#budget">Budget</a></li>
  <li><a href="#roles">Roles</a></li>
  <li><a href="#content">Content</a></li>
 </ol>
</body>
</html>
Edit:

The code has been amended to allow the list number to be part of the link. :winky:

coothead

1 Like
5

Thank you a lot Sam :slight_smile:
I tried to achieve this with as less code as possible (and I thought that there would be a way without replicating the numbered list behavior).
I prefer this solution a lot more than cootheads, since it does not rely on any absolute positioning and goes with the natural flow of the document.

Thank you for the effort though :slight_smile:

Best,
Martin

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.