| Autor | Zpráva | ||
|---|---|---|---|
| Rosty Profil |
#1 · Zasláno: 11. 7. 2012, 21:37:02
Dobrý den,
snažím si udělat vertikální menu s drop down (hover) efektem na můj web, ale střetl jsem se s problémem u třetí "vrstvy". Chci aby menu vypadalo takhle: 1. vrstva.Domu | Blabla 2. vrstva.Neco 2. vrstva.Neco dalsiho -- 3. vrstva.Jeste neco Ale dopracoval jsem se jenom k druhé vrstvě. Třetí se mi buď překryje s textem na řádku níže, nebo se napasíruje mezi ně. Kód: <!DOCTYPE html>
<HTML>
<HEAD>
<STYLE type="text/css">
BODY div#nav {
position: relative;
width: 1024px;
height: 54px;
margin: 0 auto 20px 0;
z-index: 20;
}
BODY div#nav UL {
position: absolute;
margin: 0;
padding: 0;
list-style: none;
}
BODY div#nav UL LI {
margin: 15px 15px 0px 15px;
display: inline;
float: left;
}
BODY div#nav UL LI UL
{
visibility: hidden;
border: 1px solid gray;
}
BODY div#nav UL LI:hover UL
{
visibility: visible;
}
BODY div#nav UL LI UL LI {
margin: 2px 10px 2px 10px;
display: block;
float: none;
}
</STYLE>
</HEAD>
<BODY>
<DIV id='nav'>
<UL>
<LI>
Domu
<UL>
<LI>Me testa</LI>
<LI>Me testa</LI>
<LI>Me testaaaaaaaaaaaa</LI>
<LI>Me testa</LI>
<LI>Me testa</LI>
<LI>Me testa</LI>
<LI>Me testa</LI>
</UL>
</LI>
<LI>|</LI>
<LI>
Novinky
<UL>
<LI>Me testa</LI>
<LI>Me testa</LI>
<LI>Me testa</LI>
<LI>Me testa</LI>
<LI>Me testa</LI>
</UL>
</LI>
<LI>|</LI>
<LI>
Jak hrat
<UL>
<LI>Me testa</LI>
<LI>
Me testa
<UL>
<LI>Testime</LI>
</UL>
</LI>
<LI>Me testa</LI>
</UL>
</LI>
</UL>
</DIV>
</BODY>
</HTML> |
||
|
Časová prodleva: 5 dní
|
|||
| mking Profil |
spravil so mti to cez jQuery a css jednoduchšie a krajšie ;) menu.rar
|
||
| panther Profil |
Rosty:
dodej odkaz na tve snazeni, 100 radku kodu se mi prochazet nechce. mking: a uzivatele nebo roboti vyhledavacu bez JS? Ti budou bez menu? Sikovne reseni (podotykam, ze rar jsem nestahoval, ale tahat do tohoto JS je naprosto zbytecne. O to vic cely framework). |
||
| Rosty Profil |
#4 · Zasláno: 16. 7. 2012, 17:25:35
Odkaz: http://testingftw.4fan.cz/
|
||
|
Časová prodleva: 3 dny
|
|||
| panther Profil |
#5 · Zasláno: 19. 7. 2012, 20:28:43
Rosty:
možností je více, můžeš udělat třeba něco na tento způsob: #nav ul ul li {position: relative;}
#nav ul ul ul {position: absolute; top: 0; left: 100%;} |
||
| Rosty Profil |
#6 · Zasláno: 20. 7. 2012, 21:41:09
Chtěl bych se zeptat na dvě věci:
1. Když použiju u druhé vrstvy visibility: hidden, proč u třetí musím použít display: none? Resp. proč taky nefunguje visibility? 2. Je správné používat margin se zápornými čísly? (např. margin: -20px 0 0 5px) |
||
| panther Profil |
#7 · Zasláno: 21. 7. 2012, 15:34:56
Rosty:
„1. Když použiju u druhé vrstvy visibility: hidden, proč u třetí musím použít display: none?“ nemusíš. Napsal jsem jednu z alternativ, visiblity bude fungovat také.
„2. Je správné používat margin se zápornými čísly? (např. margin: -20px 0 0 5px)“ ano, jedná o regulérní zápis. |
||
|
Časová prodleva: 12 let
|
|||
0