Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

RoBINHoDC

Css menu

Por , em Desenvolvimento frontend

Recommended Posts

RoBINHoDC    1

RoBINHoDC
Postado

Bom galera to até sem jeito de voltar aki denovo e abrir outro topico, achei que tinha resolvido mas na pratica mesmo, não consegui não, após mostrar para o meu cliente ela não gostou nada e falou que não queria isso...

O que ela quer é que tenha esse formato, só que com os icones do menu, que foi colocado no layout. Não sei o que faço pois o que eu consegui foi com a ajuda do Marcelo, preciso de algo que junta-se o do marcelo com o os icones do meu layout... será que alguem pode me ajudar??

 

a Imagem do site

 

abaixo segue o codigo que o Marcelo me ajudou

 

<!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=utf-8" />
<title>Border</title>
<style type="text/css">

#cont-div{
position:relative;
margin-left:200px;
}

.menu-home, .menu-quem-somos, .menu-produtos, .menu-orcamento, .menu-contato{
width:0px;
height:0px;
border-left:80px solid transparent; 
border-right:80px solid transparent;
border-top:300px solid transparent; 
border-radius: 100%;
cursor:pointer;
}

.menu-home{  
border-top-color:#060;
-webkit-transform: rotate(-40deg);  
-moz-transform:    rotate(-40deg);  
-ms-transform:     rotate(-40deg); 
-o-transform:           rotate(-40deg); 
transform:              rotate(-40deg); 
}
.menu-home:hover{border-top-color:#090;}

.menu-quem-somos{
border-top-color:#CF3;
-webkit-transform: rotate(-70deg);  
-moz-transform:    rotate(-70deg);  
-ms-transform:     rotate(-70deg); 
-o-transform:           rotate(-70deg); 
transform:              rotate(-70deg); 
top:-235px;
left:-45px;
position:relative;
margin-top:3px;
}
.menu-quem-somos:hover{border-top-color:#9F6;}

.menu-produtos{
border-top-color:#06F;
-webkit-transform: rotate(-100deg);  
-moz-transform:    rotate(-100deg);  
-ms-transform:     rotate(-100deg); 
-o-transform:           rotate(-100deg); 
transform:              rotate(-100deg); 
top:-457px;
left:-50px;
position:relative;
margin-top:3px;
}
.menu-produtos:hover{border-top-color:#06C;}

.menu-orcamento{
border-top-color:#C3F;
-webkit-transform: rotate(-130deg);  
-moz-transform:    rotate(-130deg);  
-ms-transform:     rotate(-130deg); 
-o-transform:      rotate(-130deg); 
transform:                 rotate(-130deg); 
top:-686px;
left:-17px;
position:relative;
margin-top:3px;
}
.menu-orcamento:hover{border-top-color:#C6F;}

.menu-contato{
border-top-color:#C03;
-webkit-transform: rotate(-160deg);  
-moz-transform:    rotate(-160deg);  
-ms-transform:     rotate(-160deg); 
-o-transform:      rotate(-160deg); 
transform:                 rotate(-160deg); 
top:-938px;
left:45px;
position:relative;
margin-left:3px;
}
.menu-contato:hover{border-top-color:#C06;}


</style>
</head>
<body>

<div id="cont-div">
       <div class="menu-home"></div>
   <div class="menu-quem-somos"></div>
   <div class="menu-produtos"></div>
   <div class="menu-orcamento"></div>
   <div class="menu-contato"></div>
</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Augusto    417

Bruno Augusto
Postado

Achei que fosse mais difícil já que não manjo muito de CSS3, mas foi bem fácil.

 

Primeiro você tem de adicionar os ícones, óbvio. Eu optei por uma tag IMG dentro de cada item do menu.

 

Depois você tem de desfazer a rotação. Apesar de none servir para isso, no Fiddle não funcionou, então eu copiei o valor do elemento pai (a DIV) e inverti o sinal.

 

Por fim, basta posicionar absolutamente e ajustar o top e o left

 

Fiz um no Fiddle para demonstrar.

 

Seja lá quem for o Marcelo que você mencionou, parabéns. :clap:

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoBINHoDC    1

RoBINHoDC
Postado

Achei que fosse mais difícil já que não manjo muito de CSS3, mas foi bem fácil.

 

Primeiro você tem de adicionar os ícones, óbvio. Eu optei por uma tag IMG dentro de cada item do menu.

 

Depois você tem de desfazer a rotação. Apesar de none servir para isso, no Fiddle não funcionou, então eu copiei o valor do elemento pai (a DIV) e inverti o sinal.

 

Por fim, basta posicionar absolutamente e ajustar o top e o left

 

Fiz um no Fiddle para demonstrar.

 

Seja lá quem for o Marcelo que você mencionou, parabéns. :clap:/>

 

oh bruno desculpa eu estar incomodando cara, mas tento mudar aki e não acontece nada, já fiz o png com o tamanho do icone que você colocou mas não muda nada cara...

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoBINHoDC    1

RoBINHoDC
Postado

Posta como você fez então.

 

<!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=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#cont-div{
position:relative;
margin-left:200px;
}

.menu-home, .menu-quem-somos, .menu-produtos, .menu-orcamento, .menu-contato{
width:0px;
height:0px;
border-left:80px solid transparent; 
border-right:80px solid transparent;
border-top:300px solid transparent; 
border-radius: 100%;
cursor:pointer;
}

.menu-home{  
border-top-color:#060;
-webkit-transform: rotate(-40deg);  
-moz-transform:    rotate(-40deg);  
-ms-transform:     rotate(-40deg); 
-o-transform:           rotate(-40deg); 
transform:              rotate(-40deg); 
}
.menu-home:hover{border-top-color:#090;}

.menu-quem-somos{
border-top-color:#CF3;
-webkit-transform: rotate(-70deg);  
-moz-transform:    rotate(-70deg);  
-ms-transform:     rotate(-70deg); 
-o-transform:           rotate(-70deg); 
transform:              rotate(-80deg); 
top:-235px;
left:-45px;
position:relative;
margin-top:3px;
}
.menu-quem-somos:hover{border-top-color:#9F6;}

.menu-produtos{
border-top-color:#06F;
-webkit-transform: rotate(-100deg);  
-moz-transform:    rotate(-100deg);  
-ms-transform:     rotate(-100deg); 
-o-transform:           rotate(-100deg); 
transform:              rotate(-100deg); 
top:-457px;
left:-50px;
position:relative;
margin-top:3px;
}
.menu-produtos:hover{border-top-color:#06C;}

.menu-orcamento{
border-top-color:#C3F;
-webkit-transform: rotate(-130deg);  
-moz-transform:    rotate(-130deg);  
-ms-transform:     rotate(-130deg); 
-o-transform:      rotate(-130deg); 
transform:                 rotate(-130deg); 
top:-686px;
left:-17px;
position:relative;
margin-top:3px;
}
.menu-orcamento:hover{border-top-color:#C6F;}

.menu-contato{
border-top-color:#C03;
-webkit-transform: rotate(-180deg);  
-moz-transform:    rotate(-180deg);  
-ms-transform:     rotate(-180deg); 
-o-transform:      rotate(-180deg); 
transform:                 rotate(-180deg); 
top:-938px;
left:45px;
position:relative;
margin-left:3px;
}
.menu-contato:hover{border-top-color:#C06;}

div[class*="home"] img {
-webkit-transform: rotate(40deg);  
-moz-transform:    rotate(40deg);  
-ms-transform:     rotate(40deg); 
-o-transform:      rotate(40deg); 
transform:         rotate(40deg);
   height: 64px; width: 64px;
   position: absolute;
}
div[class*="quem-somos"] img {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(150deg);
height: 64px;
width: 64px;
position: absolute;
}
div[class*="produtos"] img {
-webkit-transform: rotate(80deg);
-moz-transform: rotate(80deg);
-ms-transform: rotate(80deg);
-o-transform: rotate(80deg);
transform: rotate(140deg);
height: 64px;
width: 64px;
position: absolute;
}
div[class*="orcamento"] img {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(180deg);
height: 64px;
width: 64px;
position: absolute;
}
div[class*="contato"] img {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(150deg);
height: 64px;
width: 64px;
position: absolute;
}

div.menu-home img {
   top: -265px;
   left: -28px;
}
​
div.menu-quem-somos img {
top: -305px;
left: -38px;
}
​ div.menu-produtos img {
top: -305px;
left: -38px;
}
​ div.menu-orcamento img {
top: -305px;
left: -38px;
}
​ div.menu-contato img {
top: -305px;
left: -38px;
}
.menu-contato1 {width:0px;
height:0px;
border-left:80px solid transparent; 
border-right:80px solid transparent;
border-top:300px solid transparent; 
border-radius: 100%;
cursor:pointer;
}
.menu-home1 {width:0px;
height:0px;
border-left:80px solid transparent; 
border-right:80px solid transparent;
border-top:300px solid transparent; 
border-radius: 100%;
cursor:pointer;
}
.menu-orcamento1 {width:0px;
height:0px;
border-left:80px solid transparent; 
border-right:80px solid transparent;
border-top:300px solid transparent; 
border-radius: 100%;
cursor:pointer;
}
.menu-produtos1 {width:0px;
height:0px;
border-left:80px solid transparent; 
border-right:80px solid transparent;
border-top:300px solid transparent; 
border-radius: 100%;
cursor:pointer;
}
</style>
</head>

<body>

<div id="cont-div">
       <div class="menu-home">
           <img src="images/home.png" />
           </div>
   <div class="menu-quem-somos">
   <img src="images/quem_somos.png" />
   </div>
   <div class="menu-produtos">
   <img src="images/produto.png" />
   </div>
   <div class="menu-orcamento">
   <img src="images/orcamento.png" />
   </div>
   <div class="menu-contato">
   <img src="images/contato.png" />
   </div>
</div>​

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Augusto    417

Bruno Augusto
Postado

Parece que pelo jeito você errou nas rotações.

 

Pela imagem que você postou, todas elas ficariam na mesma posição da primeira.

 

Então parta do princípio que todas elas são iguais e vá girando aos pouquinhos, pra esquerda ou pra direita.

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoBINHoDC    1

RoBINHoDC
Postado

Parece que pelo jeito você errou nas rotações.

 

Pela imagem que você postou, todas elas ficariam na mesma posição da primeira.

 

Então parta do princípio que todas elas são iguais e vá girando aos pouquinhos, pra esquerda ou pra direita.

 

eu não sei aonde gira, nem aonde move elas para o lado, tentei achar a função, mas aonde eu altero, não muda, nem gira.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Augusto    417

Bruno Augusto
Postado

Posicionar o elemento é coisa básica que qualquer um deve saber, mas em todo o caso, um tutorial ajuda.

 

Já a rotação é um pouquinho só mais complicado, e o Maujor arrebentou com a Tutorial Interativo de CSS3

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito