Autor Zpráva
radekt
Profil
Dobrý den,
dělal jsem redesign kamarádova webu (Římské legie). Přeje si mít fixní pozici menu, aby se, pokud se dokumentem roluje, drželo v okně na místě. Problém nastává v mobilním prohlížeči v módu landscape: spodní položky menu jsou nedostupné, protože jsou umístěny pod spodním okrajem stránky a díky pevnému umístění se k nim nelze dostat posouváním obsahu. Jediné řešení, které mě napadlo, bylo vypnout fixní pozici menu pro menší zařízení:
HTML
<!--vše, co má výšku viewportu 700px a méně, nemá fixní pozici menu -->
<link rel="stylesheet" href="/css/small_height.css" media="screen and (max-height: 700px)">

CSS
#nav {
  position: static;
}

Chci se zeptat na dvě věci. Existuje lepší řešení? Pokud ne, je zvolená max-height 700px optimální? Na mobilu se to chová dobře, ale nemám možnost to otestovat na nějakém tabletu.
Děkuji
Radek Tůma
Tomáš123
Profil
radekt:
Existuje lepší řešení?
Myslím, že lepšie riešenie spočíva v tom, že namiesto celej navigácie, bude viditeľný iba pruh hore, z ktorého po nájdení myšou užívateľovi vyskočia položky menu.

je zvolená max-height 700px optimální?
Ak sa budeš riadiť tým hore, tak je výška 700px úplne zbytočná, navrhoval by som niečo okolo 400px-300px, aby sa malo menu kam vysunúť a čo je dôležitejšie, aby malo ako zmiznúť. Príklad:
Navigačný blok: výška 30px; (výška bloku, z ktorého sa bude menu vysúvať)
subpoložky: výška 25px; (výška riadku položiek, ktoré sa vysunú)
zvýši: výška 220px;

A menu by som dal position: static; pri výške = alebo > 300px;
radekt
Profil
Tomáš123:
Pruh nahoře, z kterého po kliknutí vyjedou položky menu, je častým řešením - ale řešení tohoto druhu, co jsem zatím viděl, se neobešla bez JavaScriptu a nevím, zda a jak by to šlo pouze pomocí CSS tak, aby to fungovalo na dotykových zařízeních.

Abych to ještě upřesnil - stránky jsou stylované metodou mobile first - tedy, menu je nad obsahem a není fixní, pro šířku viewportu větší než 590px se menu přesune nalevo od obsahu a je fixní. Pro desktop a mobil držený na výšku to funguje, jak jsem chtěl. Ale jakmile se mobil otočí na šířku, je považován za desktop a tam nastával výše zmíněný problém.
Bubák
Profil
radekt:
Ale jakmile se mobil otočí na šířku, je považován za desktop
http://kod.djpw.cz/nidb
http://kod.djpw.cz/nidb-
Pro vyzkoušení stačí "hodit" prohlížeč (nebo list, ale to umí jen stará dobrá Opera) ho okna (zotavit) a měnit poměr stran okna změnou výšky nebo šířky.

Kromě orientation:portrait, použitého v ukázce, existuje i min-device-width, max-device-width a taky min-device-height a max-device-height, na tvou stránku jsem se nedíval, tudíž neposoudím, co se ti bude více hodit, ale tipnul bych to na min-device-height nebo na kombinaci orientation:portrait a min-device-height.
radekt
Profil
Bubák:
Děkuji moc, takže budu-li to mít takto:

<!-- mobile -->
<link rel="stylesheet" type="text/css" href="/css/mobile.css">
<!-- mobile landscape -->
<link rel="stylesheet" href="/css/mobile.css" media="screen and (max-width: 590px) and (orientation: landscape)">
<!-- desktop -->
<link rel="stylesheet" href="/css/desktop.css" media="screen and (min-width: 590px)">

Bude si mobil v landscape módu brát styl mobile.css a ne desktop.css a omezením max-width se vyhnu tomu, aby si styl mobile.css braly tablety v landscape módu, kde by menu nad obsahem, s šířkou na celou obrazovku, už nevypadalo dobře. Šlo by to tak udělat?

Nebo by byla elegantnější tato konstrukce?
<!-- mobile first plus zařízení do 590px v módu landscape -->
<link rel="stylesheet" href="/css/mobile.css" media="all, ((max-width: 590px) and (orientation: landscape))">
<!-- desktop -->
<link rel="stylesheet" href="/css/desktop.css" media="screen and (min-width: 590px)">
radekt
Profil
Nakonec jsem to vyřešil tak, že v režimu landscape se fixní pozice menu bez výjimky ruší. Je to asi nejčistší cesta, která zaručí, že se k menu půjde kdykoli dostat.
HTML:
<!-- mobile first -->
<link rel="stylesheet" type="text/css" href="/css/mobile.css">
<!-- vše, co má šířku viewportu větší než 590px, už je pro nás desktop -->
<link rel="stylesheet" href="/css/desktop.css" media="screen and (min-width: 590px)">
<!-- mobilní zařízení v režimu landscape -->
<link rel="stylesheet" href="/css/landscape.css" media="screen and (orientation: landscape)">

CSS:
/* landscape.css */
#nav {
  position: static;
}

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: