Menu popup dinânico (DHTML) com infinitos níveis usando apenas CSS

Publicado por Isaias J. A. Soares (http://lattes.cnpq.br/9504289735203731) em 08/06/2011

[ Hits: 5.455 ]

 


Menu popup dinânico (DHTML) com infinitos níveis usando apenas CSS



Esta dica descreve a criação de um menu popup dinânico (DHTML) com infinitos níveis usando apenas CSS.

Menu popup dinânico (DHTML) com infinitos níveis usando apenas CSS

Oi, pessoal! com base nesse tuto, elaborei um menu com infinitos níveis. Me resolveu um problema, espero que possa ser útil. Muito legal, vale a pena ver conferir:

Código da página de teste:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="pt-br" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta name="keywords" content="tutorial,acessibilidade,css,css menu,estilo,folhas estilo,layout css,layout sites,menu css,paginas web,tutorial
css,web design,web standards,webdesign,tableless">
<meta name="description" content=" Tutoriais, macetes, dicas sobre uso das CSS para projetar sites.">
<meta name="author" content="Nick Rigby">
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="Pragma" content="no-cache">
<meta name="robots" content="all">
<meta name="language" content="pt-br">
<meta name="ICBM" content="-22.975781,-43.193082">
<meta name="DC.title" content="CSS para Web Design">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Horizontal Drop Down Menus</title>
<script type="text/javascript" src="teste%20Arquivos/drop_down.js"></script>
<style type="text/css">
@import "style3.css";
</style>
</head><body>
<ul class="menu">
<li><a href="#">Menu</a>
<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a>
    <ul>
      <li><a href="#">History</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Offices</a></li>
    </ul>
  </li>
  <li><a href="#">Services</a>
    <ul>
      <li><a href="#">Web Design</a>
        <ul>
          <LI><a href="#">Sub-Web Design 1</a></LI>
          <LI><a href="#">Sub-Web Design 2</a>
            <ul>
               <LI><a href="#">Sub-Sub-Web Design 1</a></LI>
               <LI><a href="#">Sub-Sub-Web Design 2</a></LI>
               <LI><a href="#">Sub-Sub-Web Design 3</a></LI>
            </ul>
          </LI>
          <LI><a href="#">Sub-Web Design 3</a></LI>
        </ul>
      </li>
      <li><a href="#">Internet Marketing</a></li>
      <li><a href="#">Hosting</a></li>
      <li><a href="#">Domain Names</a></li>
      <li><a href="#">Broadband</a></li>
    </ul>
  </li>
  <li><a href="#">Contact Us</a>
    <ul>
      <li><a href="#">United Kingdom</a></li>
      <li><a href="#">France</a></li>
      <li><a href="#">USA</a></li>
      <li><a href="#">Australia</a></li>
    </ul>
  </li>
</ul>
</li>
</ul>
</body></html>

Código do CSS:

body {
   font: normal 11px verdana;
}

ul {
   margin: 0;
   padding: 0;
   list-style: none;
   width: 150px; /* Width of Menu Items */
   border-bottom: 1px solid #ccc;
}
  
ul li {
   position: relative;
}
  
li ul {
   position: absolute;
   left: 149px; /* Set 1px less than menu width */
   top: 0;
   display: none;
}

/* Styles for Menu Items */
ul li a {
   display: block;
   text-decoration: none;
   color: #777;
   background: #eee; /* IE6 Bug */
   padding: 5px;
   border: 1px solid #ccc; /* IE6 Bug */
   border-bottom: 0;
}

ul li a:hover {
   display: block;
   text-decoration: none;
   color: #777;
   background: #ffb; /* IE6 Bug */
   padding: 5px;
   border: 1px solid #ccc; /* IE6 Bug */
   border-bottom: 0;
}

/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }

ul ul { display: none; }
li:hover > ul { display: block; }/* The magic */

.menu {
   margin: 0;
   padding: 0;
   list-style: none;
   width: 150px; /* Width of Menu Items */
   border-bottom: 1px solid #ccc;
}

.menu .nav {
   position: relative;
   left: 0px; /* Set 1px less than menu width */
   top: 0px;
   border-bottom: 0px solid #ccc;
}

/* End */

É isso aí! Espero ter sido útil! O código é gratuito e livre para uso nas suas páginas.

Outras dicas deste autor

Fazendo funcionar webcams, kernels novos (acima 2.6.26), aMSN, 32/64 bits

Como instalar o scanner usb Genius ColorPage Vivid 4 no Ubuntu Linux

Leitura recomendada

Ubuntu 12.04 LTS - Instalando o Hamachi

Ethtool - Ferramenta de manipulação e consulta de interfaces de rede

Medidor de energia e bateria no Linux

Mageia Linux - Primeiros passos

Convertendo formato de pacotes com alien

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts