IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
k.ats
Člen
Avatar
k.ats:22.9.2014 13:06

Ahoj, pomalu vytvářím nový web a dnešní den se snažím vytvořit menu, respektive takové submenu pomocí css. Chtěl bych po najetí na Fotogalerie aby mi vyjel seznam menu. Zatím se mi povedlo docílit toho, že mi sice seznam vyjede ale odskočí mi další položky, co jsou vedle nad tím. Už nad tím přemýšlím celý den a jediný o mě napadlo, tak posunout tuto položku úplně doprava, ale to bych chtěl jako poslední variantu. Pak jsem našel, že existuje nějaký element menu, ve kterém by to mohlo jít, ale zde máte napsaný, že to nepodporují prohlížeče. Nebo tam podmenu dělat nebudu a vše bude až na té nové stránce fotogalerie. Další možnost nějaká jednoduchá java aplikace na menu? Co by jste zvolili, nebo co vám přijde jako nejvhodnější řešení? Zde je zatím můj pokus s menu: http://supastav.tode.cz/

Editováno 22.9.2014 13:07
 
Odpovědět
22.9.2014 13:06
Avatar
misaj
Člen
Avatar
misaj:22.9.2014 13:16

Ahoj, já bych zkusil přesunout div podmenu-pozadi mimo ul, tedy mimo celé menu.

 
Nahoru Odpovědět
22.9.2014 13:16
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na k.ats
Neaktivní uživatel:22.9.2014 13:19 
<nav>
<ul>
<li class="aktivni">Item</li>
<li class="neaktivni">Item
<ul>
<li>Subitem</li>
</ul>
</li>
Editováno 22.9.2014 13:19
Nahoru Odpovědět
22.9.2014 13:19
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Neaktivní uživatel:22.9.2014 13:25

A este tam daj ukoncenie na tagy...

Nahoru Odpovědět
22.9.2014 13:25
Neaktivní uživatelský účet
Avatar
k.ats
Člen
Avatar
k.ats:22.9.2014 17:33

Díky tźa rady. Ten div podmenu pozadi tomu nevadi. Spis tomu vadi cela sirka toho podmenu li. S tou aktivni a neaktivni tridou moc nerozumim ceho tim mam dosahnout. Muzes me prosim nakoépnout trochu podrobneji jak tim docilim aby me ty polozky v menu neutikali? Dekuji

 
Nahoru Odpovědět
22.9.2014 17:33
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na k.ats
Neaktivní uživatel:22.9.2014 17:38

Aktivna, neaktivna trieda je to, čo máš na tom webe, tak som to tam len tak dal :)
Dávno som toto už nerobil, ale skús sa pohrať s position. Asi čas si to znova skúsiť :D

Nahoru Odpovědět
22.9.2014 17:38
Neaktivní uživatelský účet
Avatar
k.ats
Člen
Avatar
k.ats:22.9.2014 18:08

jj pozicovani. Bohuzel tady si moc nepomuzu. Kdyz dam relativni pozici, tak to prave skace s tim jak se me zobrazi to podmenu. Kdyz dam absolutni, tak me to nereaguje na zmenu sirky okna vuci ostatnim elementum v prohlizeci. Potreboval bych nejak ukotvit ty polozky menu aby nebyli zavisli na sirce toho podmenu, ale nemuzu to udelat pomoci absolutni pozice a nic jinyho me nenapada. Asi se na to vyprdnu a podmenu proste nebude.

 
Nahoru Odpovědět
22.9.2014 18:08
Avatar
k.ats
Člen
Avatar
k.ats:22.9.2014 18:51

Nakonec jsem tomu nastavil absolutni pozici bez zadnych parametru, tudiz mi ted nic neodskakuje, ale je to podmenu na muj vkus moc vpravo a do leva to buhuzel neposunu, viz. http://supastav.tode.cz/

Zitra zacnu delat asi uz neco jineho a rozmyslim se, jestli to tam necham ci nikoliv.

// tak jsem jeste zkusil posunout div, kterej tam mam kvuli pozadi s relativni pozici a s nim to jakz takz funguje jak ma :-) No sakris teda. Takova blbost a da to zabrat celej den.

Editováno 22.9.2014 18:55
 
Nahoru Odpovědět
22.9.2014 18:51
Avatar
k.ats
Člen
Avatar
k.ats:23.9.2014 11:49

Nakonec jsem to menu udelal uplne jinak - pomoci css opacity a transform. Jen si nejsem jisty jestli je

transform(9999px)

dobre :-) Ale jinak a lepe me to bohuzel nenapadlo.

 
Nahoru Odpovědět
23.9.2014 11:49
Avatar
k.ats
Člen
Avatar
k.ats:23.9.2014 11:57 
transform:translate(9999px)

jsem samozrejme chtel napsat.

 
Nahoru Odpovědět
23.9.2014 11:57
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na k.ats
Honza Bittner:23.9.2014 14:51

Nevím proč tam používáš translate?
Jde to udělat úplně jednoduše. Nejdříve si musíš vytvořit správně seznam.

<ul>
  <li><a href="">Úvod</a></li>
  <li><a href="">Fotogalerie</a>
    <ul> <!-- 2. úroveň -->
      <li><a href="">Subpoložka 1</a></li>
      <li><a href="">Subpoložka 2</a></li>
      <li><a href="">Subpoložka 3</a></li>
      <li><a href="">Subpoložka 4</a></li>
    </ul>
  </li>
  <li><a href="">Kontakt</a></li>
</ul>

Nastyluj si nějak 1. úroveň.

Poté si 2. úroveň (tedy to druhé - vnořené - ul) nastavíš na absolutní pozici. Zde také nepoužívej třídy jako .submenu a podobné nesmysly, ale využij třeba selektoru "nav ul ul"... :) Zbytek si už můžeš nastylovat podle sebe... :)

Teď ještě tu logiku zobrazování:
2. úroveň menu bude mít display: none; a ty musíš nastavit display block při hoveru na a.

Tedy

nav ul ul{ display: none }
nav ul a:hover + ul{ display: block }

//doufám, že jsi to z tohoto pochopil a že to půjde, píšu to v rychlosti ve škole :P

// // mimochodem by jsi neměl používat copyright cílený na tebe, když to není vše tvá práce... :P

Editováno 23.9.2014 14:51
Nahoru Odpovědět
23.9.2014 14:51
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
k.ats
Člen
Avatar
Odpovídá na Honza Bittner
k.ats:23.9.2014 15:10

Diky za prispevek. Translate tam pouzivam z duvodu odstraneni submenu pri opacity 0. Jinak se to v tom miste pri najeti mysi zobrazi i kdyz nema. Prvne jsem pouzival dispay, ale u toho se neda pouzit transition, proto jsem to volil takhle. Dokonce jsem mel puvodne i polozky (li) v submenu, ale protoze mam tu hlavicku celkem splacanou a pruhledne pozadi, neslo mi to ostylovat aby se pozadi nekde neprekryvalo (nechybelo). Tohle mi zatim funguje nejlepe, ale zkusim to jeste predelat. S tim copyrightem mas castecne pravdu, ale vicemene jsem pouzil zatim jen vypln clanku, ktere budu cele predelavat. Jinak ano, pouzil jsem stejne stylovani fontu a nadpisu, uznavam. Zbytek jsem pak delal dle sebe. Doufam, ze jsem te ve skole nijak nevyrusil a neutekla ti nejaka dulezita prednaska :) Ja jsem zase ve vlaku a jedu domu. Dnes uz to asi nestihnu, ale zitra zkusim jeste predelat nebo zrusit to menu.

 
Nahoru Odpovědět
23.9.2014 15:10
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na k.ats
Honza Bittner:23.9.2014 16:51

Na střední škole moc užitečných informací nepochytíš ... :D

Mimochodem, tvé řešení v prohlížečích nepodporujících CSS3 nefunguje... Takže se zobrazuje aj při hoveru na "jakoby" místo menu a zobrazí se...

Pokud chceš mít zobrazování plynulé a u display to nefunguje, stačí k mému řešení přidat ještě opacity - tedy budeš mít něco kód níže...
A bude ti to fungovat ve všech prohlížečích. :) (maximálně kromě toho přechodu, ale to se dá přežít)

nav ul ul{ display: none; opacity: 0; +přechod }
nav ul a:hover + ul{ display: block; opacity: 1; }
Nahoru Odpovědět
23.9.2014 16:51
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
k.ats
Člen
Avatar
Odpovídá na Honza Bittner
k.ats:23.9.2014 17:13

Díky, vyzkouším to tedy ještě jednou tak jak píšeš. Zkusím si ještě pohrát trochu s tím stylováním hlavičky, případně zruším průhledné pozadí nebo vypustím to submenu. Ještě se půjdu dnes domluvit za švagrem jak to bude s tou fotogqlerií, jestli to budeme dělit nebo jak to uděláme. Ale myslím, že by to bylo lepší s dělením. S těmi prolížeči co nepodporují css3 mě to ani nenapadlo, takže to momentální řešení s posunem nebude moci být a musím to udělat pomocí stylu display.
Jen taková technická. Když zruším uprostřed položek li plovoucí obsah, zalomí se seznam např. na 2 sloupečky nebo se to bude muset řešit dvěmi seznamy? Nebo mě ještě napadá nastavit nějakou pevnou šířku aby se to zalomilo samo. No až se s tím zítra budu "trápit" tak něco vyzkouším :-)
Myslel jsem, že už jsi na vysoké a střední máš už za sebou, aspoň podle znalostí :-) Na profil a tvůj věk jsem nekoukal :-)

 
Nahoru Odpovědět
23.9.2014 17:13
Avatar
k.ats
Člen
Avatar
k.ats:24.9.2014 15:40

Menu je předěláno a uděláno jinak. Nepoužil jsem ale vlastnost display, ale visibility, protože při použití vlastnosti display nefungují vůbec přechody ani na to opacity. Vím že by byla lepší vlastnost display (css1) než visibility (css2), ale snad už dnes je css2 všude. Jediné čeho se mi nepovedlo docílit, aby při zmenšení šířky okna (tímpádem i submenu) položky v submenu vycentrovaly. Je to takové nesymetrické. Většinou ale bude šířka okna dostatečná a nebude to tedy vidět. Je čas přesunout se k jiné části webu. Pokud by měl ještě někdo nějakou připomínku nebo nápad jak to udělat lépe, případně správněji, budu rád za reakce a nějaké nakopnutí. Děkuji všem :-)

 
Nahoru Odpovědět
24.9.2014 15:40
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 15 zpráv z 15.