Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Matej
Člen
Avatar
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/ta­bletoch, (Pre navigacne menu) alebo sa to musi riesit iba javascriptom?

Dik za odpovede.

 
Odpovědět
17.12.2014 21:26
Avatar
Patrik Smělý
Tvůrce
Avatar
Odpovídá na Matej
Patrik Smělý:17.12.2014 21:33

Ahoj, ano je přes <select>

Editováno
 
Nahoru Odpovědět
17.12.2014 21:33
Avatar
Patrik Smělý
Tvůrce
Avatar
Odpovídá na Matej
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
 
Nahoru Odpovědět
17.12.2014 21:41
Avatar
Matej
Člen
Avatar
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
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Matej
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.
Avatar
Matej
Člen
Avatar
Odpovídá na Honza Bittner
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
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na Matej
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
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Matej
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
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Matej
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č
Řešení problému
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.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Matej
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
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Matej
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
Nahoru Odpovědět
26.12.2014 23:46
Neaktivní uživatelský účet
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
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.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Honza Bittner
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.