Diskuze: Drop down menu HTML + CSS

Petr Nymsa

Tvůrce

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ěkuji za jakýkoliv nápady

Odpovědět

19.3.2013 8:33

Pokrok nezastavíš, neusni a jdi s ním vpřed

Honza Bittner

Tvůrce

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.

Petr Nymsa

Tvůrce

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

Nahoru Odpovědět

19.3.2013 18:30

Pokrok nezastavíš, neusni a jdi s ním vpřed

Neaktivní uživatel

Tvůrce

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

Nahoru Odpovědět

19.3.2013 18:34

Neaktivní uživatelský účet

Honza Bittner

Tvůrce

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.

Honza Bittner

Tvůrce

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.

Petr Nymsa

Tvůrce

Petr Nymsa:19.3.2013 21:50

Jo funguje Dokonce i v IE 7 což bylo potřeba ... 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

Nahoru Odpovědět

19.3.2013 21:50

Pokrok nezastavíš, neusni a jdi s ním vpřed

Petr Nymsa

Tvůrce

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

Honza Bittner

Tvůrce

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.

Petr Nymsa

Tvůrce

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

Honza Bittner

Tvůrce

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.

Petr Nymsa

Tvůrce

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

Honza Bittner

Tvůrce

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.

Petr Nymsa

Tvůrce

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

Honza Bittner

Tvůrce

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á

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.

Petr Nymsa

Tvůrce

Petr Nymsa:20.3.2013 17:39

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

Nahoru Odpovědět

20.3.2013 17:39

Pokrok nezastavíš, neusni a jdi s ním vpřed

Honza Bittner

Tvůrce

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.

Petr Nymsa

Tvůrce

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

Honza Bittner

Tvůrce

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.

Petr Nymsa

Tvůrce

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ě

Nahoru Odpovědět

20.3.2013 17:49

Pokrok nezastavíš, neusni a jdi s ním vpřed

Petr Nymsa

Tvůrce

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

Honza Bittner

Tvůrce

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.

Petr Nymsa

Tvůrce

Petr Nymsa:20.3.2013 18:00

hmm, tak udělám inverzi barev ... 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

Honza Bittner

Tvůrce

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.

Petr Nymsa

Tvůrce

Petr Nymsa:20.3.2013 18:09

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

Nahoru Odpovědět

20.3.2013 18:09

Pokrok nezastavíš, neusni a jdi s ním vpřed

Honza Bittner

Tvůrce

Honza Bittner:20.3.2013 18:10

...

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.

Nejčastěji vyhledáváné

Diskuze: Drop down menu HTML + CSS