SdevLab – Exemplo de Código | Menu drop-down com CSS e Javascript

Aproveitando esta fornada de tutoriais css, segue abaixo o código de um menu Drop-down. O código não é meu, nem do cara que eu copiei, ou seja, alguem fez colocou na net e não reinvidicou, mas só pra não ficar chato, o site “origem” pelo menos pra mim do código é este -> http://www.yogodoshi.com/blog/web-developer.

Menu drop-down com CSS e Javascript


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<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; }

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 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 = “#f9f9f9″;}
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&iacute;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>


OBS: Se copiar e colar o código não funcionar, salve este arquivo (menu3) no seu computador. É um arquivo .doc, logo você vai precisar abrir ele e salvar o mesmo como menu3.htm (codificação UNICODE) para conseguir o resultado esperado que é um menu como a imagem abaixo.

Até a próxima!
xD

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<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; }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 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 = “#f9f9f9″;}
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&iacute;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>

5 comentários sobre “SdevLab – Exemplo de Código | Menu drop-down com CSS e Javascript

      • Cara, testei o menu conforme eu tinha te prometido. Fiz tudo seguindo os passos do tutorial e deu certinho, eu fiz o teste fazendo o download do arquivo conforme minhas próprias instruções (hehehehe), pode mandar ver assim que não precisa editar uma linha!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s