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

Jak skalować menu ?

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+1 głos
1,688 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 711 wizyt
pytanie zadane 24 stycznia 2017 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
0 głosów
3 odpowiedzi 8,352 wizyt
pytanie zadane 28 czerwca 2015 w HTML i CSS przez marcin_kub Obywatel (1,420 p.)

93,194 zapytań

142,208 odpowiedzi

322,051 komentarzy

62,518 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 3053p. - dia-Chann
  2. 2998p. - Łukasz Piwowar
  3. 2993p. - Łukasz Eckert
  4. 2970p. - CC PL
  5. 2930p. - Tomasz Bielak
  6. 2907p. - Łukasz Siedlecki
  7. 2890p. - rucin93
  8. 2801p. - Adrian Wieprzkowicz
  9. 2645p. - Mikbac
  10. 2485p. - Marcin Putra
  11. 2461p. - Michał Telesz
  12. 2418p. - Michal Drewniak
  13. 2371p. - Anonim 3619784
  14. 1733p. - rafalszastok
  15. 1650p. - Mariusz Fornal
Szczegóły i pełne wyniki

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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...