Diskuze: responzivne navigacne menu

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Matej

Člen

Matej:17.12.2014 21:26

Zdravim , ako sa riesi mobile-friendly navigacne menu?.
Resp. je nejaky sposob v CSS/HTML ako spristupnit :hover na mobilnych zariadeniach/tabletoch, (Pre navigacne menu) alebo sa to musi riesit iba javascriptom?

Dik za odpovede.

Odpovědět

17.12.2014 21:26

Patrik Smělý

Tvůrce

Patrik Smělý:17.12.2014 21:33

Ahoj, ano je přes <select>

Editováno 17.12.2014 21:37

Nahoru Odpovědět

17.12.2014 21:33

Patrik Smělý

Tvůrce

Patrik Smělý:17.12.2014 21:41

Budeš mít select, s display: none;

který se třeba při:

@media (max-width: 1065px) {
  #select-menu {
    display: block;
  }
}

A normální menu schováš stejným způsobem. sice každou položku budeš muset do selectu psát znova, ale je to myslím ta jediná možnost jak toho docílit bez js.

Editováno 17.12.2014 21:43

Nahoru Odpovědět

17.12.2014 21:41

Matej

Člen

Matej:26.12.2014 18:52

Tu ale nastáva problém , ak bude mat sub menu dalsie sub menu

Nahoru Odpovědět

26.12.2014 18:52

Honza Bittner

Tvůrce

Honza Bittner:26.12.2014 19:23

Nejdříve si musíš určit, CO přesně má být na tvých stránkách v mobilu přístupné. Z menu se tedy mohou vyhodit blbosti, které nejsou podstatné a na mobil se dávat nebudou.

Pokud máš více než 3 položky, zvolil bych způsob skrytí menu pod nějaké tlačítko. Po kliku na tlačítko se ti nějakým způsobem zobrazí menu. Zde poté můžeš rozlišovat z variant podle šířky obrazovky (na výšku / na šířku).

Na výšku, tedy nejužší možnost, bych volil položku pod položku s tím, že pokud máš sub-menu, tak se ti otevře při kliku na danou položku vyšší úrovně.

Pokud bude obraz na šířku, tedy se ti nabízí širší místo, je zde možnost udělat menu s 50% šířkou - chce to poté ale promyslet logiku a design.

Obecně nyní doporučuji styl mobile-first, což VELMI zjednodušuje kód a usnadňuje práci, avšak pravda, že do začátku je to poměrně náročnější na představivost.

Nahoru Odpovědět

26.12.2014 19:23

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Matej

Člen

Matej:26.12.2014 19:59

Toto je skor logika rozlozenia atd. Mna skor zaujima , ako si povedal "po kliku" na tlacitko , ci je nejaka nahrada za :hover na mobiloch/tabletoch , alebo sa musi pouzit :target alebo javascript

Nahoru Odpovědět

26.12.2014 19:59

Tomáš Maňhal

Člen

Tomáš Maňhal:26.12.2014 20:32

Pro mobilní zařízení není žádný náhradní hover efekt či něco podobného. Prostě přes media queries nalajnuješ nový styl menu s tlačítkem, na které když někdo ťukne, tak vyjede menu :-) Nevím co v tom hledáš za složitosti :-) Javascript buď využiješ nebo ne, není to povinnost :-)

Nahoru Odpovědět

26.12.2014 20:32

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:26.12.2014 20:33

Presne ako písal Honza Bittner. Pokliku na tlačítko sa otvorí a po ďalšom kliku zatvorí. Dá sa to aj v čistom CSS - niečo takéto: http://www.sitepoint.com/…gation-menu/, alebo potom cez JavaScript. Teoreticky by to bolo možné aj cez hover ale zatváranie tlačítkom by nefungovalo - fungovalo by len otvorenie, zatvorilo by sa tuknutím hocikde mimo menu.

Nahoru Odpovědět

26.12.2014 20:33

Neaktivní uživatelský účet

Honza Bittner

Tvůrce

Honza Bittner:26.12.2014 21:37

Do toho bych JS, :hover, ba ani :target nemontoval.

Nejjednodužší bude využít checkboxu, kterému nastyluješ label. Podobně jako posílali odkaz výše.

Zde je však nutno přemýšlet, jelikož kód musí být rozpoložen tak, aby to vyhovovalo selektoru. V selektoru využijeme ~, a proto musí být menu, respektive tlačítko, v kódu nad tím, co chceme ovlivnit.

.muj-checkbox:checked ~ .stranka-pro-odsun

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

26.12.2014 21:37

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:26.12.2014 23:08

Ať už se řeklo cokoliv, tak select mi přijde jako zcela nevhodný. Už jenom kvůli tomu, že v něm uděláš jen jednu úroveň a je nestylovatelný, krom toho že ho některé prohlížeče (třeba safari u iPhone) implementují úplně jinak než klasický select.

Nahoru Odpovědět

26.12.2014 23:08

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:26.12.2014 23:46

Abych jenom nemlel pantem a taky poradil - vždycky pro menu používam nav a v něm netříděný seznam a v něm odkazy (nav -> ul - > li -> a). Vždy jsem použil horizontální menu, neměl jsem důvod používat vertikální (i když ve finále na telefonu z něj je v podstatě vertikální). Normálně na počítači je tedy menu v řadě, na jednom řádku. Pokud se smrskne stránka tak, že se nevejde, pak jednoduše všechny položky naházím pod sebe a roztáhnu je přes celou stránku. Jde to i s podmenu, ale pro opravdu příjemnou funkčnost to potřebuje js.

// Základem je, že všechny položky mají display block a float doleva. Na telefonu float zrušíš a roztáhneš. (někdo namítne, že je lepší použít display inline-block, ale z nějakýho důvodu to nepoužím, asi karma)

Editováno 26.12.2014 23:50

Nahoru Odpovědět

26.12.2014 23:46

Neaktivní uživatelský účet

Honza Bittner

Tvůrce

Honza Bittner:29.12.2014 8:37

To jsou ty komplikace, když někdo nepoužívá IMHO dokonalejší "mobile-first"...

Nahoru Odpovědět

29.12.2014 8:37

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:29.12.2014 11:59

Tak to jsem nechtěl liknout. Je to otázka názoru

Nahoru Odpovědět

29.12.2014 11:59

Neaktivní uživatelský účet

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 13 zpráv z 13.

Nejčastěji vyhledáváné

Diskuze: responzivne navigacne menu