Diskuze: Problém s width pri zobrazovaní/skryvaní side menu

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Thomasitho

Člen

Thomasitho:21.7.2020 10:18

Zdravím,

v HTML mám tri elementy CONTAINER, BUTTON, MENU. V JS je event listener, ktorý čaká na klik na BUTTON. Kliknutím na BUTTON sa MENU má buď otvoriť alebo zatvoriť.

Na začiatku element MENU má mať width = 0. Nerozumiem ale tomu, ak v CSS nastavím elementu MENU width na akúkoľvek hodnotu, program nefunguje. Ak width vymažem/zakomentujem všetko funguje.

HTML:

<div class="container">
  <div class="btn"></div>
  <div class="menu"></div>
</div>

SCSS

* {
  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;
  }
}

.show-menu {
  width: 25vw;
}

JavaScript:

const btn = document.querySelector('.btn');
const menu = document.querySelector('.menu');

btn.addEventListener('click', e => {
  if(e.target.closest('.btn')) {
    menu.classList.toggle('show-menu');
  }
});

Zkusil jsem: google, ....

Chci docílit: Bol by som rád ak by mi niekto vedel vysvetliť prečo sa program správa tak ako sa správa alebo čo robím zle.

Odpovědět

21.7.2020 10:18

Thomasitho

Člen

Thomasitho:22.7.2020 7:56

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;
}

Akceptované řešení
+5 Zkušeností

Nahoru Odpovědět

22.7.2020 7:56

Peter Mlich

Člen

Peter Mlich:22.7.2020 9:21

https://jsfiddle.net/25gu98ht/

Komentar v css je /* */
V uvedenem kodu mas tagy prazdne.
Fiddle tomu css a js kodu moc nerozumi, tak jsem to prepsal do stareho js a css a do css doplnil nejake veci. Myslim si, ale, ze ten kod mel fungovat i bez te upravy, cos udelal.

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;}

Nahoru Odpovědět

22.7.2020 9:21

Thomasitho

Člen

Thomasitho:22.7.2020 17:41

Vďaka za odpoveď aj za tvoje riešenia.

áno, máš pravdu použil som komentár // lebo mi to VS Code zobral aj takto
do príkladu som dal čo najmenej kódu, aby bol čo najjednoduchší na študovanie tak som tam nedal ani text (asi som mal)
spúšťal som to u seba v Chrome aj na codepen.io ale nefungovalo mi to. V Chrome devtools som si všimol, že keď som klikol na element BUTTON, bola mu priradená trieda .show-menu ale width ostal pôvodný t.j.0.

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.

Nahoru Odpovědět

22.7.2020 17:41

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.