Menu dropdown 100% em CSS, tem como?

UMARIZAL · Setembro 9, 2009

Olá pessoal.

Atualmente, possuo em meu site ( http://umarizal.com ) um menu que usa Javascript (acho que é em DHTML)...

Tal menu, não tem seus links reconhecidos pelos sites de busca, por isso, quero criar um menu sem javascript ou dhtml.

Li algo (pesquisando no google) sobre menus 100% em CSS, tem como?

Existe um programa (software) para criação de menus em CSS?

Renan Decarlo · Setembro 9, 2009

Ih ala, moderador do FGDH? XD

Respondendo sua dúvida, tem como sim.

É um esquema lá que usa com :hover, já fiz uma vez, mas fui me baseando em um tutorial pra fazer.

Dá uma olhada:

http://maujor.com/tutorial/ddownmenu.php

UMARIZAL · Setembro 9, 2009

Hehe, pois é... também participo do Fórum do GdH sim...

Então, eu já vi este tuto, o site do Maujor é ponto de passagem obrigatório de qualquer um que queira aprender CSS...

No entanto, eu procuro um programa que faça isso mais facilmente... sabe de algum? Encontrei alguns bons como o AllButtons 1.6 mas é pago... queria algo freeware ou livre...

Thiago Retondar · Setembro 9, 2009

Programa eu não sei e não gosto, pelo motivo de não ter controle sobre o código HTML e CSS. ;)

Olhe esses dois links:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://forum.imasters.com.br/index.php?/topic/340960-menu-drop-down-fluido-3-niveis-imagens/

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://forum.imasters.com.br/index.php?/topic/354140-repente-css-menus/page__view__findpost__p__1347096

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

UMARIZAL · Setembro 9, 2009

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://forum.imasters.com.br/index.php?/topic/340960-menu-drop-down-fluido-3-niveis-imagens/

Então, usei o modelo do tópico que você citou... mas se perceber (pegando o arquivo compactado disponibilizado), os links não abrem mesmo após editar (trocar o # pelo URL).

William Bruno · Setembro 9, 2009

Poste o teu código para vermos como você fez.

UMARIZAL · Setembro 9, 2009

Poste o teu código para vermos como você fez.

Bem, o próprio código fornecido pelo autor já não abre os links... vejam:

http://rapidshare.com/files/225763183/Menu_Drop-Down.rar.html

Vamos lá... vou por os códigos aqui:

Drop-Down.html (onde está o menu)

<!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>Menu Drop-Down CSS</title>
		<link rel="stylesheet" type="text/css" href="Css/estilos.css"/>
		<script type="text/javascript" src="Js/comportamento.js"></script>
	</head>
	<body>
		<div id="menu">
			<ul class="principal">
				<li id="first" class="selecionado"><a href="#"><span>Home</span>
					</a></li>
				<li><a href="#"><span>Projetos</span>
					</a>
					<ul class="nivel2">
						<li><a href="#">Desafios PHP</a></li>
						<li><a href="#" class="submenu">Desafios WS</a>
							<ul class="nivel3">
								<li><a href="#">XHTML</a></li>
								<li><a href="#">XML</a></li>
								<li><a href="#">CSS</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="#"><span>Tutoriais</span>
					</a>
					<ul class="nivel2">
						<li><a href="#">Ajax</a></li>
						<li><a href="#" class="submenu">CSS</a>
							<ul class="nivel3">
								<li><a href="#">Básico</a></li>
								<li><a href="#">Intermediário</a></li>
								<li><a href="#">Avançado</a></li>
							</ul>
						</li>
						<li><a href="#">Javascript</a></li>
						<li><a href="#" class="submenu">Photoshop</a>
							<ul class="nivel3">
								<li><a href="#">Básico</a></li>
								<li><a href="#">Intermediário</a></li>
								<li><a href="#">Avançado</a></li>
							</ul>
						</li>
						<li><a href="#" class="submenu">PHP</a>
							<ul class="nivel3">
								<li><a href="#">Básico</a></li>
								<li><a href="#">Intermediário</a></li>
								<li><a href="#">Avançado</a></li>
							</ul>
						</li>
						<li><a href="#">XHTML</a></li>
					</ul>
				</li>
				<li><a href="#"><span>Artigos</span>
					</a>
					<ul class="nivel2">
						<li><a href="#">Webdesign</a></li>
						<li><a href="#">Diversos</a></li>
						<li><a href="#">Webstandards</a></li>
					</ul>
				</li>
				<li><a href="#"><span>Contato</span>
					</a></li>
			</ul>
		</div>
	</body>
</html>

estilos.css (estilo)

 * {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
} .clear {
    clear: both;
} #menu {
    background: #000 url(../Imagens/fundo_menu.png);
    padding: 5px 0;
} #menu ul {
    list-style: none;
}

ul.principal {
    width: 800px;
    height: 30px;
    margin: 0 auto;
}

ul.principal li {
    float: left;
    margin: 0 0 0 10px;
    text-align: center;
    position: relative;
    height: 30px;
    background: transparent;
}

ul.principal li:first-child, ul.principal li#first {
    margin-left: 0;
}

ul.principal li a {
    color: #FFF;
    display: block;
    background: url(../Imagens/botao.png) top center;
    padding: 5px 0 0 0;
    width: 152px;
    height: 25px;
    font-weight: bold;
}

ul.principal li a:hover {
    text-decoration: none;
}

ul.principal li:hover a, ul.principal li.over a {
    background: url(../Imagens/botao.png) 0 -32px;
}

ul.principal li.selecionado a {
    background: url(../Imagens/botao.png) 0 -64px;
}

ul.principal li ul.nivel2 {
    position: absolute;
    z-index: 10;
    left: 0;
    top: 30px;
    border: 1px solid #000;
    border-top: none;
    display: none;
    width: 150px;
}

ul.principal li:hover ul.nivel2, ul.principal li.over ul.nivel2 {
    display: block;
}

ul.principal li ul.nivel2 li {
    margin: 0;
    height: 25px;
}

ul.principal li ul.nivel2 li a {
    width: 140px;
    background: #EEE url(../Imagens/fundo_nivel2.png) top;
    color: #000;
    height: 20px;
    margin: 0;
    padding: 2px 0 2px 10px;
    text-align: left;
    border-top: 1px solid #000;
    font-weight: normal;
}

ul.principal li ul.nivel2 li a.submenu {
    background: #EEE url(../Imagens/fundo_nivel2_sub.png) top;
}

ul.principal li ul.nivel2 li:hover a, ul.principal li ul.nivel2 li.over a {
    background: #DDD url(../Imagens/fundo_nivel2.png) bottom;
}

ul.principal li ul.nivel2 li:hover a.submenu, ul.principal li ul.nivel2 li.over a.submenu {
    background: #DDD url(../Imagens/fundo_nivel2_sub.png) bottom;
}

ul.principal li ul.nivel2 li ul.nivel3 {
    position: absolute;
    left: 150px;
    top: 0;
    border: 1px solid #000;
    border-top: none;
    display: none;
}

ul.principal li ul.nivel2 li:hover ul.nivel3, ul.principal li ul.nivel2 li.over ul.nivel3 {
    display: block;
}

ul.principal li ul.nivel2 li ul.nivel3 li {
    height: 21px;
}

ul.principal li ul.nivel2 li ul.nivel3 li a {
    background: #FFF url(../Imagens/fundo_nivel3.png) top;
    font-size: 10pt;
    height: 16px;
}

ul.principal li ul.nivel2 li ul.nivel3 li:hover a, ul.principal li ul.nivel2 li ul.nivel3 li.over a {
    background: #CDF5FF url(../Imagens/fundo_nivel3.png) bottom;
}

comportamento.js (javascript)

/**
 * Autor: Henrique J. P. Barcelos
 * MSN: rick_hjpbarcelos@hotmail.com
 * Data: 25/04/2009
 */

//ao carregar a janela...
window.onload = function(){
	//pego todos os elementos LI dentro do menu
    var itens = document.getElementById("menu").getElementsByTagName("li");
    for (var i = 0; i < itens.length; i++) {
    	
		//Efeito Rollover para IE6, que não suporta a pseudo-classe :hover do CSS em elementos LI
        itens[i].onmouseover = function(){
            //se o elemento for o que estiver selecionado, eu adiciono a classe over. Ficará assim class="selecionado, over"...
			if (this.className.match("selecionado")) {
                this.className += ", over";
            }
			//se não for o seleiconado, apenas defino o nome da classe como sendo over
            else {
                this.className = "over";
            }
        }
		
		//Mesma intenção do bloco acima, adiciona o Efeito Rollout para o IE6
        itens[i].onmouseout = function(){
			//se a classe do elemento contiver a palavra 'selecionado', 
			//defino esse como sendo o nome da classe quando o mouse sair de cima dele
            if (this.className.match("selecionado")) {
                this.className = "selecionado";
            }
			//se não, atribuo o valor vazio para a classe
            else {
                this.className = "";
            }
        }
		
		//Essa função faz a mudança de classe quando o elemento é clicado.
		//É necessária tanto no IE quanto no Fx, Op, Ch, Sa, etc...
        itens[i].onclick = function(){
			//faço com que todos os elementos voltem ao seu estado "natural", limpando o nome da classe...
            for (var i = 0; i < itens.length; i++) {
                itens[i].className = "";
            }
			//em seguida, faço com que o elemento clicado receba a classe 'selecionado'
            this.className = "selecionado";
			//isto aqui apenas impede que o link seja executado, no caso porque meus links são "#"...
			//Retire essa linha caso for utilizar...
            return false;
        }
    }
}

O menu funciona perfeitamente... porém, mesmo alterando o link (trocando # pelo respectivo URL), ao clicar, não abre o link.

William Bruno · Setembro 9, 2009

Esta última função está desativando o click:

/* 
	   itens[i].onclick = function(){
			//faço com que todos os elementos voltem ao seu estado "natural", limpando o nome da classe...
            for (var i = 0; i < itens.length; i++) {
                itens[i].className = "";
            }
			//em seguida, faço com que o elemento clicado receba a classe 'selecionado'
            this.className = "selecionado";
			//isto aqui apenas impede que o link seja executado, no caso porque meus links são "#"...
			//Retire essa linha caso for utilizar...
            return false;
        }
		*/

por isso que o href não funciona.

Apenas comentei ela, e consegui com que os links fossem seguidos.

UMARIZAL · Setembro 9, 2009

Pronto, apenas removi o trecho "return false;" e tudo ficou normal.

Obrigado a todos!

William Bruno · Setembro 9, 2009

Faça esse efeito de outra forma.. como usando a técnica que postei aqui:

puramente css:

http://forum.imasters.com.br/index.php?/topic/354140-repente-css-menus/page__view__findpost__p__1341165

E não trás 'malefícios'. Não cheguei a testar o código do autor num 'situação real', mas por se tratar de Javascript, e não ler nada da URL, acho que essa mudança de estado não funciona qndo você realmente trocar de página. Já que o código JS vai ser 'reiniciado'.

UMARIZAL · Setembro 17, 2009

Faça esse efeito de outra forma.. como usando a técnica que postei aqui:

puramente css:

http://forum.imasters.com.br/index.php?/topic/354140-repente-css-menus/page__view__findpost__p__1341165

E não trás 'malefícios'. Não cheguei a testar o código do autor num 'situação real', mas por se tratar de Javascript, e não ler nada da URL, acho que essa mudança de estado não funciona qndo você realmente trocar de página. Já que o código JS vai ser 'reiniciado'.

Aqui não funfou....

William Bruno · Setembro 17, 2009

Mostre como fez.

De preferência um link para a página.

UMARIZAL · Setembro 17, 2009

Mostre como fez.

De preferência um link para a página.

http://terraplenagem.umarizal.com

Tá funcionando... tá até legalzinho... mas quando clico em algum ítem do menu... ele não muda de cor (deveria ficar como está o primeiro ítem à esquerda, da cor laranja após clicado).

William Bruno · Setembro 17, 2009

isso se deve ao fato de você não estar trocando a classe 'selecionado' conforme muda de página.

Já que vai usar essa técnida para mostrar a página atual, faça um if/else em cada item do menu, comparando se oque está na URL é igual à ele.. se for, você adiciona a classe, senão, não coloca nada.

UMARIZAL · Setembro 17, 2009

isso se deve ao fato de você não estar trocando a classe 'selecionado' conforme muda de página.

Já que vai usar essa técnida para mostrar a página atual, faça um if/else em cada item do menu, comparando se oque está na URL é igual à ele.. se for, você adiciona a classe, senão, não coloca nada.

Willian, você poderia me dar um exemplo de código de como fazer isso (com apenas um ítem, eu faço os demais)? Não entendo nada de PHP, sou um aventureiro nesta área... rs.

Thiago Retondar · Setembro 17, 2009

Ué, cara. Não entendi... Aqui está normal. Olhe:

Imagem Postada

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

UMARIZAL · Setembro 17, 2009

Uai... vai entender... te juro que aqui não tá ficando... e testei no Firefox 3.5.3 / Internet Explorer 8 / Google Chrome 3.

Olha:

Thiago Retondar · Setembro 17, 2009

Oxe... ò.Ó Não tenho como testar em browsers para Windows agora. =/

Mas é simples. Através de um script, é só adicionar uma class="ativo" por exemplo no link.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

UMARIZAL · Setembro 17, 2009

Oxe... ò.Ó Não tenho como testar em browsers para Windows agora. =/

Mas é simples. Através de um script, é só adicionar uma class="ativo" por exemplo no link.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Hehe, como disse acima, sou totalmente leigo no assunto... vou jogando no "erro e acerto"... teria como me dar um exemplo de código (apenas de 1 dos ítens) para eu entender e fazer com os demais?

William Bruno · Setembro 17, 2009

Putz cara... é um dropdown.. =X

isso significa que para fazer com server-side.. vai dar mais trabalho do que com css.. mas tudo bem...

<?php
	$pag = $_GET['pagina'];
	if( $pag=='principal' || $pag=='' )
		$pagina_principal=' class="selecionado" ';
	else if( $pag=='=historia-da-empresa' || $pag=='nossos-objetivos-e-valores' 
		|| $pag=='organizacao-gerencial' || $pag=='responsabilidade-social-e-ambiental' )
		$sobre_nos=' class="selecionado" ';
?>	
	<ul class="principal"> 
		<li id="first" <?php echo $pagina_principal; ?>><a href="?pagina=principal"><span>PÁGINA PRINCIPAL</span></a> 
        </li> 
		<li><a href="#"><span>A EMPRESA</span></a> 
			<ul class="nivel2"> 
				<li <?php echo $sobre_nos; ?>><a href="#" class="submenu">Sobre nós</a> 
					<ul class="nivel3"> 
						<li><a href="?pagina=historia-da-empresa">Nossa História</a></li> 
						<li><a href="?pagina=nossos-objetivos-e-valores">Objetivos e valores</a></li> 
						<li><a href="?pagina=organizacao-gerencial">Organização</a></li> 
   						<li><a href="?pagina=responsabilidade-social-e-ambiental">Responsabilidades</a></li> 
					</ul> 
				</li>

ou seja, você terá que testar com ifs, se algum dos itens do submenu, está na URL.. se estiver.. você atribui à varável que eu coloquei nos LI, a classe... separei dessa forma, para ficar menos poluído.

Arquivado

Menu dropdown 100% em CSS, tem como?

Recommended Posts

UMARIZAL 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Renan Decarlo 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

UMARIZAL 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

UMARIZAL 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

UMARIZAL 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

UMARIZAL 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

UMARIZAL 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

UMARIZAL 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

UMARIZAL 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

UMARIZAL 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

UMARIZAL 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501