Menu Popup em Css!

G-Gordo · Janeiro 2, 2009

Ola pessoal do forum,mais uma vez venho pedir ajuda como sempre rs,bem eu estou desenvovendo um site de eventos,onde fiz um menu todo em css com rollover de imagens e nesse menu quero colocar outros itens em um menu popup na horizontal,fiz tudo mais nao to conseguindo fazer o sub menu aparecer e ate msm sumir eu fiz uma div para ele com visibility: Hidden; para ela fica invisivel,mais não to conseguindo fazer ela fica visivel, se alguem puder me ajudar mais uma vez ^^ vou fica mto grato,bem eu ja tentei com os comportamentos padrões do dw mais nada o sub menu aparece mais some logo em seguida,nao deixando o ponteiro do mouse ir nos sub itens.

bem o menu que eu fiz é parecido com este http://www.obasicodaweb.com/exemplos/menu-...r/exemplo8.html

seguindo este tutorial http://www.obasicodaweb.com/menu-imagens-rollover-exemplo

ate então o menu fico legal só não estou msm conseguindo fazer o popup com os submenus.

William Bruno · Janeiro 2, 2009

Tente esse tuto de menu dropdown..

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

a idéia é usar a seguinte marcação:

<ul>
   <li>Primeiro Item
	  <ul>
			<li>Sub Menu do Primeiro Item</li>
			<li>Sub Menu do Primeiro Item</li>
			<li>Sub Menu do Primeiro Item</li>
			<li>Sub Menu do Primeiro Item</li>
	  </ul>
   </li><!-- /fecha o li do primeiro item -->
   <li>Segundo Item ...

O rollover em si é simples...

para fazer o dropdown, dê um display none no segundo ul, e dê block no estado :hover do primeiro li.

é melhor os displays do que os visibility nesses casos de menus.. pois o hidden, não tira o espaço q o elemento ocupava... só esconde...

Vai fazendo, e poste o teu código ou um link pro teu site...

G-Gordo · Janeiro 2, 2009

Willian vlw pela dica,mais eu não sei se vai me servir pois no meu rollover ja usei os parametros ul e li não sei se vai dar um bug mais vou testar eu to olhando esse menu do maujor a 2 dias e não arrumei nada na sua adaptação =\ mais vlw msm

William Bruno · Janeiro 2, 2009

Esse código tá bem ruizinho... esse image replacemente está meio mal feito...

melhor seria um sprite para cada item...

veja, fiz uma rápida adaptação só pra te dar uma idéia..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Menu com imagens e rollover, usando CSS - Resultado final</title>
  <style type="text/css">
	* {
		list-style: none;
	}
	#menu{
	  position:relative;
	  width:186px;
	  height:35px;
	  background:url(http://www.obasicodaweb.com/exemplos/menu-rollover/img2.gif) no-repeat 0 0;
	}
	#menu ul{
	  list-style:none;
	}
	#menu li{
	  float: left;
	  height:35px;
	  position: relative;
	}
	#menu li a{
	  position:absolute;
	  display:block;
	  width:100%;
	  height:100%;
	  top:0;
	  cursor:pointer;
	}
	#menu li a span{
	  position:absolute;
	  display:block;
	  width:100%;
	  height:100%;
	  top:0;
	}
	#um{
	  width:53px;
	}
	#dois{
	  width:61px;
	}
	#tres{
	  width:72px;
	}
	#um a span{
	  background:url(http://www.obasicodaweb.com/exemplos/menu-rollover/img2.gif) no-repeat 0 0;
	}
	#dois a span{
	  background:url(http://www.obasicodaweb.com/exemplos/menu-rollover/img2.gif) no-repeat -53px 0;
	}
	#tres a span{
	  background:url(http://www.obasicodaweb.com/exemplos/menu-rollover/img2.gif) no-repeat -114px 0;
	}
	#menu ul li a:hover{
	  z-index:1000;
	}
	#um a:hover span{
	  background:url(http://www.obasicodaweb.com/exemplos/menu-rollover/img2.gif) no-repeat 0 -35px;
	}
	#dois a:hover span{
	  background:url(http://www.obasicodaweb.com/exemplos/menu-rollover/img2.gif) no-repeat -53px -35px;
	}
	#tres a:hover span{
	  background:url(http://www.obasicodaweb.com/exemplos/menu-rollover/img2.gif) no-repeat -114px -35px;
	}
	#menu li ul {
		display: none;
	}
	#menu li:hover ul {
		width: 160px;
		display: block;
		position: absolute;
		top: 35px;
		left: -35px;
	}
	#menu li ul li {
		float: none;
		height: 20px;
	}
  </style>
  <ul id="menu">
	<li id="um"><a href="#"><span></span>Início</a>
		<ul>
			<li><a href="">Primeiro Sub Menu</a></li>
			<li><a href="">Primeiro Sub Menu</a></li>
			<li><a href="">Primeiro Sub Menu</a></li>
		</ul>
	</li>
	<li id="dois"><a href="#"><span></span>Artigos</a>
		<ul>
			<li><a href="">Segundo Sub Menu</a></li>
			<li><a href="">Segundo Sub Menu</a></li>
		</ul>
	</li>
	<li id="tres"><a href="#"><span></span>Contato</a>
		<ul>
			<li><a href="">Terceiro Sub Menu</a></li>
		</ul>
	</li>
  </ul><!-- /menu -->

Falta arrumar o bug do :hover do IE6, e arrumar esse rollover.. q está meio mal feito.

G-Gordo · Janeiro 2, 2009

Willian fiz essa pequena alteração msm com erro que você fez mais nao deu mto certo nao meu sub menu aparece e some logo em seguida quando tiro o mouse do item nem da tempo pra clicar no sub menu ve nesse endereço

http://www.nightmixrio.com/oligator_eventos o item é serviços

William Bruno · Janeiro 2, 2009

Isso é porque está "longe".

Aproxime o submenu do menu.. veja que no meu exemplo, dá pra chegar com o mouse até lá...

você colocou relative no LI do menu?

vai ajustando o top do position absolute do UL do submenu, até colar no LI do menu.

Está acontecendo, q o mouse está saindo de cima do menu, por estar longe..

G-Gordo · Janeiro 2, 2009

po estar longe eu sei eu msm deixei longe mais nao fica nem perto tbm,se eu aproxima mto ele some,e tipo como assim ul ? do menu nao itendi meu code ta assim:

* {
	 list-style: none;
}
#menu{
	  position:absolute;
	  width:670px;
	  height:45px;
	  background:url(layout/menu.jpg) no-repeat 0 0;
	}
	#menu ul{
	  list-style:none;
	}
	#menu li{
	  position:absolute;
	  top:0;
	  height:45px;
	}
	#menu li a{
	  position:absolute;
	  display:block;
	  width:100%;
	  height:100%;
	  top:0;
	  cursor:pointer;
	}
	#menu li a span{
	  position:absolute;
	  display:block;
	  width:100%;
	  height:100%;
	  top:0;
	}
#home{
	  width:51px;
	  left:0;
	}
	#galeria{
	  width:74px;
	  left:51px;
	}
	#servicos{
	  width:83px;
	  left:124px;
	}
	#quem{
	  width:104px;
	  left:207px;
	}
	#festas{
	  width:63px;
	  left:310px;
	}
	#acao{
	  width:152px;
	  left:372px;
	}
	#clientes{
	  width:74px;
	  left:525px;
	}
	#contato{
	  width:72px;
	  left:600px;
	}
#home a span{
	  background:url(layout/menu.jpg) no-repeat 0 0;
	}
	#galeria a span{
	  background:url(layout/menu.jpg) no-repeat -50px 0;
	}
	#servicos a span{
	  background:url(layout/menu.jpg) no-repeat -123px 0;
	}
	#quem a span{
	  background:url(layout/menu.jpg) no-repeat -205px 0;
	}
	#festas a span{
	  background:url(layout/menu.jpg) no-repeat -309px 0;
	}
	#acao a span{
	  background:url(layout/menu.jpg) no-repeat -372px 0;
	}
	#clientes a span{
	  background:url(layout/menu.jpg) no-repeat -524px 0;
	}
	#contato a span{
	  background:url(layout/menu.jpg) no-repeat -600px 0;
	}
#menu ul li a:hover{
	  z-index:1000;
	}
	#home a:hover span{
	  background:url(layout/menu.jpg) no-repeat 0 -45px;
	}
	#galeria a:hover span{
	  background:url(layout/menu.jpg) no-repeat -50px -45px;
	}
	#servicos a:hover span{
	  background:url(layout/menu.jpg) no-repeat -123px -45px;
	}
	#quem a:hover span{
	  background:url(layout/menu.jpg) no-repeat -205px -45px;
	}
	#festas a:hover span{
	  background:url(layout/menu.jpg) no-repeat -309px -45px;
	}
	#acao a:hover span{
	  background:url(layout/menu.jpg) no-repeat -372px -45px;
	}
	#clientes a:hover span{
	  background:url(layout/menu.jpg) no-repeat -524px -45px;
	}
	#contato a:hover span{
	  background:url(layout/menu.jpg) no-repeat -600px -45px;
	}
#menu li ul {
	display: none;
}
#menu li:hover ul {
	width: 160px;
	display: block;
	position: absolute;
	top: 100px;
	left: -35px;
}
#menu li ul li {
	float: none;
	height: 20px;
}

William Bruno · Janeiro 2, 2009

Diminui isso uai..

#menu li:hover ul {
	width: 160px;
	display: block;
	position: absolute;
	top: 45px;
	left: -35px;
}

Não pode ficar longe mesmo.. se não só com javascript para você conseguir fazer o menu não sumir, ao mouse não estar por cima...

Tem que ficar numa distância tal, que ao rolar o mouse para baixo, não saia de cima do item.. e já entre em cima do submenu...

45px no teu caso, já q é essa a altura do UL do menu.

G-Gordo · Janeiro 2, 2009

fiz o q pediu e nao rolo kra,to quase desisitindo dessa joça rs e fazendo o menu porcão pelo dw rs

G-Gordo · Janeiro 2, 2009

Willian me tira uma duvida,você falo q usaria um sprite soh pra cada item do menu,isso será melhor.mais facil,pq se for posta ai pra mim fazer que eu faço rs

William Bruno · Janeiro 4, 2009

é sim cara...

melhor e mais fácil sim.

Sabe fazer ?

Poderia ter continuado à postar aqui... teu outro tópico ainda é o mesmo assunto..

Arquivado

Menu Popup em Css!

Recommended Posts

G-Gordo 0

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

G-Gordo 0

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

G-Gordo 0

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

G-Gordo 0

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

G-Gordo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

G-Gordo 0

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

Orientação - Codificação Caracteres Especiais em Java

Não consigo carregar imagem do captcha no meu formulário

Estou criando uma calculadora de m2 e litros de tinta

Fóruns

Tempo Real

Informação importante