Pular para o conteúdo principal

Pesquisar

"Com CSS e Javascript ": Aprenda a criar um menu drop-down





"Aprenda a criar 

um menu drop-down 

com 

CSS 

e Javascript"




fonte e créditos:
yogodoshi


"Segue o código para criar um menu drop-down utilizando CSS e Javascript, o código está rolando pela internet, não é de minha autoria. O menu funcionou no I.E 7 e no Firefox até onde eu testei. Você pode ver o menu funcionando neste link." (yogodoshi)



<!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; }

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>
















http://arqblog-testerosa.blogspot.com/

Comentários

Postagens mais visitadas deste blog

Sapatinho de bebê, de tricô com elástico e/ou lastex : vídeo e receita

...

fonte:  tricotandocroche 





Sapatilha de tricô com elástico – vídeo e receitaSapatilha de tricô com elástico – vídeo e receita


"Sapatilha de bebê:
Material:

Fio usado no vídeo: Super bebê – Cisne – 1 fio
Agulha: 3,00 mm
Lastex, ou látex
Tesoura
Aguha de croche número 2,00 mm
Agulha de tapeçaria



Sola:
Colocar 37 pontos na agulha

1carr: tricô
2 carr: 1m, laç., 16m, laç., m., laç., m., laç.,m, laç., 16 m, laç., m.
3 carr: tricô
4 carr: 2m, laç., 16m., laç., 2m., laç., 3m., laç., 2m., laç., 16m., laç., 2m.
5 carr: tricô
6 carr: 3m., laç., 16m., laç., 3m., laç., 5m., laç., 3m., laç., 16m., laç., 3m..
Até aqui terás 55 pontos na agulha.
Tricotar nos 55 pontos
6 cordões de tricô (avesso e direito em ponto meia)
...então serão 
12 carreiras em ponto meia
para formar os 6 cordões de tricô.
Peito do pé:

Dividir 22, 11, 22 pontos e 

trabalhar nos 11 pontos centrais 
por 9 carreiras em cordões de tricô
(então serão 18 carreiras em ponto meia
para formar 
09 carreiras de cordões de tricô). 

Sempre pegando1 ponto 
de cada …

pérolas, sapatinhos em tricô , 03 - Jaqueline santos -

...







Sapatinho Sophia 39 pontos

...


Peça:




Jaqueline Santos – Sapatinho Sophia 39 pontos

Jaqueline Santos ensina todos os passos para fazer esse sapatinho fofo de bebê.

Lista de Materiais

* Linha de algodão
* Lastex
* Agulha para tricô nº2
* Agulha tapestry
* Solinha de tricô


Modo de Fazer


1- Coloque 39 pontos na agulha:


1ª carreira: 1tr, 1laç, 18tr,1laç,1tr,1laç,18tr,1laç,1tr.


2ª carreira e todas as pares, apenas em tricô.


3ª carreira: 2tr,1laç,18tr,1laç,3tr,1laç,18tr,1laç,2tr.


5ª carreira: 3tr,1laç,18tr,1laç,5tr,1laç,18tr,1laç,3tr.


7ª carreira: 4tr,1laç,18tr,1laç,7tr,1laç,18tr,1laç,4tr.


9ª carreira: 5tr,1laç,18tr,1laç,9tr,1laç,18tr,1laç,5tr.



2- Execução:1 ª Parte


"Faça a solinha de tricô com 39 pontos. 

Depois de feita a solinha ...

contato

Nome

E-mail *

Mensagem *

buscas populares …apareça nas buscas… cadastre seu web site aqui…/buscas populares…alô negócios !!!…