Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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">](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">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;
} 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..
Carregando comentários...