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

Jak skalować menu ?

+1 głos
797 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,770 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,590 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,590 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,700 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,700 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 220 wizyt
pytanie zadane 24 stycznia 2017 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
0 głosów
3 odpowiedzi 6,943 wizyt
pytanie zadane 28 czerwca 2015 w HTML i CSS przez marcin_kub Obywatel (1,420 p.)

86,485 zapytań

135,241 odpowiedzi

300,487 komentarzy

57,234 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...