Mam taki dylemat. Jest sobie grid z dwoma kontenerami. W jednym z nich jest nawigacja. Potrzebuję poniżej pewnej rozdzielczości całą nawigację przenieść do drugiego kontenera i trochę inaczej ją poukładać. Zrobiłem to tak jak wydawało mi się najprościej czyli w htmlu są 2 'klony' tej nawigacji z różnymi stylami i w zależności od rozdzielczości jedna ma display 'hidden' a druga 'block'. Wszystko działa ok ale przyszła refleksja...czy tak to się robi? Bo trochę to dziwnie wygląda. Zduplikowany content itd. No ale chyba nie ma innej opcji bez użycia JS?
Responsywność ze skomplikowanym przemieszczeniem
Napisano 16 lutego 2016 - 21:52
Hmm, może użycie flexboxa mogłoby przynieść jakikolwiek rezultat w tym co chcesz zrobić, aczkolwiek też posiada ograniczenia co do przestawiania elementów
Poza tym nie słyszałem o lepszej metodzie bez użycia JS.
Napisano 16 lutego 2016 - 22:01
Tak przypuszczałem ale chciałem się upewnić. Flexbox mógłby nie dać rady przy tym ułożeniu elementów (chociaż mogę się mylić). Uproszczona struktura html wygląda tak:
<div id="wrapper"> <div> <nav>Nawigacja w widoku desktop</nav> </div> <div> jakiś tam div </div> <div> jakiś tam kolejny div </div> <aside> Nawigacja w widoku mobile </aside> </div>
W ostylowanym finalnym widoku jako że <aside> jest skrajnie przeniesiony na prawo to menu musiałoby praktycznie 'przeskoczyć' w drugi koniec strony.
Napisano 16 lutego 2016 - 23:35
Ostatnio naszła mnie podobna refleksja i zapomniałem, że miałem zapytać. Gdzieś zrobiłem podobnie - zmuszony byłem naprzemiennie ukrywać jeden kontener i pokazywać drugi (jego klon) w zależności od przedziałów rozdzielczości. Nie uważam, żeby to było jakieś rozwiązanie, które zawali SEO, czy coś. Ale chętnie poznam opinie innych. Szczególnie jeśli mówimy tutaj o zduplikowanej nawigacji strony.
Napisano 17 lutego 2016 - 00:18
Ostatnio naszła mnie podobna refleksja i zapomniałem, że miałem zapytać. Gdzieś zrobiłem podobnie - zmuszony byłem naprzemiennie ukrywać jeden kontener i pokazywać drugi (jego klon) w zależności od przedziałów rozdzielczości. Nie uważam, żeby to było jakieś rozwiązanie, które zawali SEO, czy coś. Ale chętnie poznam opinie innych. Szczególnie jeśli mówimy tutaj o zduplikowanej nawigacji strony.
SEO było właśnie dla mnie podstawowym zmartwieniem ale z drugiej strony jak sobie czytam np te wytyczne: http://rawgit.com/w3...ster/index.html to nie wiem czy nie popierniczy się coś we wsparciu dla AT w ten sposób. To też podobno jest czynnik rankujący googla więc znowu wracamy do SEO . Chociaż może panikuję jak zwykle...
Napisano 18 lutego 2016 - 22:33
Przy wykorzystaniu flexboxa nie powinno być problemów. Można wykorzystać chociażby "order".
Wydaje mi się, że przy małym pokombinowaniu nawet w "zwykłym" CSSie dało by to radę zrobić.
Możesz wrzucić obrazek/mockup jak to powinno działać. Jak będę miał chwilę to chętnie się z tym pobawię
Napisano 19 lutego 2016 - 09:57
Przy wykorzystaniu flexboxa nie powinno być problemów. Można wykorzystać chociażby "order".
Wydaje mi się, że przy małym pokombinowaniu nawet w "zwykłym" CSSie dało by to radę zrobić.
Możesz wrzucić obrazek/mockup jak to powinno działać. Jak będę miał chwilę to chętnie się z tym pobawię
Jeśli da sie to zrobić w CSS to byłoby super. Oryginalnie temat dotyczył menu nawigacyjnego ale zarzuciliśmy ten pomysł bo był z kilku innych powodów bez sensu. Natomiast nadal takie rozwiązanie by nam pasowało przy widoku produktu. Teoretycznie powinno być łatwiej ale wcale nie jest. W widoku jest ogromna ilość detali. Mockup tego nie oddaje w pełni ale przynajmniej pokazuje mniej więcej koncepcję. Chodzi o 3 buttony 'widok'. Nie chciało mi się robić 2 widoków wiec na czerwono zaznaczyłem gdzie buttony mają być w wersji mobilnej.
Użytkownik przemoo83 edytował ten post 19 lutego 2016 - 10:01
Napisano 19 lutego 2016 - 11:34
To nie lepiej jest je dać tam gdzie mają być na mobilce, a na desktop je odpowiednio wypozycjonować?
webDeveloper
Napisano 19 lutego 2016 - 18:17
A w tym wypadku to ma znaczenie w którą stronę się to robi?
Spróbuj podejść do sprawy jak powiada unbreak.
To o czym mowa, to kodowanie w "doktrynie" mobile first.
Zakoduj najpierw wszystko w AWD tak, by wyglądało jak powinno na smyrfonie.
Późniejsze przystosowanie na desktopa jest łatwizną
Napisano 19 lutego 2016 - 20:22
Jak wyżej. Najpierw bym zrobił pod mobile a potem na większą rozdzielczość. W tym przykładzie kontener co trzyma te "widoki" na większej rozdzielczości można by absolutnie ustawić.
Opcja z podwójnym menu (mobile + desktop) też nie jest zła. O ile nie ukrywasz jakiś większych bloków gdzie treść jest pisana pod SEO to będzie wszystko ok
Napisano 19 lutego 2016 - 20:27
Przekonuje mnie to co mówicie tylko że problem jest taki, że my tę stronę poprawiamy a nie robimy od zera. To wszystko już jest zakodowane tylko teraz trzeba poprawiać. Chociaż jak patrze na wytyczne i potem na to co tam jest w kodzie to się nie zdziwię jak to w końcu jeb..my do kosza i zaczniemy pisać od nowa.
Użytkownicy przeglądający ten temat: 0
0 użytkowników, 0 gości, 0 anonimowych