| Autor | Zpráva | ||
|---|---|---|---|
| David1256 Profil |
#1 · Zasláno: 2. 8. 2010, 15:29:06
Potřebuji aby mi menu fungovalo podle tohodle obrázku.
Tzn. Ať přejedu nad jakýmkoliv odkazem z horní lišty zobrazí se mi dolní lišta úplně od leva né od okraje odkazu na kterém je kurzor. Zatím to mám takto - viz obr níže, potřebuji to udělat podle obrázku výše. 
můj html kód: <ul id="nav">
<li><a href="#"><img src="img/galleries.jpg"></a>
<ul>
<li><a href="#"><img src="img/flowers.jpg"></a></li>
<li><a href="#"><img src="img/nature.jpg"></a></li>
<li><a href="#"><img src="img/wildanimals.jpg"></a></li>
<li><a href="#"><img src="img/people.jpg"></a></li>
</ul>
</li>
<li><a href="#"><img src="img/mybio.jpg"></a>
<ul>
<li><a href="#"><img src="img/welcome.jpg"></a></li>
<li><a href="#"><img src="img/latestworks.jpg"></a></li>
<li><a href="#"><img src="img/myinformation.jpg"></a></li>
<li><a href="#"><img src="img/friendlinks.jpg"></a></li>
</ul>
</li>
<li><a href="#"><img src="img/folio.jpg"></a></li>
<li><a href="#"><img src="img/exhibitions.jpg"></a></li>
<li><a href="#"><img src="img/contacts.jpg"></a></li>
</ul>css: #nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
}
#nav li {
float: left;
}
#nav li ul {
position: absolute;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}a JS script: <script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script> |
||
| habendorf Profil |
#2 · Zasláno: 2. 8. 2010, 15:59:44
Začal bych position:relative pro #nav ul a pro ty hovery pak left:0 (nebo pár px dle potřeby).
|
||
| David1256 Profil |
#3 · Zasláno: 2. 8. 2010, 16:15:42 · Upravil/a: David1256
opravený styl:
#nav, #nav ul {
position:relative;
padding: 0;
margin: 0;
list-style: none;
}
#nav li:hover ul {
left: -500;
top:40;
}
#nav li:hover ul, #nav li.sfhover ul {
left: -500;
top:40;
Problém je v tom, že ta lišta při relative odskočí uplně mimo a musí se hodně vyrovnávat pomocí left a top u hoveru. Sice sem to dostal tam, kam sem chtěl, ale tohle asi neni optimální řešení ne? Podle toho že jsi psal - "(nebo pár px dle potřeby)" |
||
| David1256 Profil |
#4 · Zasláno: 2. 8. 2010, 16:21:05
Hmm tak to bylo krátkozraký zjistil jsem, že to přes ten top a left u hoveru stejně ukazuje jen IE a ostatní ne zkrátka se ta lišta posouvá uplně pryč viz obr.
|
||
| David1256 Profil |
#5 · Zasláno: 2. 8. 2010, 16:24:02
Jo tak to mám, už sem na to přišel to bylo tim relativem ten tam nemá být a potom stačí už jen left:0; díky habendorfe.
|
||
| David1256 Profil |
#6 · Zasláno: 2. 8. 2010, 17:33:56
Tak se mi vyskytl zase problém. V IE se mi zobrazuje od položky v menu FOLIO a dál odkazy pod sebe né vedle sebe.
Koukněte sami na zdroják živé ukázky opravdu netuším čím to je. |
||
| David1256 Profil |
#7 · Zasláno: 3. 8. 2010, 12:50:18
No tak sem to nakonec vyřešil, ale asi zase nějak nešikovně změnil sem doctype na xhtml -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Ale to musí jít i bez toho nějak ne? |
||
| Bubák Profil |
#8 · Zasláno: 3. 8. 2010, 12:55:39
Tak si vyber:
<!DOCTYPE HTML> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
||
| David1256 Profil |
#9 · Zasláno: 3. 8. 2010, 13:04:32
Díky ty tvoje varianty fungují všechny kromě téhle -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Tu sem používal bohužel já, proto mi to nefungovalo. Je to divný, nevíš proč to s tamtou nefunguje? |
||
| David1256 Profil |
#10 · Zasláno: 3. 8. 2010, 13:36:24
No tak zase problém ono to sice v IE funguje, ale jamkile se klikne mimo to menu tak to přestane reagovat. Já už nevim co s tim tyjo.
|
||
| David1256 Profil |
#11 · Zasláno: 3. 8. 2010, 13:42:41 · Upravil/a: David1256
Zajímavý stačilo sem přidat relative a už to de tak, jak má aspoň doufám, že se tam nic nevyskytne.
#nav, #nav ul {
position:relative;
padding: 0;
margin: 0;
list-style: none;
}Já totiž, jak to nešlo a zkoušel sem různý věci, tak sem to relative smáznul :-(. |
||
|
Časová prodleva: 16 let
|
|||
0