• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Menu rozwijane/schowane poza ekranem!

VPS Starter Arubacloud
0 głosów
311 wizyt
pytanie zadane 26 maja 2018 w HTML i CSS przez robiczQ Nowicjusz (190 p.)

Witam, chciałbym zrobić na swojej stronie element, który będzie polegał mniej więcej na kategoriach stojących obok siebie, i chowających się poza ekranem.

Przykładowo, mamy diva o wymiarach 500px szerokości i 40px wysokości.

w divie znajdują się nazwy kategorii: podróż, jedzenie, poezja itp; 

kategorii było by np: 10; każda z nich zajmuje 100px szerokości i ma odstęp od następnej 10px. (ustawione są od lewej do prawej)

te kategorie które by się nie zmieściły były by "schowane" poza ekranem.

a przesuwając kategorie palcem/kursorem odsłaniały by się kolejne.

moje pytanie brzmi, jak to zrobić? :D

 

BARDZOO poglądowy rysunek

Kolorem zielonym zaznaczyłem widzialny dla użytkownika div

a na czerwono to co było by schowane 

przesuwając kategorie nr 1 schował by się za lewą krawędzią pózniej drugi itd.

granicą "przesuwania" byłby moment w którym prawa krawędź numeru 8 dotknęła by prawej krawędzi zielonego diva.

1 odpowiedź

+1 głos
odpowiedź 26 maja 2018 przez BT101 Stary wyjadacz (12,540 p.)
Jeden div z szerokością 100% i overflow: hidden.

W nim kolejny z szerkością tyle ile masz elementów * te przykładowe 100px.

Na tym etapie będziesz miał pudełko na 100% szerokości stronki a w nim te divy które bedą wyjeżdżały za strone jednocześnie nie powodując pojawienia się paska na dole strony do scrolla poziomego.

Teraz pytanie jak chcesz je przesuwać, na tym etapie na mobile będzie można już przesunąć całość palcem ale na desktopie nie będzie możliwości przesunięcia w ogóle. Jeśli chcesz żeby na desktopie pod tym divem pokazał się pasek to zmień overflow na auto i użyj media queries żeby zmienić overflow na hidden na mobile.
komentarz 26 maja 2018 przez robiczQ Nowicjusz (190 p.)
dzięki wielkie :) próbowałem z overflow-x: scroll; ale coś nie działało. pokombinuje jeszcze. A na desktopie jednak jest więcej miejsca niż na mobile więc to rozwiązanie jest konkretnie pod mobilne urządzenia ;)
komentarz 26 maja 2018 przez BT101 Stary wyjadacz (12,540 p.)
Jeśli chcesz żeby np. 6 tych divów co są w środku wypełniło ci ekran a reszta była poza to może użyj width w vw
komentarz 26 maja 2018 przez robiczQ Nowicjusz (190 p.)
edycja 26 maja 2018 przez robiczQ

@BT101,  już działa wystarczyło zmienić hierarchię 

Podobne pytania

0 głosów
1 odpowiedź 434 wizyt
pytanie zadane 3 maja 2023 w HTML i CSS przez HUBSON2912 Obywatel (1,300 p.)
0 głosów
1 odpowiedź 272 wizyt
pytanie zadane 18 września 2022 w HTML i CSS przez MacieKap Bywalec (2,400 p.)
0 głosów
0 odpowiedzi 191 wizyt
pytanie zadane 18 lutego 2021 w HTML i CSS przez Vaul12 Nowicjusz (120 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...