Autor Zpráva
OndraZizka
Profil *
#1 · Zasláno: 24. 3. 2005, 18:48:01
Odpovědět Citovat
Zkouším vytvořit menu, které by se definovalo nejjednodušší možnou strukturou elementů, s minimem JavaScriptu, který by jen zajišťoval zobrazování a skrývání podnabídek, a co nejvíc upravitelné pomocí CSS.

Podívejte se prosím na
příklad.

Pokud používáte MSIE, tak takhle bych to chtěl.

Pokud používáte Gecko, tak vidíte, že DIV pod-pod-menu a pod-pod-pod-menu jsou ztenčena na šířku omezujícího bloku nadřazeného menu. Samozřejmě chci, aby byly široké podle obsahu - tedy šířka nejširší položky (+ border + padding atd.).

Nepodařilo se mi přijít na to, jak to udělat čistě pomocí CSS. Umím to napravit jedině projetím všech menu JavaScriptem, zjištěním nejširší položky a paddingu a borderů, a nastavením pod_menu.style.width = výsledek. Bohužel tím se vzdaluji od ideálu, a s nutností ošetřit odlišnosti prohlížečů kód roste do stovek řádků.

(Mimochodem, na tohle by byl daleko lepší border-box, jako ostatně na všechno, nechápu, kterej ufon dal do specifikace content-box - katastrofa.)

Pro lepší orientaci jsem obarvil okraje:

červená = submenu, position: absolute;
zelená = položka, white-space: nowrap;

Jinak snad nic důležitého.

Takže tedy - jak přinutit v Gecku červené rámečky, aby obsáhly všechen svůj obsah? Snad nějaký trik s display, overflow, procenty, nebo tak něco?

Díky, Ondra Žižka
Fred
Profil
#2 · Zasláno: 24. 3. 2005, 20:28:39 · Upravil/a: Fred
Odpovědět Citovat
Nevím docela slušně mě fungoval následující styl, i když to není to pravé ořechové.

body{background:#fff;}
.menu{border:4px solid #000;padding:8px;}
.polozka{border:4px solid #0f0;padding:0;}
.submenu{border:4px solid #f00;position:absolute;padding:8px;}
div[class="submenu"]{width:50%;}
div[class="submenu"] div[class="submenu"]{width:100%;}
.submenu,.menu{background:#ddd;}
.polozka{background:#fff;white-space:nowrap;}
OndraZizka
Profil *
#3 · Zasláno: 24. 3. 2005, 21:26:16
Odpovědět Citovat
Jasne, tak by to v tomto pripade taky slo, ale
1) sirka podmenu se pak v Gecku roztahuje na 50% stráky, to je nehezké; jasně, moh bych to zúžit, ... ale
2) je to nesystémové řešení. Já nepsal, že chci, aby byly oblasti širší, než obvykle dlouhé položky, ale aby se rozšířily podle velikosti položek. Jde o to, že nedělám menu na nějaký web, ale menu framework, a to menu si posléze bude moci každý upravit podle libosti, a ne jako ta Javová, případně JavaScriptová zvěrstva typu doiMenu. Takže potřebuji systémové řešení.
I tak dík za zkoušku a odpověď, těším se na další podněty.
Fred
Profil
#4 · Zasláno: 24. 3. 2005, 21:36:59
Odpovědět Citovat
Rozumím, docela by mě taky zajímalo řešení, je to takový ten dotaz co je soukromě nazývám tenhle je pro Plaváčka.
OndraZizka
Profil *
#5 · Zasláno: 24. 3. 2005, 22:03:33
Odpovědět Citovat
Případně beru i cokoliv z oblasti vlastností -moz-*, protože je to záležitost Gecka. Tam by možná řešení bylo, protože těmito vlastnostmi se dají ovlivnit použité renderovací postupy, např. -moz-box-model ...
OndraZizka
Profil *
#6 · Zasláno: 24. 3. 2005, 22:06:31
Odpovědět Citovat
"Co je prosím -moz-box-model? Nejde o překlep? Znám -moz-box-sizing."
-- Google
:)
OndraZizka
Profil *
#7 · Zasláno: 24. 3. 2005, 23:58:02
Odpovědět Citovat
Našel jsem workaround: Položky zavřu ještě do jednoho divu, ten už Gecko nezužuje.
Časová prodleva: 20 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0