Pesquisei muito sobre o menu dropdown aqui no fórum mas não achei uma resposta para meu problema.
Eu tenho um menu composto de imagens e gostaria de atribuir o dropdown nele.
Página com problema: http://luisa.x10host...index_works.php
ao passar o mouse em "Works", o drop down funciona... mas o fato de usar <ul> faz com que as imagens do menu fiquem desalinhadas (o home_ não deveria estar em cima, mas sim na linha dos outros textos).
Ao passar o mouse em "Gast", as imagens se apresentam distorcidas no firefox, e no ie nem ousam aparecer.... (detalhe que a "Gast" também deveria estar alinhada ao resto do menu, e não em baixo).
Detalhe: ao passar o mouse o menu surge com os links, mas ao clicar na imagem que possui o dropdown, ela dá em outro lugar. isso é proposital.
Então eu gostaria de saber: como usar um dropdown com links em imagens de modo que funcionem, e como fazer isso de uma forma que não altere a diagramação do menu/tamanho da imagem?
HTML da página (com o javascript do dropdown):
...
<style type="text/css"><!--@import url("style.css");</style><script language="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></head><body><div id="content"><img class="borda" src="images/name.gif" width="462" height="32" alt="banner topo" border="0" usemap="#Map" /><br /> <a class="menu" href="index2.html"><img src="images/home.gif" alt="home" width="51" height="19" border="0" /></a><img src="images/space.gif" alt="space" width="13" height="19" /><ul id="nav"><li><a href="index_works.php" class="menu"><img src="images/works.gif" alt="works" width="64" height="19" border="0" /></a> <ul> <li><a href="index_works.php?cat=poetevei">poetevei</a></li> <li><a href="index_works.php?cat=wand_zeichungen">wand zeichungen</a></li> <li><a href="index_works.php?cat=uber_meive_arseit">über meive arseit</a></li> <li><a href="index_works.php?cat=malevei">malevei</a></li> <li><a href="index_works.php?cat=zeichungen">zeichungen</a></li> <li><a href="index_works.php?cat=installatiaren">installatiaren</a></li> </ul> </li></ul><img src="images/space.gif" alt="space" width="13" height="19" /><a class="menu" href="index3.php?mischapage=ausstellungen"><img src="images/ausstellungen.gif" alt="home" width="166" height="19" border="0" /></a> <img src="images/space.gif" alt="space" width="13" height="19" /><a class="menu" href="index3.php?mischapage=biografie"><img src="images/biografie.gif" alt="biografie/kontakt" width="218" height="19" border="0" /></a><img src="images/space.gif" alt="space" width="13" height="19" /><ul id="nav"><li><a href="index3.php?mischapage=gast" class="menu"><img src="images/gast.gif" alt="works" width="64" height="19" border="0" /></a> <ul> <li><a href="index.html"><img src="images/home.gif" alt="home" width="166" height="19" border="0" /></a></li> <li><a href="index3.php?mischapage=works"><img src="images/works.gif" alt="home" width="166" height="19" border="0" /></a></li> <li><a href="index.html"><img src="images/ausstellungen.gif" alt="home" width="166" height="19" border="0" /></a></li> </ul> </li></ul></div></body></html>style.css
body { color:#454545; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; text-align:center; margin: 0; line-height:35px;}div#content{ position:absolute; top:0; left:50%; width:778px; margin-left:-389px; text-align:left;}#nav, #nav ul { padding: 0 0 0 0; margin: 0 0 0 0; list-style: none;}#nav a { display: block; width: 10em;}#nav li { float:left; width: 64px;} #nav li ul { position: absolute; width: 10em; left: -999em;}#nav li:hover ul { left: auto;}#nav li:hover ul, #nav li.sfhover ul { left: auto;}XXXXXXXXXXXXX EDITADO 8/9/08 XXXXXXXXXXXXX
Pesquisando como fazer meu menu, descobri o método da div com visibility:hidden;
Olha:
http://luisa.x10host...wand_zeichungen
O código desta página funciona... mas ainda não é o que eu preciso. Para ser, precisaria que ele não ocupasse espaço embaixo (mas sim "flutuasse" sobre o conteúdo do include php ou qualquer outro que estivesse embaixo) e ele deveria estar sendo exibido enquanto o mouse estivesse sobre o link E sobre a própria div que estava escondida. Mas, como eu não tenho muito conhecimento em javascript ainda, não fui muito feliz em minhas tentativas...
Alguém sabe, por favor, como fazer o menu dropdown funcionar com imagem, tanto no método de <ul> e <li> quanto no visibility:hidden; ?
A respeito do método visibility:hidden;, eis o código usado:
CSS
#dropdown { position: relative; top: 5px; left: 145px; width: 200px; height: 100px; zindex: 2; background: #FFFFFF; border: 0px; visibility: hidden;}SCRIPT
<script> function camada( sId ) { var sDiv = document.getElementById( sId ); if( sDiv.style.visibility == "hidden" ) { sDiv.style.visibility = "visible"; } else { sDiv.style.visibility = "hidden"; } } </script>HTML
<a onMouseOver="camada('dropdown');" href="index_works.php" class="menu"><img src="images/works.gif" alt="works" width="64" height="19" border="0" /></a><DIV ID="dropdown"> <a href="index.html"><img src="images/home.gif" alt="home" width="51"" height="19" border="0" /></a> <br /> <a href="index3.php?mischapage=works"><img src="images/works.gif" alt="home" width="64"" height="19" border="0" /></a> <br /> <a href="index.html"><img src="images/ausstellungen.gif" alt="ausstellungen" width="166"" height="19" border="0" /></a> <br /> <a href="index_works.php?cat=poetevei">poetevei</a> <a href="index_works.php?cat=wand_zeichungen">wand zeichungen</a> <a href="index_works.php?cat=uber_meive_arseit">über meive arseit</a> <a href="index_works.php?cat=malevei">malevei</a> <a href="index_works.php?cat=zeichungen">zeichungen</a> <a href="index_works.php?cat=installatiaren">installatiaren</a> </DIV>
Edição feita por: K-gome, 08/09/2008, 20:41.
