Avatar
Matej
Člen
Avatar
Matej:

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ý (SogoCZE)
Tým ITnetwork
Avatar
Odpovídá na Matej
Patrik Smělý (SogoCZE):

Ahoj, ano je přes <select>

Editováno 17.12.2014 21:37
Nahoru Odpovědět  -1 17.12.2014 21:33
PHP můj oblíbený jazyk......
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Odpovídá na Matej
Patrik Smělý (SogoCZE):

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  -3 17.12.2014 21:41
PHP můj oblíbený jazyk......
Avatar
Matej
Člen
Avatar
Matej:

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
Redaktor
Avatar
Odpovídá na Matej
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Matej
Člen
Avatar
Odpovídá na Honza Bittner
Matej:

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
tomasmanhal
Člen
Avatar
Odpovídá na Matej
tomasmanhal:

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  +1 26.12.2014 20:32
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Matej
Samuel Illo :

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
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Matej
Honza Bittner:

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í
+1 bodů
Řešení problému
Nahoru Odpovědět 26.12.2014 21:37
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Matej
Jiří Gracík:

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  +2 26.12.2014 23:08
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Matej
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Jiří Gracík
Honza Bittner:

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

Nahoru Odpovědět  +1 29.12.2014 8:37
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Honza Bittner
Jiří Gracík:

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

Nahoru Odpovědět 29.12.2014 11:59
Creating websites is awesome till you see the result in another browser ...
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.