Diskuze: Problém s width pri zobrazovaní/skryvaní side menu
Zobrazeno 4 zpráv z 4.
//= Settings::TRACKING_CODE_B ?> //= Settings::TRACKING_CODE ?>
Chybu som urobil v tom, že v CSS som použil zlý selector: .show-menu. Je treba použiť tento selector: .menu.show-menu. Teraz to už funguje tak ako má.
Pripájam opravený SCSS súbor:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
background-color: yellow;
width: 100vw;
height: 100vh;
.btn {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 100px;
height: 100px;
background-color: red;
}
.menu {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 0;
height: 100vh;
background-color: blue;
}
}
.menu.show-menu {
width: 25vw;
}
https://jsfiddle.net/25gu98ht/
https://jsfiddle.net/25gu98ht/1/
https://jsfiddle.net/25gu98ht/2/
Podle mne, hlavni problem je, zes to nemel v container. Co je v container
prebiji class bez toho.
.container .menu prebiji .show-menu
.container .menu neprebiji .container .show-menu
.container .menu neprebiji .show-menu {display:block !important;}
Vďaka za odpoveď aj za tvoje riešenia.
Keď som si na stackoverflow prechádzal vlákna, ktoré sa týkali transition effektu a metódy toggle() tak mi došlo či nemám chybu v selektore.
Máš pravdu, problém by sa vyriešil aj vtedy keby som to v CSS vložil do .container.
Zobrazeno 4 zpráv z 4.