Is it possible with CSS? Or a little vanilla JS.
[tabindex="1"] {display:inline-block;}
b {cursor:pointer;}
.menu {
position:absolute; visibility:hidden;
display:block; padding:10px; white-space:nowrap;
border:1px solid black; background:pink;
transition:0.35s ease-out;
}
[tabindex="1"]:focus .menu {visibility:visible;}
p:target {background:gold;}<div tabindex="1"><b>☰</b>
<div class="menu">
<a href="#01">link 1</a> some text<br>
some <a href="#02">link 2</a> text
</div>
</div>
<br><br><br><br><br>
<p id="01">Lorem ipsum dolor sit amet, consectetur ..</p>
<p id="02">In lobortis nisl ac nisi tempor pulvinar..</p>what about something like this?
document.querySelector('[tabindex="1"]').addEventListener('click', function(){
document.querySelector('.menu').classList.add('active')
})
do the same when clicking out side and just remove the active class, also change your CSS to be something like this
.menu.active {visibility:visible;}
outside click:
document.addEventListener('click', ({ target }) => {
if (!target.closest('.menu')) {
document.querySelector('.menu').classList.remove('active')
}
})
So far I'm using this solution. With javascript. Works in IE 11.0. If anyone finds a solution with initial conditions, without using javascript, please let me know.
var ddc = document.querySelector(".drop");
var lnk = document.querySelectorAll("[href*='#']");
for (var i = 0; i < lnk.length; i++) {
lnk[i].addEventListener("blur", function () {
ddc.focus();
});
}.drop {display:inline-block; position:relative; outline:none;}
b {cursor:pointer; font-size:18px; display:inline-block; width:20px;}
.menu {
visibility:hidden; opacity:0; position:absolute;
top:120%; padding:10px; white-space:nowrap;
border:1px solid black; background:pink;
transition:0.55s ease-out;
}
.drop:focus .menu {visibility:visible; opacity:1;}
p:target {background:gold;}
b::before, b::after {
position:absolute; top:0; left:0;
line-height:1.0; transition:0.55s ease-out;
}
b::before {content: "\2630";}
b::after {content: "\2715"; visibility:hidden; opacity:0;}
.drop:focus b::before {visibility:hidden; opacity:0; transform:rotateZ(180deg);}
.drop:focus b::after {visibility:visible; opacity:1;}
i {
position:absolute; cursor:pointer;
top:0; right:0; bottom:0; left:0;
z-index:10; opacity:0; display:none;
}
.drop:focus i {display:inline-block;}
.drop i:focus .menu {visibility:hidden; opacity:0;}<div tabindex="1" class="drop">
<i tabindex="1"></i><b></b>
<div class="menu">
<a href="#01">link 1</a> some text<br>
some <a href="#02">link 2</a> text
</div>
</div>
<br><br><br><br><br>
<p id="01">Lorem ipsum dolor sit amet, consectetur ..</p>
<p id="02">In lobortis nisl ac nisi tempor pulvinar..</p>