Link does not work on this experimental pure CSS show/hide click event

HTML & CSS
1

Hi guys,

I’m experimenting on a pure CSS show/hide button.
With a help from a stranger I got it worked as expected.
Now that’s I got struck that the link won’t get me anywhere when click on a link brought up from a hidden div.

Anyone has an idea how to fix this:

<!DOCTYPE html>
<html><head>
    <meta charset="UTF-8">
    <title>CSS ShowHide</title>
    <style>
    .onclick-menu:before {
        content: "Show/Hide";
        background:none!important;
        border:none;
        padding:0!important;
        font: inherit;
        /*border is optional*/
        border-bottom:1px solid #444;
        cursor: pointer;
    }
    .onclick-menu:focus {
        /* clicking on label should toggle the menu */
        pointer-events: none;
    }
    .onclick-menu:focus .onclick-menu-content {
        visibility: visible;
        /* don't let pointer-events affect descendant elements */
        pointer-events: auto;
    }
	.onclick-menu-content {
        position: absolute;
        z-index: 1;
        visibility: hidden;
    }
    </style>
</head><body>
    <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>
			<div tabindex="0" class="onclick-menu">
				<ul class="onclick-menu-content">
					<li>Content 1</li>
					<li>Content 2</li>
					<li><a href='test.html'>Link</a></li>
				</ul>
			</div>
        </li>
    </ul>
</body></html>

Can you also explain why it doesn’t work.

Thank you,

2

The sub menu being visible relies on the show/hide button having focus, as soon as you click or tab anywhere, focus is lost and it hides.
I tend to use the target pseudo class for css only show/hide nav.

3

Thanks for reply.

I’m not at your level of genius. I’ll try to figure out what are you talking about.

4

I have a working example here
http://www.boatintercoms.co.uk
You will have to squeeze the browser below 600px to see the mobile view and hamburger menu.
This is how it works:-

<a href="#menwrap" title="Open Menu" id="ham" tabindex="1">Hamburger</a>

with:-


#menwrap { display: none; }
#menwrap:target { display: block ; }

Where #menwrap is the container for the menu.

5

Yes you can set the element to be visible when it is hovered which will keep it in view so you can click it.

.onclick-menu-content:hover {
visibility:visible
}

e.g.

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>CSS ShowHide</title>
    <style>
.onclick-menu:before {
	content: "Show/Hide";
	background:none!important;
	border:none;
	padding:0!important;
	font: inherit;
	/*border is optional*/
        border-bottom:1px solid #444;
	cursor: pointer;
}
.onclick-menu:focus {
	/* clicking on label should toggle the menu */
        pointer-events: none;
}
.onclick-menu:focus .onclick-menu-content {
	visibility: visible;
	/* don't let pointer-events affect descendant elements */
        pointer-events: auto;
}
.onclick-menu-content {
	position: absolute;
	z-index: 1;
	visibility: hidden;
}
.onclick-menu-content:hover {
	visibility:visible
}
</style>
    </head>
    <body>
    <ul>
      <li>List 1</li>
      <li>List 2</li>
      <li>
        <div tabindex="0" class="onclick-menu">
          <ul class="onclick-menu-content">
            <li>Content 1</li>
            <li>Content 2</li>
            <li><a href='http://www.google.co.uk'>Link</a></li>
          </ul>
        </div>
      </li>
    </ul>
</body>
</html>

Unfortunately that won’t work on mobile (neither will your focus) so you would be better off with the checkbox or :target hacks methods as Sam suggested above.

6

Thank you for additional information. I’ll work on it and see if I can achieve what I wanted.

7

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