Ir para conteúdo

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

Por , em Desenvolvimento frontend

Recommended Posts

_godoyy    0

_godoyy
Postado

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

snowstormdelivery    19

snowstormdelivery
Postado

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
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • ILR master
      Abrir url na mesma janela
      Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Giovanird
      Atualizar pagina PHP que esta dentro de uma div
      Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Thiago Duarte
      Drag and Drop para arrastar imagem
      Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • juliosonic
      Menu Navbar CSS Bootstrap
      Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
×

Informação importante

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

  Aceito