Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

_godoyy

Como abrir um menu quando passar o mouse e navegar nesse menu

Recommended Posts

Oi pessoal, estou fazendo um site para um projeto da facul, e estou com uma dúvida de como fazer quando eu passar o mouse no menu e abrir outro menu e nisso eu poder navegar nele, eu consegui fazer a parte de quando eu passo o mouse no menu e aparece outro menu, só que não estou conseguindo navegar nele ele sai toda hora quando tento passar o mouse no "submenu", ele some, ja tentei colocar o onmouseout,onclick..... mas não estou conseguindo

 

segue abaixo meu codigo html e css

 

Home.html 

 

<!DOCTYPE html>
<html>
<head>
  <title>Copa do Mundo</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="estilo/homecopa.css">
  <link rel="stylesheet" type="text/css" href="estilo/estadios.css">
  <script language="JavaScript">
    function mostrarElemento(id, visibilidade) {
      document.getElementById(id).style.display = visibilidade;
    }
    function mostrarEstadio(id, visibilidade) {
      document.getElementById(id).style.display = visibilidade; 
    }
  </script>
</head>
<body> 
  <div id="site">
                
             <div id="menu">
              <nav id="estilomenu">
                <ul type="disc">
                 <li><a href="home.html">Home</a></li>
                 <li><a href="selecoes.html"  onMouseOver="mostrarElemento('prodImagem', 'inline');"
                       onMouseOut="mostrarElemento('prodImagem','none');" >Seleções</a>
                      <div id="prodImagem">
                     <a href="http://google.com.br"><input type="image"  id="portugal" src="http://4.bp.blogspot.com/-t73I2Iqtfws/Vnl5SwT4L0I/AAAAAAAACHI/wQBSlPhr4xo/s1600/Portugal.png"/>
                     <a href="http://google.com.br"><input type="image" id="brasil" src="_imagens/selecoes/brasil.png">
                     <a href="http://google.com.br"><img  id="russia" src="_imagens/selecoes/russia.png"></a>
                     <a href="http://google.com.br"><input type="image" id="alemanha" src="_imagens/selecoes/alemanha.png">
                     <a href="http://google.com.br"><input type="image" id="franca" src="_imagens/selecoes/franca.png">
                     <a href="http://google.com.br"><input type="image" id="espanha" src="_imagens/selecoes/espanha.png">
                     <a href="http://google.com.br"><input type="image" id="croacia" src="_imagens/selecoes/croacia.png">
                     <a href="http://google.com.br"><input type="image" id="argentina" src="_imagens/selecoes/argentina.png">
                     <a href="http://google.com.br"><input type="image" id="belgica" src="_imagens/selecoes/belgica.png">
                     <a href="http://google.com.br"><input type="image" id="polonia" src="_imagens/selecoes/polonia.png">
                     <a href="http://google.com.br"><input type="image" id="suica" src="_imagens/selecoes/suica.png">
                     <a href="http://google.com.br"><input type="image" id="inglaterra" src="_imagens/selecoes/inglaterra.png">
                     <a href="http://google.com.br"><input type="image" id="colombia" src="_imagens/selecoes/colombia.png">
                     <a href="http://google.com.br"><input type="image" id="mexico" src="_imagens/selecoes/mexico.png">
                     <a href="http://google.com.br"><input type="image" id="uruguai" src="_imagens/selecoes/uruguai.png">
                     <a href="http://google.com.br"><input type="image" id="peru" src="_imagens/selecoes/peru.png">
                     <a href="http://google.com.br"><input type="image" id="costarica" src="_imagens/selecoes/coastarica.png">
                     <a href="http://google.com.br"><input type="image" id="suecia" src="_imagens/selecoes/suecia.png">
                     <a href="http://google.com.br"><input type="image" id="tunisia" src="_imagens/selecoes/tunisia.png">
                     <a href="http://google.com.br"><input type="image" id="egito" src="_imagens/selecoes/egito.png">
                     <a href="http://google.com.br"><input type="image" id="senegal" src="_imagens/selecoes/senegal.png">
                     <a href="http://google.com.br"><input type="image" id="ira" src="_imagens/selecoes/ira.png">
                     <a href="http://google.com.br"><input type="image"id="dinamarca" src="_imagens/selecoes/dinamarca.png">
                     <a href="http://google.com.br"><input type="image" id="islandia" src="_imagens/selecoes/islandia.png">
                     <a href="http://google.com.br"><input type="image" id="servia" src="_imagens/selecoes/servia.png">
                     <a href="http://google.com.br"><input type="image" id="nigeria" src="_imagens/selecoes/nigeria.png">
                     <a href="http://google.com.br"><input type="image" id="japao" src="_imagens/selecoes/japao.png">
                     <a href="http://google.com.br"><input type="image" id="marrocos" src="_imagens/selecoes/marrocos.png">
                     <a href="http://google.com.br"><input type="image" id="panama" src="_imagens/selecoes/panama.png">
                     <a href="http://google.com.br"><input type="image" id="coreiadosul" src="_imagens/selecoes/coreiadosul.png">
                     <a href="http://google.com.br"><input type="image"id="arabiasaudita" src="_imagens/selecoes/arabiasaudita.png">
                     <a href="http://google.com.br"><input type="image" id="australia" src="_imagens/selecoes/australia.png">
                     </div></li>   
                 <li><a href="grupos.html">Grupos</a></li>
                 <li><a href="sobre.html">Sobre a Rússia</a></li>
                 <li><a <a href="estadios.html"  onMouseOver="mostrarEstadio('prodEstadio', 'inline');"
                       onMouseclick="mostrarEstadio('prodEstadio', 'inline');" onMouseOut="mostrarEstadio('prodEstadio');" >Estádios</a>
                       <div id="prodEstadio">
                       <a href="http://google.com.br"><input type="image" id="kazam" src="_imagens/estadios/kazam.png"></a>
                     </div></li>
                </ul>

              </nav>      
            </div>
                <div id="fundo">   
                       <div id="wallpaper">
                       <img src="_imagens/russia.jpg" >                      
                </div>                
                </div>

  </div>

</body>
</html>

 

 

 

*******************homecopa.css*************

 

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Acme');


body{
  
}

a{
  color:white;
  text-decoration: none;
}

#site{
  width: 1366px;
  height: 660px;
  background-image: url("../_imagens/background.jpg");
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
}


#menu{
  width: 700px;
  height: 70px;
  background-color:#0047AB;
  position: relative;
  margin-top: -18px;
  margin-left:120px;
  border-radius: 5px;
}
#wallpaper{
    width: 1120px;
    height:593px;
    background-color:none;
    position:relative;
     margin-left:120px;
}

#wallpaper img{
    width:1120px;
    height:593px;
  opacity: none;
  z-index: 1;
    
}


/*Personalização menu*/

#menu{
  padding-left: 420px;
}

nav#menu{
  display: block;
  border-radius: 10px;
}

nav#estilomenu ul{
  list-style: none;
  text-transform: uppercase;
  font-family: 'Acme', sans-serif;
  margin-left: -200px;

}

nav#estilomenu li{
  display: inline-block;
  background-color: none;
  padding: 14px;
  margin: 8px;
  color: white;
  
  
}

nav#estilomenu li:hover{
  background-color: #6495ED;  
  transition: background-color 1s;

}

/* Javascript*/

#prodImagem {
  width: 350px;
  height: 220px;
  background-color: white;
  cursor: pointer;
  opacity: 0.8;
  display: none;
  position: absolute;
  padding: 5px;
  z-index: 2;
  border-radius: 30px;
  
}

#prodImagem input#portugal{
  width: 40px;
  outline: none;

}

#prodImagem input#brasil{
  width: 40px;
  outline: none;
}

#prodImagem img#russia{
  width: 40px;
  outline: none;
}
#prodImagem input#alemanha{
  width: 40px;
  outline: none;
}

#prodImagem input#franca{
  width: 40px;
  outline: none;
}
#prodImagem input#espanha{
  width: 30px;
  padding-left: 2px;
  outline: none;
}
#prodImagem input#croacia{
  width: 30px;
  padding-left: 12px;
  outline: none;
}
#prodImagem input#argentina{
  width: 40px;
  padding-left: 11px;
  outline: none;
}
#prodImagem input#belgica{
  width: 40px;
  outline: none;
}
#prodImagem input#polonia{
  width: 25px;
  outline: none;
}
#prodImagem input#suica{
  width: 30px;
  padding-top: 10px;
  padding-left: 10px;
  outline: none;
}

#prodImagem input#inglaterra{
  width: 40px;
  padding-left: 10px;
  padding-top: 10px;
  outline: none;
}

#prodImagem input#colombia{
  width: 30px;
  padding-left: 5px;
  padding-bottom: 5px;
  outline: none;
}
#prodImagem input#mexico{
  width: 30px;
  padding-left: 5px;
  outline: none;
}
#prodImagem input#uruguai{
  width: 40px;
   padding-left: 10px;
  outline: none;
}
#prodImagem input#peru{
  width: 30px;
  padding-top: 15px;
  padding-left: 15px;
  outline: none;
}
#prodImagem input#costarica{
  width: 40px;
  padding-left: 5px;
  outline: none;

}

#prodImagem input#suecia{
  width: 40px;
  outline: none;  
}

#prodImagem input#tunisia{
  width: 30px;
  padding-left;
  outline: none;
}
#prodImagem input#egito{
  width: 30px;
  padding-left: 10px;
  padding-top: 10px;
  outline: none;
}
#prodImagem input#senegal{
  width: 30px;
  padding-left: 10px;
 padding-top: 10px;
  outline: none;
}

#prodImagem input#ira{
  width: 20px;
  padding-left: 10px;
  padding-top: 10px;
  outline: none;
}
#prodImagem input#dinamarca{
 width: 30px;
 padding-left: 10px;
 padding-top: 10px;
 outline: none;
}
#prodImagem input#islandia{
 width: 30px;
 padding-left: 10px;
 padding-top: 10px;
 outline: none;
}
#prodImagem input#servia{
  width: 30px;
  padding-left: 10px;
  outline: none;
}
#prodImagem input#nigeria{
  width: 30px;
  padding-left: 10px;
  padding-top: 10px;
  outline: none;
}
#prodImagem input#japao{
  width: 30px;
  padding-left: 10px;
  padding-top: 10px;
  outline: none;
}
#prodImagem input#marrocos{
  width: 30px;
  padding-left: 10px;
  padding-top: 10px;
  outline: none;
}
#prodImagem input#panama{
  width: 30px;
  padding-left: 10px;
  padding-top: 10px;
  outline: none;
}
#prodImagem input#coreiadosul{
 width: 30px;
 padding-left: 10px;
 padding-top: 10px;
 outline: none;
}
#prodImagem input#arabiasaudita{
 width: 30px;
 padding-left: 10px;
 padding-top: 10px;
 outline: none;
}
#prodImagem input#australia{
  width: 40px;
 padding-left: 10px;
 padding-top: 10px;
 outline: none;
}

#prodEstadio {
  width: 350px;
  height: 220px;
  background-color: white;
  opacity: 0.8;
  display: none;
  position: absolute;
  padding: 5px;
  z-index: 1;
  border-radius: 30px;
  border-color: black;
}

/* Estadios*/

#prodEstadio input#kazam{
  width: 100px;
}

 

 

 

 

NÃO SEI SE DA PRA VCS TEREM UMA IDEIA DE COMO TA, MAS TIREI PRINT PARA VCS VERE

 

OBRIGADO!

AGUARDO RESPOSTAS

 

 

 

foto2.thumb.jpg.c8561b363666eebe45d07cfdadb9700b.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

E aí, godoy?!

 

O nome comum desse componente é "hover dropdown" e tem como característica mostrar um submenu, ao passar o mouse por cima do item principal.

 

Além do mais, ele é derivado de um outro componente chamado "dropdown", no qual o usuário necessita clicar para ver o submenu.

 

Design patterns

 

Uma boa forma de crescer seu conhecimento no ramo é estudar design patterns (ou padrões de design, se preferir). Assim, se você pesquisar por essas duas palavrinhas, vai encontrar uma vastidão de outros componentes que são padrões, na web.

 

No entanto, vou te dar um ajudinha e compartilhar os seguintes links, pra tu começar estudando sobre o que precisa:

  1. Tutorial do Maujor;
  2. Tutorial do WPMasters;
  3. Vídeo do Sala de Estudos.

 

Ps: Acho mais importante você estudar direitinho como faz, antes que possamos te dar a resposta. Por isso, depois de estudar, se ainda tiver dúvida, pode contar comigo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Rafael_Ferreira
      Não consigo carregar a imagem do captcha do meu formulário. Foi testado com o xampp e easyphp. Também não carregou a imagem de outros captcha. 
       
       
    • Por luiz monteiro
      Olá.
      Estou atualizando meu conhecimento com Front-End e me deparei com o seguinte problema.
      Criei um sistema para fazer o upload de imagens e alguns campos text.
      Algo bem simples para depois começar a estudar javascript para mostrar a miniatura....
      Mas quando saio do navegador Chrome ou da aba por mais de 3 minutos, ao retornar o navegador as vezes atualiza ou nem chega atualizar mas limpa os campos.
      Estou usando um Smart Motorola com Android, mas um amigo testou no iPhone e acontece a mesma coisa.
      Gostaria de saber se há como usar javascript para evitar isso?
      Agradeço desde já.

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Uploader</title>
      </head>
      <body>
          <form action="?" method="post" enctype="multipart/form-data">
              <br><br>
              <div>selecione a imagem 1</div>
              <input type="file" name="foto1" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem1">
              
              <br><br>
              <input type="file" name="foto2" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem2">
              
              <br><br>

              <input type="file" name="foto3" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem3">
              
              <br><br>
              <input type="submit" value="Enviar">
              <br><br>
          </form>
      <?php
      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
          vardump ($_FILES);
      }
      ?>
      </body>
      </html>
       
       
       
    • Por belann
      Olá!
       
      Estou usando o nextjs versão 15.2.3 e criei uma navbar que quando é carregado o programa aparece com a home, mas na hora de clicar na página produtos desaparece a navbar.
      A navbar esta sendo chamada no layout.tsx estou usando typescript
      e fica dessa forma
      <div>           <Navbar/>             <main>{children}</main>             </div>  
    • Por ILR master
      Fala pessoal, tudo bem?
       
      Eu tenho o seguinte código:
       
      <script>
         $(function(){
      var jElement = $('.fixar_banner');
      $(window).scroll(function(){
          if ( $(this).scrollTop() > 120 ){
              jElement.css({
                  'position':'fixed',
                  'top':'10px'
              });
          }else{
              jElement.css({
                  'position':'relative',
                  'top':'auto'
              });
          }
      });
      });
      </script>
       
      Porém, eu quero que a div fique fixa até que outro elemento apareça na tela, tipo o rodapé da página por exemplo. É mais ou menos como a página de notícia do uol.
      https://noticias.uol.com.br/internacional/ultimas-noticias/2025/01/19/sonho-americano-brasileiros-moram-em-carro-e-buscam-comida-no-lixo-nos-eua.htm
       
      Espero ter sido claro.
       
      Obrigado :)
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.