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.406 ]

 


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

Configurando dois monitores em uma única placa de vídeo no Ubuntu 9.10

Usando repositório Yum para o Webmin e uso seguro desta ferramenta de gerência

VPN passando pelo Linux e acessando servidor interno

Dual boot: Ubuntu 14.04 + Windows 8 UEFI (completo)

Instalando o editor de texto Joe manualmente

  

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