Problem z responsive menu

Dla specjalistów Webmastering
#1

Witam,
Mam pewien problem. Gdy mam pasek menu i chciałbym, aby po zmniejszeniu strony było menu z link pod linkiem. I nie działa mi tak. Za to działa na odwrót, gdy menu z linkami (jeden pod drugim) zamienia się w pasek menu. Gdzie mam błąd? Poniżej css:
Tu wkleiłem: https://jsfiddle.net/eazsa5by/
Niestety nie mam tego efektu.

#2

Wklej html i css na jsfiddle lub jakąś alternatywę, ale tak na oko wydaje mi się że odwrotnie umieściłeś kod, to co masz dla ekranów do 480px umieściłeś w media query z warunkami odpowiadającymi średnim ekranom.

#3

Gdyby było na odwrót, to jak pisałem, tak by było:
link
link
link
…
link
który zamienia w menu takie:
link link link link
i tak działa gdy jest na odwrót. Ja chcę aby z poziomego zamieniał się w pionowy, czyli na odwrót , to co przedstawiłem;)
Zrobiłem to inaczej, stworzyłem klasę, gdzie nie ma ul i li a same a href. I działa jak należy. A RWD pierwszy raz tworzę, dlatego zanim zacząłem tworzyć, to wcześniej na temat RWD poczytałem.
Czemu mam wkleić kod gdzie indziej? Nie czytelne? Kod HTML wygląda tak:
http://wklej.org/id/3259520/

#4

Nie jest czytelnie bo połowa css otoczona tagiem na kody, połowa nie - wada edytora tekstu, brak kolorowania składni jak wyżej, część kodu też lubi znikać i trzeba “brzydkich zagrywek” by zobaczyć.

jsfiddle, codepen, cssdeck ma taką zaletę że można szybko edytować jako kolejną wersje projektu czy zrobić sobie kopię i wszystko testować a nie np. przetwarzać na sucho co jest źle.

#5

Poprawiłem i link dałem w pierwszym poście:)

#6

Wyszło mi coś takiego:

Zmiany:

  • “and (max-width:1000px) and (min-width:480px)” zmieniłem na jedno “and (max-width: 560px)”, nawigacja trochę mniej głupieje niż oryginalnie, że na średnim ekranie (np. tablet) pokazuje się jedno kolumnowa a na telefonie pewnie jako rzędowa i pozycja dalsza niż 3 się nie mieściła i wychodziła gdzieś za nav czy pod nim była przy domyślnej wysokości.

  • W tej części zmieniłem wysokość na szerokość:

    @media only screen ... {
  nav {
    width: 100%;
     ...
     }
}

  • ustawiłem szerokość elementu a w li na 40 px (większy margines wewnętrzny).

Kod niestety inaczej zachowuje się na jsfiddle - więc warto by sprawdzić wersje "/1/" z poprawkami jakie dają w miarę oczekiwany efekt działający na codepen.io - być może to błąd platformy jsfiddle.

W innych podobnych też działa - np. http://jsbin.com/yicohidaxu/edit?html,css,output

Nagle też już tam działa, może błąd w przeglądarce, że nie aktualizowała kodu i ładowała z pamięci podręcznej.

Jak to jest boczna nawigacja to bym nie próbował jej jakoś inaczej wyświetlać na różnych ekranach.

#7

Co do rozdzielczości, to ja je wymyśliłem, aby sprawdzić, czy działa to co napisałem, ale te rozdzielczości nie są spójne z urządzeniami mobilnymi. Dlatego muszę dać prawidłowe rozdzielczości, aby poprawnie wyświetlało się na telefonach i tabletach. A tak jest kogiel mogiel.
Jak wcześniej pisałem, już sobie poradziłem tworząc oddzielną klasę i jest tak jak napisałem:)

#8

https://lab.maltewassermann.com/viewport-resizer/ - jak sprawdzam to nie jest tragicznie, trochę gorzej jak się używa narzędzia z chrome do udawania smartfonów, tam nie wykrywa media query.

https://codepen.io/web-forum-dobre/full/mBOaqo

OK to da się zniwelować dodając meta tag:

<meta name="viewport" content="width=device-width">

<meta name="viewport" content="width=device-width, initial-scale=1">

Link do wersji debug z codepen za szybko wygasał więc usuwam.

Dla bardzo małych wyświetlaczy zmniejszyłem przycisk:

@media screen and (max-width: 200px) {
  li a {
    padding: 20px 20px;
  }
}