Suwak nie działa.

Question

https://codepen.io/anon/pen/pwLEWr

Mam problem z suwakiem. Nie mogę przeglądać zawartości strony.Proszę o pomoc

Answer 1

Usuń

overflow: hidden;

z body. Ustawianie tej właściwości na tym elemencie to tylko załatanie problemu a nie jego rozwiązanie.

Comments

Strona nie wygląda dobrze. Podsyłam screena.

---

Cały problem jest z tym , że te menu nie znika tylko poszerza stronę jak przesunę dolny suwak w prawo.

---

Ukryj je poprzez nadanie display: none.

Dodatkowo, wyrzuć klasę over

Zainteresuj się również właściwością box-sizing - niektóre elementy mają 100% szerokości + ustalony padding, co powoduje, że element jest większy niż 100% szerokości rodzica.

---

Możesz mi jeszcze powiedzieć gdzie dokładnie to wpisać i tak dalej??

---

display:none dodajesz do elementu z klasą side-menu. W JS będzie sobie toglować wyświetlanie tego elementu.

box-sizing z wartością border-box(sprawia ona, że padding jest wliczany w szerokość elementu)  można dodać do wszystkich elementów.

---

po wyrzuceniu klasy over i nadaniu display:none; menu teraz nie rozwija się , jak klinkam nic się nie dzieje

---

Nie wiem dlaczego , menu się teraz nie rozwija.

---

Pokaż kod JS do wyświetlania tego menu.

---

JS czyli ??

---

JavaScript

---

Nie robiłem tego na JS , robiłem jako css , nie umiem jeszcze.

---

mogę ci podesłać kod w css

---

Jak masz jakiś dobry sposób na zrobienie takiego menu to podeślij mi plik z JS , bo nie umiem jeszcze w nim robić :/

---

.side-menu-trigger:focus ~ .side-menu, .side-menu:hover {
  transform: translateX(-300px); 
}

Dodaj tutaj jeszcze display: block -  animacja zniknie,  jakoś inaczej będzie trzeba to rozwiązać.

---

Tak , animacja znika , masz na to jakieś rozwiązanie ??

---

Jeszcze menu pojawia się pod zdjęciem , a tak nie chcę

---

Jakieś pomysły?

---

kombinuj z właściwościami visibility, overflow i width.

---

a gdzie kombinować , w których miejscach ?

---

No na tym elemencie, który chcesz animować.

---

Jeśli zrobie animacje po najechaniu będzie to samo ?? Czy da się w jakimś innym miejscu wpisać animacje ?

---

po najechaniu na co?

---

Po najechaniu na ikonkę czy da się , żeby pojawiło się z jakimiś animacjami

---

Wyżej napisałem Ci jakich właściwości masz użyć (visibility zamiast display)

---

No właśnie nic nie działa , mogę to zrobić w jakiś inny sposób , podobne menu ??

---

Naprawdę jeden znak zapytania wystarczy. https://css-tricks.com/snippets/css/toggle-visibility-when-hiding-elements/ , http://www.greywyvern.com/?post=337 szukaj, kombinuj.

---

To jest z użyciem JS prawda ??

---

Możesz to sobie zmodyfikować, aby działało przy hoverze czy fokusie, ale JS przy rozwijanych menu i tak wskazany bo trzeba zmieniać stan.