Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akci až 30 % zdarma při nákupu e-learningu - Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

Aktivity
Avatar
Thomasitho
Člen
Avatar
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/zakomen­tujem 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
Avatar
Thomasitho
Člen
Avatar
Odpovídá na Thomasitho
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í
Řešení problému
 
Nahoru Odpovědět
22.7.2020 7:56
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Peter Mlich
Člen
Avatar
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
Avatar
Thomasitho
Člen
Avatar
Odpovídá na Peter Mlich
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 :D
  • 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.