Menu Dropdown

[CrazyLOL 2]

Galera to procurando um menu aqui dropdown só que não estou conseguindo encontrar e gostaria de ver ser alguém de vocês teriam esse menu..

 

é bem simples

 

eu tenho uma imagem que é um botão, e queria que na hora que o usuario passasse o mouse em cima mudaria essa imagem e aparecia uma lista de links.

 

tó rodando a net aqui só que não encontro nesse estilo, alguém teria perdido por ai?

 

Muito obrigado :)

[ricardo_mc 19]

Não sei se entendi. Você quer um menu que ao passar o mouse em cima ele abra novos menus? Estilo esse aqui: http://unlock.com.br/projeto_css/

 

Ou você quer que a imagem suma e uma lista de links fique visível?

[CrazyLOL 2]

Oi Ricardo, a ideia é a seguinte:

 

- tem uma imagem no meu site ( exemplo uma circulo ) quando passar o mouse em cima desse circulo ele vira um quadrado e surge uma lista de opções que seria os links.

 

deu pra entender +/- ? rssrs

[ricardo_mc 19]

Humm, seria +- isso aqui? Teste ai.

 

HTML

<div class="overlap"> <img src="http://bytescout.com/files/images/examples/bytescoutpdf/circle.png" width="300px" height="300px"/>
 <ul>
   <li>item 01</li>
   <li>item 01</li>
   <li>item 01</li>
   <li>item 01</li>
 </ul>
</div>

 

 

CSS

.overlap {
width: 300px;
height: 300px;
position: relative;
}
.overlap img {
position: absolute;
}
.overlap:hover img {
display: none;
}

[CrazyLOL 2]

Opáaaa Quase isso Ricardo... rss

 

vou ver se consigo ser mais claro..

no caso esse script que você fez tá ok.. quase isso.

 

no caso tem a imagem redonda, ok, a ideia é que o menu dropdown apareça quando passe o mouse em cima desse circulo porém quando passar o mouse além do menu dropdown aparecer a imagem mudar de circulo para quadrado.

 

mas já agradeço antecipadamente a sua grand ajuda :)

[ricardo_mc 19]

É cara, não está claro ainda.

 

Quando passar o mouse em cima da imagem, muda de cículo pra quadrado? E onde que aparece esse menu? É um DropDown? Ele aparece em baixo da imagem?

 

Se você passar o link do site que isso vai ficar, já ajuda a entender o que exatamente você quer.

[CrazyLOL 2]

Isso mesmo que você falou, a imagem de circulo vai ser uma quadrado e o menu dropdown aparecia abaixo do quadrado...

o site só tá aqui na minha maquina localhost.

[ricardo_mc 19]

Tenta isso aqui, vê se resolve o que você quer. Coloquei uns efeitinhos de quebra.

 

HTML

<div class="overlap">
<span class="imagem"></span> 
   <ul class="lista">
       <li>item 01</li>
       <li>item 01</li>
       <li>item 01</li>
       <li>item 01</li>
   </ul>
</div>

 

 

CSS

.overlap {
width: 150px;
height: auto;
}
.overlap .lista{
display:none;
float:left;	
}
.overlap .imagem {
float:left;
width:150px;
height:150px;
background:#096;
-moz-border-radius: 75px; 
-webkit-border-radius: 75px;  
border-radius: 75px;  
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.overlap:hover .imagem {
background:#930;
-moz-border-radius: 0; 
-webkit-border-radius: 0;  
border-radius: 0;  
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.overlap:hover .lista{
display:block;
}

[CrazyLOL 2]

Putz Ricardo isso mesmo, top....

Só que 2 coisas no caso quando ele vira quadrado e vou levar o mouse para os links ele volta para o circulo, no caso nao ta dando como clicar.

 

E outra coisa se eu quiser substituir o circulo e o quadrado para uma imagens ( que no caso será o meus botoes ) onde altero?

 

MUITOOO OBRIGADO!!!!!

[ricardo_mc 19]

A sim, eu esqueci de colocar float:left na classe .overlap.

 

Só fazer isso que resolve seu problema.

 

Pra trocar por imagem, é só mexer na propriedade background do CSS.

 

Coloca assim pra colocar uma imagem ao invés da cor:

.imagem{
   background:url(link-da-sua-imagem.xxx) no-repeat;
}

[CrazyLOL 2]

Putz cara ficou muito muito top!!!!

Muitooo obrigadooo mesmo, to vendo que alem de programar em php preciso aprender muito ainda em css kkk

 

Ricardo só uma ultima coisa como posso por uma cor de fundo nessa parte da lista do menu?

 

mas o restante muito obrigado!

[ricardo_mc 19]

Putz cara ficou muito muito top!!!!

Muitooo obrigadooo mesmo, to vendo que alem de programar em php preciso aprender muito ainda em css kkk

 

Ricardo só uma ultima coisa como posso por uma cor de fundo nessa parte da lista do menu?

 

mas o restante muito obrigado!

 

Repare que eu coloquei o background:#096; dentro do SPAN de classe .imagem. Basta fazer o mesmo para os outros elementos.

 

A lista é composta de <ul> (elemento mãe da lista) e <li> (é cada item da lista). Você pode colocar um background na <ul> que vai englobar toda a lista ou simplesmente em cada item.

 

.ul lista{background:.....}

 

ou

 

.ul.lista li {background:....} // dessa forma vai pegar em todas as <li> dentro da <ul class="lista">

[CrazyLOL 2]

Dessa forma?

 

.ul .lista{

background:#F3C5C5;

}

[ricardo_mc 19]

Dessa forma?

 

.ul .lista{

background:#F3C5C5;

}

 

 

Não.

 

Repare que a classe .lista pertence a tag <ul>. Declarei a tag assim: <ul class="lista">, então o CSS ficaria assim:

 

tag.classe {comandos do CSS}

 

Se eu colocasse uma ID ao invés de uma classe na tag, ficaria assim:

 

tag#ID {comandos do CSS}

 

Quando se declara no CSS que uma tag possui uma classe ou ID, não pode haver espaços entre essas declarações.

 

Usa-se o "." (ponto) para declarar classes no CSS e "#" (tralha" para as IDs.

 

Uma tag não precisa de pontos ou tralhas, porque elas já são nativas do HTML, apenas usamos isso se colocar classes ou IDs.

 

Ex:

 

<div class="testeClasse" id="testeID"></div>

div{background:#F60;}  // todas as tags <div> vão receber esse estilo
div.testeClasse{background:#000}  // apenas as tags <div> com a classe 'testeClasse' receberão esse estilo
div.#testeID{background:#D3D3D3;}  // apenas as tags <div> com a ID 'testeID' receberão esse estilo
div.testeClasse#testeID{background:#F5F5F5;}  // apenas as tags <div> com a classe 'testeClasse' e a ID 'testeID' receberão esse estilo

div.testeClasse span{background:#444;}  // toda a tag <span> dentro de uma tag <div> com a classe 'testeClasse' receberão esse estilo

.... e por aí vai....

 

Ficou claro?

[CrazyLOL 2]

Agora sim, entendi...rssss

 

Muitoo Obrigado pelas dicas e pela paciencia.. rsss

 

Abraço!

[CrazyLOL 2]

Ricardo, estou tentando por um efeito igual você fez na transição das imagens aqui quando surge a lista só que não está indo, até copiei a parte do codigo que tem essa transição.

 

  -moz-border-radius: 0; 
       -webkit-border-radius: 0;  
       border-radius: 0;  
       -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
       -ms-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
       transition: all 0.3s ease-in-out;

 

E coloquei 0.8s ( onde ele demora um pouco mais para aparecer né?) e coloquei aqui:

 

.honda:hover .lista{
       display:block;
	width:130px;
	background:#d90000;
	color:#FFF;	
	  -moz-border-radius: 0; 
       -webkit-border-radius: 0;  
       border-radius: 0;  
       -webkit-transition: all 0.8s ease-in-out;
       -moz-transition: all 0.8s ease-in-out;
       -ms-transition: all 0.8s ease-in-out;
       -o-transition: all 0.8s ease-in-out;
       transition: all 0.8s ease-in-out;
}

 

No caso não funciona dessa forma?