Diskuze: Drop down menu HTML + CSS

HTML a CSS HTML a CSS Drop down menu HTML + CSS American English version English version

Avatar
Petr Nymsa
Redaktor
Avatar
Petr Nymsa:

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
Redaktor
Avatar
Nahoru Odpovědět 19.3.2013 18:28
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na Honza Bittner
Petr Nymsa:

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
Jiří Gracík
Redaktor
Avatar
Odpovídá na Petr Nymsa
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:

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

Nahoru Odpovědět 19.3.2013 18:34
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Nahoru Odpovědět 19.3.2013 21:48
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Petr Nymsa
Redaktor
Avatar
Petr Nymsa:

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
Redaktor
Avatar
Petr Nymsa:

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
Redaktor
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na Honza Bittner
Petr Nymsa:

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
Redaktor
Avatar
Nahoru Odpovědět 20.3.2013 17:07
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na Honza Bittner
Petr Nymsa:

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
Redaktor
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na Honza Bittner
Petr Nymsa:

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
Redaktor
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:

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

Nahoru Odpovědět 20.3.2013 17:41
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na Honza Bittner
Petr Nymsa:

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
Redaktor
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:

zkus

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

nebo něco na ten způsob

Nahoru Odpovědět 20.3.2013 17:47
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na Honza Bittner
Petr Nymsa:

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  +1 20.3.2013 17:49
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Petr Nymsa
Redaktor
Avatar
Petr Nymsa:

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
Redaktor
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:

... 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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na Honza Bittner
Petr Nymsa:

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
Redaktor
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na Honza Bittner
Petr Nymsa:

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
Redaktor
Avatar
Nahoru Odpovědět 20.3.2013 18:10
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
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.