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

Menu responsywne - CSS

VPS Starter Arubacloud
0 głosów
1,525 wizyt
pytanie zadane 28 lipca 2017 w HTML i CSS przez jjanek Użytkownik (630 p.)
edycja 28 lipca 2017 przez jjanek

Hej,

prubuję zrobić menu które bedzie mialo 3 warstwy na mobilce będzie działało hamburgerek -> klikasz na temat rozwija sie lista podtematow itd.

Na desktopie zato ma to sie wyswietlac jako belka i po kliknieciu na menu1, menu 2, menu 3 ma sie wyswietlac na drugiej belce pod spodem.

Narazie mam cos takiego i nie wiem jak to ugryzc od strony logiki:
https://jsfiddle.net/cs4rf6h2/

Nie wiem jak to ugryżc czy lepiej zamiast listty jakies spany zastosowac ? Probowałem to bardziej rozbudowac i na mobilce dzialo ale na desktopie tragedia tekst pomiedzy dwoma menu1 i menu 2 sie wyswietlal

\

 

 

moze lepiej zobrazuje to rysunek po lewej mobilka prawo desktop

3 odpowiedzi

0 głosów
odpowiedź 28 lipca 2017 przez ForeverFriendzone Dyskutant (7,520 p.)

Nie wiem czy tylko mi, ale trudno jest zrozumieć o co dokładnie Ci chodzi. 

Wydaje mi się, że pewnie o to, że na mobilce chcesz aby kontenery (z opcjami menu) zsuwały się jeden pod drugi, a na desktopie były ułożone obok siebie? 

Jeżeli tak to po  @media only screen and (max-width: 480px) and (orientation: portrait) . Przy ułożeniu poziomym landscape.

komentarz 28 lipca 2017 przez jjanek Użytkownik (630 p.)
Dodałem obrazek moze łatwiej będzie
komentarz 28 lipca 2017 przez ForeverFriendzone Dyskutant (7,520 p.)
No to Bootstrap :D
komentarz 28 lipca 2017 przez jjanek Użytkownik (630 p.)
Ok, ok ale włąśnei chciał bym to sam zrobić nie chce gotowego kodu tylko jakiś pomysł jak sie za to zabrac zeby w desktopie mi sie to w drugiej belce pokazało :D
komentarz 28 lipca 2017 przez ForeverFriendzone Dyskutant (7,520 p.)
Bootstrap to framework i wcale nie musisz korzystać z gotowców tylko tylko z dokumentacji.

Jeżeli jednak CSS to tak jak pisałem musisz pokombinować z orientacją lanscape i portrait, bo też się da za jego pomocą to zrobić.
komentarz 28 lipca 2017 przez jjanek Użytkownik (630 p.)
Ale właśnei nie mogę zrozumieć co wspolnego ma to z orientacją jeżeli mógł byś to wytłumacz bo ograniczony troche jestem chyba ; )

Skoro chciał bym inny przykład

mam kontener w tym kontenerku 3 spany kazdy z nich ma 2 elementy span z p

<div>
  <span>
     <span><p>1</p></span>
     <span><p>2</p></span>
  <span>
      <span><p>3</p></span>
      <span><p>4</p></span>
  </span>
</div>

 

i chciał bym teraz spana z p1 p2 wyswietlic na samym dole przed </div>
0 głosów
odpowiedź 28 lipca 2017 przez marcin1988 Początkujący (430 p.)

Polecam użycie Bootstrapa.

Tutaj masz więcej info na ten temat:

https://kursbootstrap.pl/gorne-menu-strony/

Pozdrawiam :)

 

komentarz 28 lipca 2017 przez jjanek Użytkownik (630 p.)
Ok, ok ale włąśnei chciał bym to sam zrobić nie chce gotowego kodu tylko jakiś pomysł jak sie za to zabrac zeby w desktopie mi sie to w drugiej belce pokazało :D
0 głosów
odpowiedź 29 lipca 2017 przez ForeverFriendzone Dyskutant (7,520 p.)
Z pomocą przychodzi jeszcze moduł Flexbox, który pozwoli Ci na takie elastyczne menu. Popatrz jak to tu wygląda: https://fiddle.jshell.net/nq5op57b/ Poczytaj jeszcze o tym co oferuje ten moduł i pokombinuj, bo nie mam teraz czasu, ale efekt już podobny osiągnąłem :P
komentarz 31 lipca 2017 przez jjanek Użytkownik (630 p.)
Hm,
ok, dzięki za wskazówki - a myślisz, że to Item 1, item 2 i item 3 można by było wyświetlić tak zeby najezdzało na zolte i czerwone tło ? :>
komentarz 31 lipca 2017 przez ForeverFriendzone Dyskutant (7,520 p.)
Pewnie tylko musiałbyś to umieścić w osobnym kontenerze i również użyć Flexbox'a :D

Podobne pytania

+1 głos
1 odpowiedź 207 wizyt
pytanie zadane 25 grudnia 2020 w HTML i CSS przez Piotrek123321 Nowicjusz (130 p.)
0 głosów
0 odpowiedzi 1,445 wizyt
pytanie zadane 12 lutego 2017 w JavaScript przez perlik1990 Nowicjusz (180 p.)
+2 głosów
2 odpowiedzi 504 wizyt
pytanie zadane 16 lutego 2016 w HTML i CSS przez mowmiheniek Stary wyjadacz (11,900 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!

...