Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1282
Sexo: Masculino

menus multiníveis horizontal e vertical css

10-04-2010 23:01

Encontrei na web código de menus multiníveis (até 4 níveis), horizontal e vertical, que utiliza apenas CSS. O menu horizontal está funcionando devidamente nos navegadores em que o testei: IE, Firefox, Opera e Safari. O menu vertical funcionou devidamente em todos os navegadores citados, mas no IE o seu primeiro elemento fica deslocado para a frente, o que pode ser corrigido, se alguém se interessar em fazer a correção, podendo, se feita, postá-la para aproveitar a outrem. O autor está referido no código (http://elmicox.blogspot.com/2008/03/ult ... -at-4.html):
<html> <head> <title>Teste menus horizontal e vertical</title> <style type="text/css"> /* Menus drop-down horizontal-vertical (hv) e vertical-vertical (vv) até 4 níveis by Micox - elmicox.blogspot.com - Ver. 2.0 - 20/02/08 - Creative Commons License */ .menu-hv, .menu-vv { position: relative; margin: 0; padding: 0; display: block; zoom: 1;} .menu-hv * , .menu-vv * { margin: 0; padding: 0 ; list-style: none} .menu-hv li , .menu-vv li { position: relative; line-height: 1.2em; vertical-align: top } .menu-hv a , .menu-vv a { display: block; zoom: 1; line-height: 1.2em } .menu-hv li ul, .menu-vv li ul { position: absolute; visibility: hidden } .menu-hv li:hover ul, .menu-vv li:hover ul, .menu-hv li.hover ul, .menu-vv li.hover ul { visibility: visible } .menu-hv li:hover ul ul, .menu-vv li:hover ul ul, .menu-hv li.hover ul ul, .menu-vv li.hover ul ul { visibility: hidden } .menu-hv li li:hover ul, .menu-vv li li:hover ul, .menu-hv li li.hover ul, .menu-vv li li.hover ul { visibility: visible } .menu-hv li li:hover ul ul, .menu-vv li li:hover ul ul, .menu-hv li li.hover ul ul, .menu-vv li li.hover ul ul { visibility: hidden } .menu-hv li li li:hover ul, .menu-vv li li li:hover ul, .menu-hv li li li.hover ul, .menu-vv li li li.hover ul { visibility: visible } /* características horizontal-vertical */ .menu-hv:after, .menu-hv.after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden} .menu-hv li { float: left; } .menu-hv li ul li { float: none; } .menu-hv li ul li ul { position: absolute; left: 100%; top: 0; } /* características vertical-vertical */ .menu-vv { float: left; } .menu-vv li ul { left: 100%; top: 0; } /* **************************************** ALTERE ABAIXO. defina a largura, cor, formatações, etc, dos itens do seu menu abaixo ou apague as linhas se for definir em outro lugar */ .menu-hv li { width: 100px; background-color: yellow } .menu-vv li { width: 100px; background-color: yellow } .menu-hv li a:hover { background-color: cyan } .menu-vv li a:hover { background-color: cyan } /* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6 http://elmicox.blogspot.com/2008/03/ativando-hover-e-first-child-no-ie-6-um.html */ * html * { color: expression( (function(who){ if(!who.MXPC){ who.MXPC = '1'; if(who.nodeName != 'A'){ who.onmouseenter=function(){ who.className += ' hover'}; who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; } (who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ; } } )(this) , 'auto') } </style> </head> <body> <div class='menu-hv'> <ul> <li class='menu-hv'></li> <li><a href='#'>2</a></li> <li><a href='#'>3...</a> <ul style='background-color: red; '> <li>31</li> <li><a href='#'>32</a></li> <li>33</li> </ul> </li> <li><a href='#'>4...</a> <ul> <li>41</li> <li><a href='#'>42</a></li> <li><a href='#'>43...</a> <ul style='background-color: blue'> <li>431</li> <li><a href='#'>432...</a> <ul style='background-color: gray'> <li>4321</li> <li><a href='#'>4322</a></li> </ul> </li> </ul> </li> <li>44</li> </ul> </li> </ul> </div> <br /><br /> <div class='menu-vv'> <ul> <li class='menu-vv'></li> <li><a href='#'>2</a></li> <li><a href='#'>3...</a> <ul style='background-color: red; '> <li>31</li> <li><a href='#'>32</a></li> <li>33</li> </ul> </li> <li><a href='#'>4...</a> <ul> <li>41</li> <li><a href='#'>42</a></li> <li><a href='#'>43...</a> <ul style='background-color: blue'> <li>431</li> <li><a href='#'>432...</a> <ul style='background-color: gray'> <li>4321</li> <li><a href='#'>4322</a></li> </ul> </li> </ul> </li> <li>44</li> </ul> </li> </ul> </div></body> </html>

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17677
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

menus multiníveis horizontal e vertical css

11-04-2010 09:13

Existe um site chamado purecssmenu.com, lá você pode gerar online esse tipo de menu sem problema.

Abaixo um vídeo sobre uso da ferramenta
Aqui o site
http://www.purecssmenu.com/
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1282
Sexo: Masculino

menus multiníveis horizontal e vertical css

11-04-2010 10:42

Cheguei a acessar o site antes, mas o problema foi saber usá-lo. Mandou bem em informar o vídeo sobre como usar.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17677
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

menus multiníveis horizontal e vertical css

11-04-2010 10:44

Tá bem explicado ai no vídeo. ^_^
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado