| Autor | Zpráva | ||
|---|---|---|---|
| Martos Profil * |
#1 · Zasláno: 11. 8. 2011, 08:16:28
Na http://kep.mujhost.cz/Test.htm mám menu. Po kliknutí se zobrazí podmenu, po dalším kliknutí se podmenu skryje. Chci ale udělat 2 věci:
1/ Aby se podmenu zobrazilo po najetí/odjetí myši 2/ Aby se text pod menu neodsunul dolů. Podmenu ten text překryje Mám tento kód:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Test</title>
<style type="text/css">
.klik {cursor: pointer; cursor: hand}
.skryvany { DISPLAY: none}
</style>
</head>
<body>
<SCRIPT>
function zobrazSkryj(idecko){
el=document.getElementById(idecko).style;
el.display=(el.display == 'block')?'none':'block';
}
</SCRIPT>
<table border="0" width="300" cellspacing="0" cellpadding="0">
<tr>
<td><span class="klik" onclick="zobrazSkryj('oddil-01')">Menu 1</span></td>
<td><span class="klik" onclick="zobrazSkryj('oddil-02')">Menu 2</span></td>
<td><span class="klik" onclick="zobrazSkryj('oddil-03')">Menu 3</span></td>
</tr>
</table>
<div style="position: relative; top: 4px; left: 0" class="skryvany" id="oddil-01">
<span><a href="/Podmenu11">Podmenu 11</a></span><br>
<span><a href="/Podmenu12">Podmenu 12</a></span><br>
<span><a href="/Podmenu13">Podmenu 13</a></span><br>
<span><a href="/Podmenu14">Podmenu 14</a></span>
</div>
<div style="position: relative; top: 4px; left: 100" class="skryvany" id="oddil-02">
<span><a href="/Podmenu21">Podmenu 21</a></span><br>
<span><a href="/Podmenu22">Podmenu 22</a></span><br>
<span><a href="/Podmenu23">Podmenu 23</a></span><br>
<span><a href="/Podmenu24">Podmenu 24</a></span>
</div>
<div style="position: relative; top: 4px; left: 200" class="skryvany" id="oddil-03">
<span><a href="/Podmenu31">Podmenu 31</a></span><br>
<span><a href="/Podmenu32">Podmenu 32</a></span><br>
<span><a href="/Podmenu33">Podmenu 33</a></span><br>
<span><a href="/Podmenu34">Podmenu 34</a></span>
</div>
<p>Text, text, text, text, text, text, text, text, </p>
</body>
</html>
|
||
| Sir Tom Profil |
#2 · Zasláno: 11. 8. 2011, 09:42:33
Martos:
Ad 1.: Změníš pouze typ události. Místo onclick="zobrazSkryj('oddil-01')"onmouseout="zobrazSkryj('oddil-01')" onmouseover="zobrazSkryj('oddil-01')"Ad 2.: Aby nově zobrazované podmenu překrývalo text musí mít absolutní pozicování. Místo relative tedy do všech divů s podmenu napiš absolute. (Budeš muset přepsat i hodnoty top a left, ale to uvidíš, až to vyzkoušíš. Jestli necháš kód takto, tak hodnoty top a left se budou počítat od levého horního okraje prohlížeče. Budeš-li chtít s pozicí celého menu dále manipulovat, bylo by dobré, kdybys jej celý uzavřel do divu s position: relative; (resp. absolute - záleží na situaci). V tomto případě se hodnoty top a left u podmenu budou počítat od levého horního okraje divu s celým menu. |
||
| Martos Profil * |
#3 · Zasláno: 11. 8. 2011, 12:19:30
Sir Tom:
Tak jsem to tam zapracoval. Většina je ok, jen když chci myší přejet na to podmenu a opustím myší hlavní název menu, tak se podmenu skryje a není šance na podmenu přejít. Aktuální verzi jsem nahrál na http://kep.mujhost.cz/Test.htm. Kde je chyba? Naformátování vzhledu už bych snad zvládl. Help |
||
| Sir Tom Profil |
#4 · Zasláno: 11. 8. 2011, 12:57:21 · Upravil/a: Sir Tom
Martos:
Chyba je v onmouseout="zobrazSkryj('oddil-01')"Jakmile kurzor opustí element s touto událostí, ona událost se zavolá (a v tomto případě vykoná funkci zobrazSkryj). Bude nutné spravit podmínky v JS. Určitě tam musí být podmínka: Když je kurzor na podmenu, tak jej neskryvej. EDIT: Jináč - již se to zde řešilo: http://diskuse.jakpsatweb.cz/?action=vthread&forum=8&topic=13435 Bez JS je již hotové řešení tady: www.tvorba-webu.cz/css/vysouvaci-menu.php A spousta dalších řešení na Googlu nebo tady na foru po zadání "vysouvací menu" do vyhledavače. (U těchto hotových ale řešení patrně budeš muset znova spravovat pozicování, aby to překrývalo text...) |
||
| Martos Profil * |
#5 · Zasláno: 11. 8. 2011, 12:59:05
Sir Tom:
a jak na to? TO už nedám. |
||
| Sir Tom Profil |
#6 · Zasláno: 12. 8. 2011, 15:08:54
Martos:
„a jak na to? TO už nedám.“ Viz můj předchozí příspěvek. Nejrychlejší bude použít již hotové řešení... |
||
|
Časová prodleva: 14 let
|
|||
0