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

Menu się rozjeżdża

VPS Starter Arubacloud
0 głosów
363 wizyt
pytanie zadane 3 lipca 2017 w HTML i CSS przez niko404 Użytkownik (910 p.)

Problem w tym że na rozdzielczości PC menu tak jakby ucieka z diva .nav na dół, na mobilnych wygląda wszystko ok.

https://codepen.io/niko404/pen/gRzwVP

chcę uzyskać taki efekt: 

1 odpowiedź

0 głosów
odpowiedź 3 lipca 2017 przez xmentor Nałogowiec (49,520 p.)
edycja 3 lipca 2017 przez xmentor

Menu powinno być na liście.

.menu - na co position: absolute? Usuń także float: right.

.nav - zamiast float: left daj right. No i width nie może być 100%, nie w tym przypadku - zmniejsz.

Dodatkowo popraw ten toggler - https://jsfiddle.net/2uhg0kgr/ (przykład Comandeera).

Stosując opływanie (float), musisz używać clearfix

komentarz 3 lipca 2017 przez niko404 Użytkownik (910 p.)
https://codepen.io/niko404/pen/gRzwVP

wersja pc naprawiona ale na mobilnej gdy usuwam width 100% to menu po wysunięciu jest wąskim paskiem zamiast na całą szerokość, a gdy daje 100% hamburger ucieka na dół :/

 

jeśli chodzi o toggler to ten co ja zastosowałem jest bardzo zły? jak byś mógł rozwinąć tą kwestie :D bo mnie interesuję jak się powinno to profesjonalnie zrobić
komentarz 3 lipca 2017 przez xmentor Nałogowiec (49,520 p.)
W media queries na mniejszych szerokościach ustaw width: 100%

Toggler powinien być przyciskiem, label+checkbox nie służy do takich rzeczy + niepoprawnie wstawiasz 'ikonę'.

Tutaj masz krótką lekturę na temat wstawiania ikon: https://comandeer.github.io/blog/a11y/html-css/2017/02/28/o-ikonkach-slow-kilka.html
komentarz 3 lipca 2017 przez niko404 Użytkownik (910 p.)
okej postaram się zrobić ten toggler, jednak wciąż nie rozumiem gdzie dać ten width 100%, mógł byś wskazać dokładne miejsce w kodzie bo próbuje i ciągle coś mi nie wychodzi
komentarz 3 lipca 2017 przez xmentor Nałogowiec (49,520 p.)
Tworzysz media queries dla ekranów o x szerokości i tam ustawiasz szerokość na 100% dla nawigacji.

Podobne pytania

+1 głos
0 odpowiedzi 279 wizyt
0 głosów
1 odpowiedź 451 wizyt
pytanie zadane 7 maja 2017 w HTML i CSS przez Captivity Obywatel (1,030 p.)
0 głosów
1 odpowiedź 542 wizyt
pytanie zadane 5 stycznia 2016 w HTML i CSS przez Jordi Początkujący (290 p.)

92,452 zapytań

141,262 odpowiedzi

319,080 komentarzy

61,854 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!

...