[css] mobile

[frikifrik]

Hej, chodzi o widok w mobile.

po klinieciu w menu zmieniam w JS z display none na display block diva ktory ma absolute oraz 100% wysokosc i szerokosc i wszystko fajnie dziala ale jak przesune palcem po tym divie to przesuwa mi sie strona pod tym divem. przesuwa w osi Y. jak zamkne menu to np mam strone w polowie albo w innym miejscu. czy da sie to jakos zablokowac?

[jimmi]

Może spróbuj dodać jeszcze jednego diva do menu...

Sent from my HTC U11 using Tapatalk

[frikifrik]

dodalem menu do sprobuj ale nie dziala div

 

 

https://www.w3schools.com/code/tryit.asp?filename=GJXNSBEEYVRR

 

jak klikniemy w hamburgera to wyswietla sie div z zielonym tłem i chodzi o to zeby zablokowac mozliwosc przewijania strony kiedy ten div z zielonym tlem jest widoczny?

[Mion]

Zobacz ja to powinno być zrobione w Google. Przykładów są niezliczone ilości.

[frikifrik]

Mion szukałem ale pewnie źle zadaje pytanie, złych fraz szukam. podpowiesz czy to overflow-x: hidden; dobry kierunek?

[Mion]

Może "responsive menu hamburger"

 

https://codepen.io/mutedblues/pen/MmPNPG

https://medium.com/level-up-web/20-responsive-navigation-solutions-examples-codes-21644390afeb

 

[frikifrik]

@Mion tylko ze jak zmodyfikujesz w ten sposob kod to po rozwienieciu menu nadal mozna przesunac zawartościa w pionie ktore menu przykrywa a mi wlasnie chodzi o to zeby zablokowac mozliwosc przesuwania strony jezeli na wierzchu jest menu

 

 

<header class="header">
  <a href="" class="logo">CSS Nav</a>
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
  <ul class="menu">
    <li><a href="#work">Our Work</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#careers">Careers</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</header>
<div style="background: #000; height: 500px; width: 500px; color: #fff;"><br><br><br><br><br>test1
<br><br><br><br><br>test2
<br><br><br><br><br>test3
<br><br><br><br><br>test4
<br><br><br><br><br>test5
<br><br><br><br><br>test6
<br><br><br><br><br>test7
<br><br><br><br><br>test8
<br><br><br><br><br>test9</div>

 

 

[Mion]

Godzinę temu, frikifrik napisał:

tylko ze jak zmodyfikujesz w ten sposob

Ja nie wiem jak Ty modyfikujesz... Zobacz jak to rozwiązują inni, to nie jest tajemna wiedza.

Za pozycjonowanie elementu odpowiadają w CSS takie parametr jak position ktroy może między innymi mieć wartości fixed oraz sticky

 

https://developer.mozilla.org/en-US/docs/Web/CSS/position