Entrar Ainda não tem acesso?
6
respostas

Transição em 3 ícons no menu

Referente ao curso Cordova & PhoneGap: Apps mobile com HTML, CSS e JS, no capítulo Primeira App com PhoneGap Build e atividade Opcional: Transições animadas com CSS

por Estudante
| 71.2k xp | 11 posts

Bom dia,

Eu acrescentei um botão de HOME além dos já existentes (bolos e bebidas) e gostaria de saber como ficaria o CSS para dar o efeito de transição entre eles.

Obrigado.

Meu código está assim:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,inital-scale=1">
    <link rel="stylesheet" type="text/css" href="css/estilo.css">
    <title>App</title>
</head>
<body>
    <input type="radio" name="opcao" id="opcao-home" checked>
    <label for="opcao-home">Home</label>

    <input type="radio" name="opcao" id="opcao-bolos">
    <label for="opcao-bolos">Bolos</label>

    <input type="radio" name="opcao" id="opcao-bebidas">
    <label for="opcao-bebidas">Bebidas</label>

    <img src="imagens/menu-home.png" id="menu-home" class="menu">
    <img src="imagens/menu-bolos.png" id="menu-bolos" class="menu">
    <img src="imagens/menu-bebidas.png" id="menu-bebidas" class="menu">
</body>
</html>

CSS

body {
    background: #3D1A11;
    font-family: sans-serif;
    margin: 0;
    text-align: center;
}

#opcao-bolos:checked ~ #menu-bebidas,
#opcao-bolos:checked ~ #menu-home,
#opcao-bebidas:checked ~ #menu-home,
#opcao-bebidas:checked ~ #menu-bolos,
#opcao-home:checked ~ #menu-bolos,
#opcao-home:checked ~ #menu-bebidas {
    display: none;
}

input[type=radio] {
    display: none;
}
.menu {
    width: 100%;
    margin-bottom: 100px;
}

label {
    background: center 0.5em no-repeat #563429;
    background-size: 4em;
    color: white;
    display: block;
    font-size: 75%;
    padding: 4.5em 0 1em;
    text-transform: uppercase;
    width: 33.4%;
    position: fixed;
    bottom: 0;
    z-index: 1;
}
    label[for=opcao-home] {
        left: 0%;
        background-image: url(../imagens/icone-home.svg);
    }

    label[for=opcao-bolos] {
        right: 33.4%;
        background-image: url(../imagens/icone-bolos.svg);
    }
    label[for=opcao-bebidas] {
        right: 0;
        background-image: url(../imagens/icone-bebidas.svg);
    }
    :checked + label {
        background-color: #E4876D;
    }
6 respostas
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Que tipo de transição você quer fazer, ela já aparece em outra classe ou elemento?

por Estudante
| 71.2k xp | 11 posts

Bom dia,

O efeito seria de transição normal - translateX - para não ficar o clique "seco" .

por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Hum, não consigo imaginar. Tem uma página na internet que você viu esse efeito pra mostrar como exemplo?

por Daniel Omnion
| 1014.4k xp | 1150 posts

Seria algo assim?

https://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
por Estudante
| 71.2k xp | 11 posts

No curso, o instrutor dá uma opção de transição para o código original que é com dois botões. O que eu não estou conseguindo fazer, é que essa transição funcione em três botões do menu (meu código que enviei acima está com 3 botões). Segue o código do curso para a transição com 2 botões. Acho que assim ajuda mais. 

<div class="container-menus">
    <img src="imagens/menu-bolos.png" alt="Nossos bolos"
         id="menu-bolos" class="menu">

    <img src="imagens/menu-bebidas.png" alt="As Bebidas" 
         id="menu-bebidas" class="menu">
</div>
html,
body {
    overflow-x: hidden;
    width: 100%;
}
.container-menus {
    transform: translateX(0);
    transition: transform 300ms ease;
    width: 200%;
}

.container-menus .menu {
    float: left;
    width: 50%;
}

#opcao-bebidas:checked ~ .container-menus {
    transform: translateX(-50%);
}
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

É... parece que não é só pensar como HTML eu tenho que levar a interface do Cordova em mente. Cheguei até aqui https://codepen.io/neoandrevictor/pen/jQZLJO mas to sem idéias, tenho que estudar mais. Será que algum instrutor pode nos ajudar?