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
Petr Nymsa
Tvůrce
Avatar
Petr Nymsa:19.3.2013 8:33

Zdravím už delší dobu se plácám s tvorbou rozbalovacího menu pomocí html a css. Teď jsem ve stádiu, kdy to už mírně funguje. Našel jsem si jeden velmi podobný tutoriál, ale snažím se to vytvořit pouze vlastní hlavou.

Struktura menu

<div id="menu">
           <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">Item 1</a>
               <ul>
                <li><li><a href="#">Polozka</a></li>
                 <li><li><a href="#">Polozka</a></li>
                  <li><li><a href="#">Polozka</a></li>
               </ul>
               </li>
               <li><a href="#">Clanky</a>
               <ul>
                 <li><li><a href="#">Polozka</a></li>
                 <li><li><a href="#">Polozka</a></li>
                  <li><li><a href="#">Polozka</a></li>
               </ul>
               </li>
               <li><a href="#">About</a></li>
           </ul>
           </div>

CSS

#menu
{
        width:1000px;
        height:40px;
        display:block;
        position:relative;
        top:60px;
}

#menu ul
{
        display:block;
        padding: 0px 20px;
        position:relative;

}

#menu ul li
{
        display:inline;
        float:left;
        padding-left:15px;
}

#menu ul ul
{
        display:none;
        position:relative;
        top:15px;
}

#menu ul li:hover > ul
{
        display:block;
}

#menu ul li {
        float: left;
        display:block;
        position:relative;
        padding:5px 8px;
}



#menu ul ul li
{
        float:none;
        position:relative;
        background:#999;
}

#menu ul ul li:hover
{
        float:none;
        position:relative;
        background:#666;
}

#menu ul li a
{
        color:#FFF;
}

#menu ul li a:hover
{
    color:#900;
}

Stránku lze zobrazit tady
http://www.zirko.g6.cz/Test/test.html

Vím, že to CSS je vcelku prasárna , ale nevím jak to udělat :D ... děkuji za jakýkoliv nápady :)

Odpovědět
19.3.2013 8:33
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:19.3.2013 18:28

Ahoj, zkus toto : http://www.itnetwork.cz/dev-lighter/75

Mělo by to fungovat ;)

Nahoru Odpovědět
19.3.2013 18:28
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Petr Nymsa
Tvůrce
Avatar
Odpovídá na Honza Bittner
Petr Nymsa:19.3.2013 18:30

Díky zkusím to :) už i to svoje mám mírně vylepšený ale furt to není ono :D

Nahoru Odpovědět
19.3.2013 18:30
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Petr Nymsa
Neaktivní uživatel:19.3.2013 18:34

Chvilku jsem si tu s tím hrál a když jsem prvku #menu ul li nastavil pevnou šířku na 60px tak to alespoň neodskakovalo ;) Jinak s tímhle ti asi moc nepomůžu, jak jsem ti už říkal tak s tím nemám zkušenosti :D

Nahoru Odpovědět
19.3.2013 18:34
Neaktivní uživatelský účet
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:19.3.2013 18:34

to moje mi fungovalo na 100% ;) asi na 3 nebo 4 řády (podnabídky)

Nahoru Odpovědět
19.3.2013 18:34
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:19.3.2013 21:48

tak co ? :) funguje ?

Nahoru Odpovědět
19.3.2013 21:48
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Petr Nymsa
Tvůrce
Avatar
Petr Nymsa:19.3.2013 21:50

Jo funguje :) Dokonce i v IE 7 což bylo potřeba :D ... vadí když si to převezmu ? Celkem to upravím, ale jádro nechám. A navíc, opouštím od stávající šablony a zítra kreslím novou. Je to začarovaný kruh :D

Nahoru Odpovědět
19.3.2013 21:50
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Petr Nymsa
Tvůrce
Avatar
Petr Nymsa:20.3.2013 11:23

Díky Honza Bittner za tip jak na tohle menu. Každopádně se snažím upravit šířku vyjíždějíciho sloupce. Vše funguje dobře, pokud v té položce není mezera. Když tam není mezera mezi slovy, můžou být jakkoliv dlouhé a funguje to skvěle. Pro lepší ukázku http://www.zirko.g6.cz/Test/test.html Pod sekcí Články to funguje pouze bez mezer. V sekci tvorba, když dám mezi slova mezery to absolutně nefunguje. Nevíte co s tím ?

Nahoru Odpovědět
20.3.2013 11:23
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:20.3.2013 16:38

a zkoušel jsi tu mojí verzi ? fungovalo mi to i s mezerama když jsem to používal

Nahoru Odpovědět
20.3.2013 16:38
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Petr Nymsa
Tvůrce
Avatar
Odpovídá na Honza Bittner
Petr Nymsa:20.3.2013 17:05

Jo použil. Pravděpodbně je problém s ostatním stylováním.

Nahoru Odpovědět
20.3.2013 17:05
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:20.3.2013 17:07

jdu to zkusit u sebe ..

Nahoru Odpovědět
20.3.2013 17:07
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Petr Nymsa
Tvůrce
Avatar
Odpovídá na Honza Bittner
Petr Nymsa:20.3.2013 17:07

Chceš poslat celý CSS a HTML ? Opravdu nevím v čem je problém :/

Nahoru Odpovědět
20.3.2013 17:07
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:20.3.2013 17:13

http://prntscr.com/x36yr

ten můj CSS funguje ... můžeš mi to poslat ...
kdyžtak mám skype hobi-7

Nahoru Odpovědět
20.3.2013 17:13
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Petr Nymsa
Tvůrce
Avatar
Odpovídá na Honza Bittner
Petr Nymsa:20.3.2013 17:20

http://www.itnetwork.cz/dev-lighter/79 a http://www.itnetwork.cz/dev-lighter/78

Nahoru Odpovědět
20.3.2013 17:20
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:20.3.2013 17:26

zkoušel jsem vložit tvé menu do mého kódu a blbne to také, takže jsi někde něco upravil

vlož do css místo součastného menu toto :

http://www.itnetwork.cz/dev-lighter/80

a pak přepisuj jen barvy ...
po změně nějaké výšky/šířky vždy kontroluj jestli to pořád dělá co má :D

Nahoru Odpovědět
20.3.2013 17:26
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Petr Nymsa
Tvůrce
Avatar
Odpovídá na Honza Bittner
Petr Nymsa:20.3.2013 17:39

Díky moc! Ale stejěn by mě zajímalo čím to bylo :D

Nahoru Odpovědět
20.3.2013 17:39
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:20.3.2013 17:41

nwm .. možná jsi něco omylem přepsal .. netuším no ;)

Nahoru Odpovědět
20.3.2013 17:41
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Petr Nymsa
Tvůrce
Avatar
Odpovídá na Honza Bittner
Petr Nymsa:20.3.2013 17:44

Už vím celý problém ... jak udělat aby se to vyjíždějící menu přizpůsobilo podle obsahu ?

Nahoru Odpovědět
20.3.2013 17:44
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:20.3.2013 17:47

zkus

width: auto;
padding: 0, 10, 0, 10;

nebo něco na ten způsob

Nahoru Odpovědět
20.3.2013 17:47
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Petr Nymsa
Tvůrce
Avatar
Odpovídá na Honza Bittner
Petr Nymsa:20.3.2013 17:49

To jsem právě zkoušel už sám a nefunguje. Ono to ení zas tak potřeba, ale bylo by to hezčí :) I tak díky za pomoc, teď to trochu přestyluju a snad funkčně :D

Nahoru Odpovědět
20.3.2013 17:49
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Petr Nymsa
Tvůrce
Avatar
Petr Nymsa:20.3.2013 17:57

Ještě ať nezakládám topic... názor na základní design ?

Nahoru Odpovědět
20.3.2013 17:57
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:20.3.2013 17:59

... jako nic moderního ... ale určitě to není špatné ;)

ale prostě dnes letí světlé weby .. (něco ve stylu google, devbook, seznam ...)

Nahoru Odpovědět
20.3.2013 17:59
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Petr Nymsa
Tvůrce
Avatar
Odpovídá na Honza Bittner
Petr Nymsa:20.3.2013 18:00

hmm, tak udělám inverzi barev :D ... pozadí bílé, text černý, modrá barva světlejší :) Díky

Nahoru Odpovědět
20.3.2013 18:00
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:20.3.2013 18:02

koukni na

http://www.webdesign-inspiration.com/

... Drahoš mi jí poradil a je dobrá na inspiraci ;)

Nahoru Odpovědět
20.3.2013 18:02
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Petr Nymsa
Tvůrce
Avatar
Odpovídá na Honza Bittner
Petr Nymsa:20.3.2013 18:09

Jsou tam hodně pěkný weby ale moje grafické nadání není schopno toto vytvořit :D

Nahoru Odpovědět
20.3.2013 18:09
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:20.3.2013 18:10

:D ...

Nahoru Odpovědět
20.3.2013 18:10
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Tato diskuze byla označena moderátorem jako nekonstruktivní a myslíme si, že nemá pro veřejnost příliš vysokou hodnotu. Členy můžete samozřejmě stále oslovit soukromě a to formou zpráv nebo chatu.

Zobrazeno 26 zpráv z 26.