Arquivo da tag: Drop-down

Padrão

Publicado por

Postado no

26 de março de 2010

Publicado em

CSS, Desenvolvimento, Exemplo de Código, HTML, Javascript, Linguagens

comentários

5 Comentários

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>