Ir para conteúdo

POWERED BY:

Arquivado

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

Fabio Jp

[Resolvido] Menu Dropdown, ao passar o mouse manter selecionado

Por , em Desenvolvimento frontend

Recommended Posts

Fabio Jp    0

Fabio Jp
Postado

Bom galera, estou desde manhã tentando achar um menu Dropdown que

atenda todas as minhas necessidades mas não consegui até agora,

e já que vocês são bem legais e prestativos eu decidi compartilhar minha

dúvida com vocês.. rsrs..

 

Estou tentando montar um menu Dropdown que ao passar o mouse, ele

abra os outros links para baixo e nessa suposta div onde eles estarão,

gostaria que tivesse um png transparente de fundo para aparecer o conteúdo que

está ao fundo do menu. E pra complicar um pouco mais, ao passar o mouse sobre

um link e descer os outros links, gostaria que esse link ficasse selecionado.

Por exemplo, se eu colocar pra ele ficar com o fundo branco, gostaria que

ele nao retornasse ao fundo orginal, e sim o que esta no hover, no caso o fundo branco..

 

 

Não sei se deu pra entender direito..

 

Eu achei alguns nesse tipo, mas não consegui adaptar essa transparencia ao fundo

do menu.. mesmo sem eu colocar, ele mantem um fundo que não sei da onde ele ta puxando..

Vou postar um exemplo aqui pra vocês verem se da pra ajudar..

 

Aceito qualquer tutorial, video aula, artigo, tudo em relação a isso..

 

 

 

 

Valewwww...

 

 

Segue o código..

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testando o menu drop-down</title>
<style type="text/css">
body { font: normal 62.5% verdana; background:#000;}


ul.menubar{
	margin: 0px;
	padding: 0px;
	background-color: #FFFFFF; /* IE6 Bug */
	font-size: 100%;
}

ul.menubar .submenu{
	margin: 0px;
	padding: 0px;
	list-style: none;
	background-color: #FFFFFF;
	border: 1px solid #ccc;
	float:left;
}

ul.menubar ul.menu{
	display: none;
	position: absolute;
	margin: 0px;
}

ul.menubar a{
	padding: 5px;
	display:block;
	text-decoration: none;
	color: #777;
	padding: 5px;
}


ul.menu, ul.menu ul{
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #ccc;
	width: 150px; /* Width of Menu Items */
	background-color: #FFFFFF; /* IE6 Bug */
}

ul.menu li{
	position: relative;
	list-style: none;
	border: 0px;
}

ul.menu li a{
	display: block;
	text-decoration: none;
	border: 1px solid #ccc;
	border-bottom: 0px;
	color: #777;
	padding: 5px 10px 5px 5px;
}
ul.menu li a:hover{
	background:#ccc;
}

ul.menu li sup{
	font-weight:bold;
	font-size:7px;
	color: red;
}

/* Fix IE. Hide from IE Mac \*/
* html ul.menu li { float: left; height: 1%; }
* html ul.menu li a { height: 1%; }
/* End */

ul.menu ul{
	position: absolute;
	display: none;
	left: 149px; /* Set 1px less than menu width */
	top: 0px;
}

ul.menu li.submenu ul { display: none; } /* Hide sub-menus initially */

ul.menu li.submenu { background: transparent url(arrow.gif) right center no-repeat; }

ul.menu li a:hover { color: #E2144A; }

</style>

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

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

}

</script>

</head>

<body onload="horizontal();">

<ul id="menu_dropdown" class="menubar">
   <li class="submenu"><a href="#">Notícias</a></li>
   <li class="submenu"><a href="#">Institucional</a>
      <ul class="menu">
        <li><a href="#">Fotos da Frota</a></li>
        <li><a href="#">História</a></li>
        <li><a href="#">Missão</a></li>
        <li><a href="#">Visão</a></li>
		<li><a href="#">Instalações</a></li>
      </ul>
   </li>
   <li class="submenu"><a href="#">Qualidade</a>
      <ul class="menu">
        <li><a href="#">Resultado dos indicadores</a></li>
        <li><a href="#">Informativos da Qualidade</a></li>
        <li><a href="#">Política de Qualidade</a></li>
        <li><a href="#">Projetos Sociais</a></li>
		<li><a href="#">Resultado da pesquisa de satisfação</a></li>
      </ul>
   </li>
   <li class="submenu"><a href="#">Serviços</a>
      <ul class="menu">
        <li><a href="#">Links Úteis</a></li>
        <li><a href="#">Itinerário</a></li>
        <li><a href="#">Mapa das Rotas<sup>novo</sup></a></li>
      </ul>
   </li>
      <li class="submenu"><a href="#">Contato</a>
      <ul class="menu">
        <li><a href="#">Colabore Conosco</a></li>
        <li><a href="#">Enquetes finalizadas</a></li>
        <li><a href="#">Fale Conosco</a></li>
		<li><a href="#">Trabalhe Conosco</a></li>
      </ul>
   </li>
   <li class="submenu"><a href="#">Localize seu ônibus</a></li>
</ul>
    
</body>
</html>

 

Desculpe não saber os creditos desse menu que eu postei mas é que eu peguei

tantos que acabei me perdendo..

 

Já estou com dor de cabeça de tanto menu que eu ja vi..

Mas em nenhum até agora acheio o ideal para mim.

Valew ai quem puder ajudar..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Jp    0

Fabio Jp
Postado

Sim mas a única coisa que falta é eu conseguir colocar um bg transparente

ao passar o mouse e listar abaixo os sublinks relacionados ao link.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Jp    0

Fabio Jp
Postado

Putz disfarça..

Coloquei e funcionou sim..

Foi falta de atenção minha que não percebi mesmo..

Coloquei um uma imagem com fundo branco 20% de opacidade e o fundo do site preto

mas ficou cinza ( lógicamente ).

Agora que coloquei uma imagem com detalhes ( um muro ) deu pra ver que o menu

esta com transparencia sim sahsuahsa..

 

Putz foi mal msm..

Mas fica ai pra quem quiser aproveitar rsrs..

Coloquei o bg transparente no "ul.menu li{"

 

 

vlw..

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito