Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Problema com menu ativo

Referente ao curso Web Design Responsivo: Páginas que se adaptam do mobile ao desk

por Lucas Silva
| 133.2k xp | 28 posts
Estudante

Boa tarde pessoal. Estou com problema no menu lateral da aula 5. Quando acionado, o '.barra-nav:after' fica sobreposto ao menu (impossibilitando o uso, pois qualquer lugar da tela ao ser clicado fechará o menu), dando a impressão que o z-index do '.barra-nav' não está funcionando. Alguém pode me ajudar? Obrigado desde já :)

.menu-ativo .barra-nav{
    left: 0;
}
.menu-ativo:after{
    content: "";
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,0.1);
}
.barra-nav{
    background: #fff;
    height: 100%;
    width: 70%;
    max-width: 300px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: -70%;
    transition: left 0.5s ease-out;
}
8 respostas
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Lucas silva tudo bom? Acho que sei algo que pode ti ajudar, pode fazer um teste de colocar um z-index negativo no :after? :)

por Lucas Silva
| 133.2k xp | 28 posts
Estudante

Mario, deu muito certo!! haha , porém o after ficou atrás de todo os outros elemento da página quando deveria fica atras apenas do menu. Mas isso eu consigo arrumar atribuindo z-index para os outros elementos, correto?

por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Lucas, a class .menu-ativo, tem que ser aplicado na tag <html> de acordo com o exemplo passado no curso. Assim os elementos internos do html quando tiverem position:fixed; e o z-index:1; já ficaram por cima do mesmo e deixarão o efeito que você deseja :)

Se você colocar no after de um elemento para que ele tenha position fixed, ele sempre ficará por cima do elemento pai.

por Lucas Silva
| 133.2k xp | 28 posts
Estudante

Mario descobri o meu problema. Estou declarando position: fixed em um elemento pai do barra-nav, ou seja os 2 estão declarados fixed, mais ou menos assim:

<div class="container-top">
    <nav class="barra-nav"></nav>
</div>

Então no CSS quando declarava o z-index: 1 no barra-nav, ele de alguma maneira ignorava por causo que seu pai é fixed.OBS: quando declaro z-index: 1 no container-top, o .menu-ativo:after sobrepõe todos os elementos menos o .barra-nav e o .container-top. Já verifiquei o js e o .menu-ativo está sendo aplicado na tag html.

O novo problema agora é: Como fazer o after sobrepor o elemento .container-top sem sobrepor o .barra-nav?

OBS: Quero deixar o container fixed para der scroll na página, ele fique sempre no top.

por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Lucas, acho que pra poder dar uma solução mais focada no seu projeto vou precisar dá uma olhadinha nele, consegue subir o código no github e me mandar o link? :)

por Lucas Silva
| 133.2k xp | 28 posts
Estudante

Mario, o link https://github.com/SSilvaLucas/CAECOMP fique a vontade para da sugestões em outras partes se desejar. Sou iniciante ainda e esse acredito ser meu primeiro projeto que irá pro ar. Vlw!!

solução!
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Lucas, no HTML a tag barra nav tem que vir logo após o body, e no CSS eu fiz duas alterações no z-index para o after e o menu ficarem mais altos :)

OBS: Nesse caso você precisa ter um menu que só aparece no mobile

HTML

<body>
    <nav class="barra-nav"></nav>
<!--resto do conteudo-->

CSS

.menu-ativo:after {
    content: "";
    display: block;
    position: fixed;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
}
.barra-nav {
    background: #fff;
    height: 100%;
    width: 70%;
    margin: 0;
    max-width: 300px;
    position: fixed;
    z-index: 5;
    top: 0;
    left: -72%;
    transition: left 0.5s ease-out;
    box-shadow: 0em 0.01em 0.5em #3f4652;
}
  • Ou ao invés disso, você pode criar uma div .overlay que fica antes do
  • Quando você clicar no menu o .overlay ganha uma class .visible
  • E quando clicar no elemento .overlay ela perde a class .visible some e fecha o menu.

o CSS ficaria algo assim

.overlay {
    width: 100%;
        height: 100vh;
        background: black;
    pointer-events: none;
     opacity: 0;
}
.active {
      pointer-events: auto;
      opacity: 1;
}

Me fala se deu certo \o

por Lucas Silva
| 133.2k xp | 28 posts
Estudante

Consegui arrumar tudo Mario, se quiser dar uma olhava para ver como ficou.

Muito abrigado pela ajuda !! Você é fera :)