Desplegar cajones sin JavaScript
This commit is contained in:
parent
86f317d91f
commit
9966f80c27
1 changed files with 35 additions and 0 deletions
35
_sass/toggler.scss
Normal file
35
_sass/toggler.scss
Normal file
|
@ -0,0 +1,35 @@
|
|||
/*
|
||||
* Desplegar menúes sin javascript!
|
||||
*
|
||||
* Inspirado en https://dev.to/cydstumpel/creating-a-fold-out-navigation-with-css-only-4g9k
|
||||
*/
|
||||
|
||||
// Comenzamos con un input checkbox con la clase toggler
|
||||
input[type="checkbox"].toggler {
|
||||
// Lo ocultamos pero todavía queremos que se le pueda dar foco con el
|
||||
// teclado
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
|
||||
// Ocultamos el elemento colapsable
|
||||
& ~ .collapse {
|
||||
z-index: 10;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Al tildar el input, mostramos el elemento
|
||||
&:checked ~ .collapse {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
& + label {
|
||||
border: none;
|
||||
outline: none;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
// Dar una guía visual de que estamos enfocando el input
|
||||
&:focus + label {
|
||||
outline: 1px dotted grey ;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue