Chowające się menu boczne [CSS]

Question

Witam,

Stworzyłem sobie menu boczne, które po kliknięciu przycisku rozsuwa się. Po głębszym zastanowieniu chciałbym, aby efekt był odwrotny, lecz moim sposobem nie wypali. Mianowicie, wszystko opiera się o element :focus nałożonym na przycisk. Tutaj jest efekt uzyskany przeze mnie:

https://jsfiddle.net/6s6vssnu/1/

Dla wprawionego oka wiadome będzie, że "odwrócenie" tego wszystkiego używając dalej tylko focusa, będzie bardzo niepraktyczne, gdyż przy klikaniu w inny element strony chat będzie się zawsze aktywował. Ma ktoś z was jakieś pomysły ? Bardzo zależy mi na wykorzystaniu samego CSS'a nie używając przy tym JS.

Pozdrawiam serdecznie.

 

 

Answer 1

Możesz wykorzystać do tego checkboxa z labelem.

Tu masz przykład responsywnej nawigacji z użytym checkboxem, codepen

Comments

Użycie checboxa, nie jest takie złe - przetestuje! Mimo wszystko czekam na dalsze propozycje rozwiązań

---

Dla ludzi zainteresowanych umieszczam link do działającego "chowającego się" panelu menu. W okrojonej lekko wersji : https://codepen.io/anon/pen/PQwVGw?editors=1100

---

Użycie checboxa, nie jest takie złe - przetestuje! Mimo wszystko czekam na dalsze propozycje rozwiązań  

Nie jest to najlepsze rozwiązanie. Samą animacje możesz zrobić w CSS, ale logika jest po stronie JS i jest on niezbędny do takich rzeczy.