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: 6.300 ]

0 0

Denuncie Favoritos Indicar Impressora

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

Comandos básicos para iniciantes

Configurando o PHP-Weathermap no Cacti

WorkShop: Instalação do Red Hat Linux

Alfresco: Gerenciando documentos digitais na Era da Informação

Encode LATIN1 no PostgreSQL

Comentários

Nenhum comentário foi encontrado.