Jak skalować menu ?

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

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 :)

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

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ć?