¿Es posible con CSS? O un poco de vainilla 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>¿Qué tal algo como esto?
document.querySelector('[tabindex="1"]').addEventListener('click', function(){ document.querySelector('.menu').classList.add('active') })haga lo mismo al hacer clic en el lado y simplemente elimine la clase activa, también cambie su CSS para que sea algo como esto
.menu.active {visibility:visible;}clic exterior:
document.addEventListener('click', ({ target }) => { if (!target.closest('.menu')) { document.querySelector('.menu').classList.remove('active') } })Hasta ahora estoy usando esta solución. Con javascript. Funciona en Internet Explorer 11.0. Si alguien encuentra una solución con condiciones iniciales, sin usar javascript, hágamelo saber.
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>