• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

GpL

[problema] menu dropdown horizontal

11 mensagens neste tópico

Boas pessoal.

É o seguinte, tinha um pequeno menu feito num site,mas agora tenho que alterar para um menu dropdown sem alterar o design do site.. deixo aqui um preview para saberem como é o site..

O meu problema é que já estou farto de pesquisar vários tutoriais e posts aqui no fórum sobre o assunto e não consigo por nenhum a funcionar aqui no meu site..

o código do menu actual é este:

#menu {
padding: 0px 0px 0px 10px;
color: #ffffff;
font-variant: normal;
text-align: center;
line-height: 33px;
background-color: #036ecd;
position: static;
font-family: Verdana;
font-size: 14px;
}

#menu a{
color: #FFFFFF;
text-decoration: none;
padding: 7px 10px 10px 10px;
line-height: 33px;
}

#menu a:hover{
color: #FFFFFF;
background: #005097 no-repeat left top;
height: 20px;
}

#menu a:active { 
background: #005097;
color: #FFFFFF; 
}


<div id="container">
<div id="header">
</div>
<div id="menu"><a target="frame" href="inicio.php">Início</a>| <a target="frame" href="noticias.php">Notícias</a>
|<a href="historia.php" target="frame">Orgãos</a> | <a href="patrimonio.php" target="frame">Freguesia</a>| 
<a href="localizacao.php" target="frame">Espaço do cidadão</a>    | <a href="contactos.php" target="frame">Turismo e Lazer </a>
| <a href="contactos.php" target="frame">Contactos</a>
</div>

Alguma dica de como transformar isto num menu dropdown ?

Eu consegui +/- com um em javascript e css mas tem bug no IE, o menu aparecia desalinhado.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

A dica que te dou é pesquisar no google.

Existem n tutoriais e templates de dropdown menus.

Se fores utilizador do dreamweaver tas com sorte... dá para fazer isso.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Já fiz um..

<script type="text/javascript"> 
function vertical() { 

   var navItems = document.getElementById("nav").getElementsByTagName("li"); 
    
   for (var i=0; i< navItems.length; i++) { 
      if(navItems[i].className == "submenu") { 
         navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";} 
         navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";} 
      } 
   } 

} 

function horizontal() { 

   var navItems = document.getElementById("barra").getElementsByTagName("li"); 
    
   for (var i=0; i< navItems.length; i++) { 
      if((navItems[i].className == "menuvertical") || (navItems[i].className == "submenu")) 
      { 
         if(navItems[i].getElementsByTagName('ul')[0] != null) 
         { 
            navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";} 
            navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";} 
         } 
      } 
   } 

} 

</script> 
<body onload="vertical();horizontal();"> 

ul.menubar {
font-size:80%;
margin:0;
padding:0;
}
ul.menubar .menuvertical {
background-color:#036ECD;
color:#FFFFFF;
float:left;
height:px;
left:0;
margin:0;
padding:0;
top:0;
width:100px;
background-repeat: no-repeat;
}
ul.menubar ul.menu 
{ 
   display: none; 
   position: absolute; 
   margin: 0px; 
} 

ul.menubar a 
{
padding: 8px;
display:block;
text-decoration: none;
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
background-color:#036ECD;
}
ul.menubar a:hover {
background:#005097 none no-repeat scroll left top;
color:#FFFFFF;
}
ul.menu, 
ul.menu ul {
height:5px;
margin:0;
padding:0;
width:150px;
}
ul.menu li {
background-color:#036ECD;
border:0 none;
}
ul.menu li a {
display:block;
padding:4px 4px 4px 3px;
text-decoration:none;
}
* html ul.menu li {
float:left;
height:1%;
}
* html ul.menu li a {
height:1%;
}
ul.menu ul {
display:none;
left:148px;
position:absolute;
top:0;
}
ul.menu li.submenu ul { display: none; }
ul.menu li.submenu {
/*background:transparent url(imagens/submenu.png) repeat-x scroll center center;*/
color:#FFFFFF;
font-size:12px;
left:-7px;
top:20px;
}
ul.menu li a:hover {
/*background-image:url(imagens/Submenuover.png);*/
color:#ffffff;
}

No firefox tá a 100%, no IE o submenu não aparece alinhado com o menu.. alguém sabe qual é o erro ?

http://img361.imageshack.us/img361/7930/70730645xy9.jpg

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Já agora deixo aqui a tabela onde uso o menu tambem..

<div id="container">
<div id="header"></div>
<table width="100%" height="30" border="0" cellpadding=0 cellspacing=0 bgcolor="#036ecd">
  <tr>
    <td width="15"> </td>
    <td>
<ul id="barra" class="menubar"> 
<li class="menuvertical">
  <div align="center"><a href="inicio.php" target="frame">Inicio</a> </div>
</li> 
	<li class="menuvertical" >
	  <div align="center"><a href="#">Orgãos</a> 
      <ul id="nav" class="menu">
   	 	      <li class="submenu">
   	 	        <a href="executivo.php" target="frame">Executivo</a></li>
   	 	      <li class="submenu">
   	 	        <a href="assembleia.php"target="frame">Assembleia de Freguesia</a>   	 	      </li>
                <li class="submenu">
   	 	        <a href="galeria.php" target="frame">Galeria de Presidentes</a></li>
        </ul>
	    </div>
	</li> 

<div align="center">
  
</div>
   <li class="menuvertical">
     <div align="center"><a href="#">Freguesia</a> 
         <ul id="nav" class="menu"> 
            <li class="submenu"><a href="historia.php"target="frame">História</a></li>		 
            <li class="submenu"><a href="heraldica.php"target="frame">Heráldica</a></li>
            <li class="submenu"><a href="localizacao.php"target="frame">Localização</a></li>
		<li class="submenu"><a href="estatisticas.php"target="frame">Estatísticas</a></li>
            <li class="submenu"><a href="publicacoes.php"target="frame">Publicações</a></li>
         </ul>
     </div>
   </li> 
   <li class="menuvertical">
     <div align="center"><a href="#">Utilidades</a> 
         <ul id="nav" class="menu"> 
         <li class="submenu"><a href="escolas.php"target="frame">Escolas</a></li>
         <li class="submenu"><a href="farmacias.php"target="frame">Farmácias</a></li>
         <li class="submenu"><a href="contactosuteis.php"target="frame">Contactos Úteis</a></li>
         <li class="submenu"><a href="transportes.php"target="frame">Transportes</a></li>
         </ul>
         </div>
<li class="menuvertical" >
  <div align="center"><a href="#">Turismo & Lazer</a>
      	<ul id="nav" class="menu"> 
         <li class="submenu"><a href="artesanato.php"target="frame">Artesanato</a></li>
         <li class="submenu"><a href="dormir.php"target="frame">Onde dormir</a></li>
         <li class="submenu"><a href="comer.php"target="frame">Onde comer</a></li>
         <li class="submenu"><a href="zonas.php"target="frame">Zonas de interesse</a></li>
         <li class="submenu"><a href="festas.php"target="frame">Festas/Romarias</a></li>
         </ul>
         </div>
</li>		
<li class="menuvertical" >
  <div align="center"><a href="noticias.php"target="frame">Notícias</a></div>
</li>
    <li class="menuvertical" >
  <div align="center"><a href="contactos.php"target="frame">Contactos</a></div>
</li>
</ul> 
</td>
  </tr>
</table>

Se alguém ajudasse agradecia bastante.. tou farto de andar a volta disto e não consigo corrigir este bug.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

resolvido.

problema: o align center nos divs dentro da tabela, tive que tirar e ficou a dar bem.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

já agora gostaria de saber se alguém me podia ajudar num problema parecido. Eu tou a desenvolver uma intranet em joomla e tenho um menu dropdown que funciona 100% em firefox e css e quando visualizo em internet explorer desconfigura tudo, quando passo por cima de um menu o menu de baixo aparece e quando tiro o cursor desaparece, mas tem vezes e é a maioria das vezes passo o cursor por cima e quando tiro o submenu continua no mesmo sitio para ajudar a perceber o erro deixo aqui um screenshot:

prntscrennnjg5.jpg

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

eu tenho esse evento:

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {

var sfEls = document.getElementById("mainlevelmainnav").getElementsByTagName("LI");

for (var i=0; i<sfEls.length; i++) {

sfEls.onmouseover=function() {

this.className+="sfhover";

                         /* alert("1- " + this.innerHTML); */

}

sfEls.onmouseout=function() {

this.className=this.className.replace(new RegExp("sfhover\\b"), "");

                         /*alert("1- " + this.className);*/

}

}

}

if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Já arranjei maneira de pôr o menu a funcionar, é apagando esta primeira linha:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Mas a restante formatação da página fica toda trocada. alguém me sabe dizer o que devo alterar nessa linha?

erro152.jpg

ele dá-me erro no Caracter 2 então eu saquei o fixeiro que tem nessa linha e por sinal acho eu, o caracter é isto:

<!ENTITY % HTMLsymbol PUBLIC
   "-//W3C//ENTITIES Symbols for XHTML//EN"
   "xhtml-symbol.ent">
%HTMLsymbol;

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

According to HTML standards, each HTML document requires a document type declaration. The "DOCTYPE" begins the HTML document and tells a validator which version of HTML to use in checking the document's syntax.

Se apagares essa linha o browser vai tratar o teu HTML em "quirks mode" e é capaz de não ser bem isso o que pretendes.

Edit:

Já agora os sites onde vi essa info:

http://htmlhelp.com/tools/validator/doctype.html

http://en.wikipedia.org/wiki/Document_Type_Declaration

http://en.wikipedia.org/wiki/Quirks_mode

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Thanks pelas dicas mas :\ . .  já experimentei todas e continua mau, só funciona com a versão 3.2 mas fica feio o template .

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora