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

Jak skalować menu ?

VPS Starter Arubacloud
+1 głos
1,192 wizyt
pytanie zadane 25 października 2015 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
zmienione kategorie 25 października 2015 przez Patrycjerz

Witam. Chciałbym zeskalować menu. tzn na chwilę obecną jak zmniejszam okno przeglądarki to z menu robi się chaos. Elementy <li> latają sobie po przestrzeni <ul>. Nie chodzi mi o poprawę na mojej stronie, tylko jakiś wzór na responsywność menu (o ile takie istnieje:-). Gdyż cała strona jest dobrze skalowana, został mi tylko problem z menu

 

po skalowaniu:

 

 

Jak widać strona jest responsywna i niemalże wszystkie jej elementy, tylko nie menu :) ma ktoś na to radę ?

3 odpowiedzi

0 głosów
odpowiedź 25 października 2015 przez DL TD Nałogowiec (36,710 p.)
edycja 25 października 2015 przez DL TD

Może jakiś skrawek kodu? To są podstawy responsywności, w miejscu gdzie menu zaczyna się rozwalać np. powiedzmy, że rozwala się przy 1300px. Dodaj więc w CSS taki kawałek kodu:

@media screen and (max-width: 1300px) {
     /* Tutaj wprowadzaj zmiany swojego menu. */
)

Możesz ustawić przyciski jeden pod drugim lub np. zmniejszyć czcionkę i padding. Wszystko wymaga testów i pomysłu :)

 

EDIT: Zła kategoria.

komentarz 25 października 2015 przez DariuszH Gaduła (3,100 p.)
http://codepen.io/anon/pen/rOdWaG

 

Proszę oto kawałek kodu :)
0 głosów
odpowiedź 25 października 2015 przez Tomatosoup Pasjonat (18,530 p.)
Chyba najlepszym i najbardziej intuicyjnym rozwiązaniem jest tzw. 'hamburger menu', tutaj masz snippety jak to zrobić, na internecie znajdziesz ich dużo więcej:

http://www.internetkultur.at/simple-hamburger-drop-down-menu-with-css-and-jquery/

http://codepen.io/corysimmons/pen/KbFcg

A tutaj artykuł o 'best practices':

http://webdesignledger.com/best-practices-for-hamburger-menus
komentarz 25 października 2015 przez DariuszH Gaduła (3,100 p.)
edycja 25 października 2015 przez DariuszH
Fajne to to, ale chcialbym skalowane poziome menu :) zabawa z margin nie pomaga a a display:block daje blokowy a zarazem pionowy efekt, nie wierszowy, który pożądam  :)
komentarz 25 października 2015 przez Tomatosoup Pasjonat (18,530 p.)
Chodzi Ci o to że zakładki w menu nachodzą na siebie ? Dodaj margin w ul#menu li :

http://codepen.io/Tomatosoup/pen/PPRbWq
komentarz 25 października 2015 przez DariuszH Gaduła (3,100 p.)
Dobra już odkryłem :) By elementy układały się w wierszu należało dodać float:left :) Dzięki za cząstkę pomocy :D
0 głosów
odpowiedź 25 października 2015 przez Schizohatter Nałogowiec (39,600 p.)
Mówisz - chciałbyś, żeby się dostosowywało.

Ale to musisz sobie odpowiedzieć na pytanie: JAK chcesz, żeby się dostosowywało. Mają się układać pod sobą, ma się zmniejszać szerokość <li>? Jeśli ma się zmniejszyć ich szerokość, to co z tekstem, który jest w środku? Ma się przenosić do kilku linijek i powodować zwiększenie <li>, czy może ma się zmniejszać rozmiar czcionki? I tak dalej, i tak dalej...

Dopiero jak odpowiesz sobie na pytanie "co ma się dziać przy zmniejszaniu strony", będzie można Ci pomóc.
komentarz 25 października 2015 przez DariuszH Gaduła (3,100 p.)
Dzięki za radę odnośnie stawiania sobie pytań :) Chciałbym by w chwili zmniejszania pola przeglądarki, zmniejszała się proporcjonalnie  szerokość i długość pól menu. Nie chcę, by się gdziekolwiek cokolwiek przenosiło tylko pozostało na swoim miejscu a zmniejszyło rozmiary :)
komentarz 25 października 2015 przez Schizohatter Nałogowiec (39,600 p.)
No to byś musiał mieć wielkości %, ale wtedy każdy element będzie miał taką samą szerokość. A co ma się z tekstem dziać? No bo skoro w elemencie masz jeszcze tekst, to jak jego rodzic się kurczy, to co on ma robić?

Podobne pytania

0 głosów
2 odpowiedzi 489 wizyt
pytanie zadane 24 stycznia 2017 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
0 głosów
3 odpowiedzi 7,992 wizyt
pytanie zadane 28 czerwca 2015 w HTML i CSS przez marcin_kub Obywatel (1,420 p.)

92,453 zapytań

141,262 odpowiedzi

319,085 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!

...