Boa tarde amigo, comigo deu tudo certo mas na hora de clicar no botão com o + para abrir o menu circular ele não abre, vou deixar o meu código, se poder, por favor verifica para mim qual foi o meu erro, gostaria muito de usar o efeito obrigado;
Uma coisa que tenho dúvida é sobre a regra dos "id" Recomendam que use um por página, mas vejo muitos exemplos com vários, tipo desse tutorial na tag "a" Isso não afeta em nada a regra? É permitido em qual circunstância?
Comments
Author
seu canal é incrível, meus parabéns aulas simples e objetivas, obg por compartilhar conosco
Author
Ótimo vídeo cara! Ganhou mais um inscrito. Obrigado por ter esse tempo livre e compartilhar isso conosco.
Author
Muito bom!
Author
Sua aulas são top brother, parabéns pelo canal !!!
Author
Muito bom
Author
E se eu quiser colocar isso tudo no centro da pagina como faz?
Author
Adoro seu canal mano, você explica e as aplica de uma forma bem simples e fácil de entender 😀
Author
E muito legal; ate eu que estou com 60, estou aprendendo
Author
Parabéns irmão
Author
Eu adorei ♥ … Obrigada por compartilhar seus conhecimentos ☺ Parabéns !!!
Author
como colocar minha fanpage de um site gospel, dentro do site PHP
Author
hola…. no me gira el central.. tengo bien el código.. que puede ser?
Author
como meter dados em cada opção do menu
Author
Qual o nome do programa
Author
Show de bola.
Merece muitos likes.
Author
muchas gracias amigos
Author
meu css não funciona no CHROME, já atualizei o navegador estou usando o webkit e nada. Vc sabe o que pode ser?
Author
Boa tarde amigo, comigo deu tudo certo mas na hora de clicar no botão com o + para abrir o menu circular ele não abre, vou deixar o meu código, se poder, por favor verifica para mim qual foi o meu erro, gostaria muito de usar o efeito obrigado;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Slide CSS3 </title>
<style>
*{
margin:0;
padding: 0;
}
body {
background-color: #414950;
}
nav{
margin: 150px; auto;
width: 450px;
height: 450px;
}
#check{
display: nane;
}
#central{
cursor: pointer;
width: 150px;
height: 150px;
position: absolute;
margin: 150px 150px;
z-index: 1;
}
#central img{
width: 100%;
transition: all .4s ease-in-out;
border-radius: 50%;
}
.link{
position: absolute;
margin: 195px 195px;
width: 60px;
height: 60px;
border-radius: 50%;
transition: all .1s ease-out;
}
#check:checked ~ a #link_01{
transform: translateY(-195px);
}
#check:checked ~ a #link_02{
transform: translateX(195px);
transition-delay: .1s;
}
#check:checked ~ a #link_03{
transform: translateY(195px);
transition-delay: .2s;
}
#check:checked ~ a #link_04{
transform: translateX(-195px);
transition-delay: .3s;
}
#check:checked ~ #central img{
transform: rotate(45deg);
}
</style>
</head>
<body>
<nav>
<imput type="checkbox" id="check">
<label id="central"for="check"> <img src="central.png"/></label>
<a href="#"><img class="link" id="link_01" src="01.png"/></a>
<a href="#"><img class="link" id="link_01" src="02.png"/></a>
<a href="#"><img class="link" id="link_01" src="03.png"/></a>
<a href="#"><img class="link" id="link_01" src="04.png"/></a>
</nav>
</body>
</html>
Author
<!DOCTYPE html>
<html>
<head>
<title>Menu circular com css3</title>
<style>
*{
padding: 0px;
margin: 0px;
}
body{
background-color: #414950;
}
nav{
margin: 150px auto;
width: 450px;
height: 450px;
}
#check{
display: none;
}
#central{
cursor: pointer;
width: 150px;
height: 150px;
position: absolute;
margin: 150px 150px;
z-index: 1;
}
#central img{
width: 100%;
transition: all .4s ease-in-out;
border-radius: 50%;
}
.link{
position: absolute;
margin: 195px 195px;
width: 60px;
height: 60px;
border-radius: 50%;
transition: all .1s ease-out;
}
#check:checked ~ a #link_01{
transform: translateY(-195px);
}
#check:checked ~ a #link_02{
transform: translateX(195px);
transition-delay: .1s;
}
#check:checked ~ a #link_03{
transform: translateY(195px);
transition-delay: .2s;
}
#check:checked ~ a #link_04{
transform: translateX(-195px);
transition-delay: .3s;
}
#check:checked ~ #central img{
transform: rotate(45deg);
}
</style>
</head>
<body>
<nav>
<input type="checkbox" id="check" />
<label id="central" for="check"><img src="central.png"/></label>
<a href="#"><img class="link" id="link_01" src="01.png"></img></a>
<a href="#"><img class="link" id="link_02" src="02.png"></img></a>
<a href="#"><img class="link" id="link_03" src="03.png"></img></a>
<a href="#"><img class="link" id="link_04" src="04.png"></img></a>
</nav>
</body>
</html>
Author
Uma coisa que tenho dúvida é sobre a regra dos "id"
Recomendam que use um por página, mas vejo muitos exemplos com vários, tipo desse tutorial na tag "a"
Isso não afeta em nada a regra? É permitido em qual circunstância?
Author
Aprendi bastante! Obrigado!
Author
como eu posiciono ele nos cantos da pagina?