Opa. Boa tarde gente. Não estou conseguindo disparar o evento dessa lista, alguem pode me ajudar.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Opa. Boa tarde gente. Não estou conseguindo disparar o evento dessa lista, alguem pode me ajudar.
Marcio, eu me lembro que também tive problemas.
Não sei se é o seu caso, mas eu resolvi colocando o script dentro do body, header. Dá uma olhada no código abaixo:
<header>
<div class="container">
<button class="menu-abrir">
Abre Menu
</button>
<h1 class="logo">
<img src="img/logo.png" alt="Notícias.com">
</h1>
<nav class="barra-nav">
<button class="menu-fechar">
Fecha Menu
</button>
<script src="js/menu.js"></script>
<ul class="menu-principal">
<li><a href="noticias.html" class="noticias">Notícias</a>
<li><a href="esportes.html" class="esportes">Esportes</a>
<li><a href="famosos.html" class="famosos">Famosos</a>
</ul>
<form class="busca">
<input type="search" id="campo-busca">
<button type="submit">Buscar</button>
</form>
</nav>
</div>
</header>Caro amigo muito obrigado pela sua resposta mas não funcionou esto te passado o código.
<!doctype html>
Abre Menu
Fecha Menu
Buscar
BBB
vixe que eca que fiz pera ai
<!doctype html>
Abre Menu
Fecha Menu
Buscar
BBB
opa outra duvida como passo o codigo aqui.
coloca o código entre ``` (3 crases antes do código e 3 crases depois) rs
Oh meu irmão mil desculpas por essa falha segue.
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Notícias.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" href="css/exercicios.css">
</head>
<body>
<header>
<div class="container">
<button class="menu-abrir">Abre Menu</button>
<h1 class="logo">
<img src="img/logo.png" alt="Notícias.com">
</h1>
<nav class="barra-nav">
<button class="menu-fechar">Fecha Menu</button>
<ul class="menu-principal">
<li><a href="noticias.html" class="noticias">Notícias</a>
<li><a href="esportes.html" class="esportes">Esportes</a>
<li><a href="famosos.html" class="famosos">Famosos</a>
</ul>
<form class="busca">
<input type="search" id="campo-busca">
<button type="submit">Buscar</button>
</form>
</nav>
</div>
</header>
<main class="destaques container">
<div class="secao">
<a href="noticia1.html" class="chamada noticias principal">
<h2>Descoberto mais um esquema de espionagem da NSA</h2>
</a>
<a href="noticia2.html" class="chamada noticias normal">
<h2>Deputado é pego em vídeo pedindo propina</h2>
</a>
<a href="noticia3.html" class="chamada noticias normal">
<h2>Acidente na BR-42 mata 12 da mesma família</h2>
</a>
<a href="noticia4.html" class="chamada noticias normal mini">
<h2>NASA acha indícios de vida em Marte</h2>
</a>
<a href="noticia5.html" class="chamada noticias normal mini">
<h2>Recorde de vendas do Xbox One</h2>
</a>
<!--<a href="noticia14.html" class="chamada noticias normal">
<h2>BC anuncia nova alta nos juros</h2>
</a>-->
<a href="noticia11.html" class="chamada famosos normal">
<img src="img/entretenimento1.jpg" alt="Atriz na praia">
<h2>Atriz da Globo passeia com filho em Copacabana</h2>
</a>
<a href="noticia6.html" class="chamada esportes normal">
<h2>Estádios das Olimpíadas estão atrasados</h2>
</a>
</div>
<div class="secao">
<a href="noticia7.html" class="chamada esportes normal mini">
<img src="img/esporte1.jpg" alt="Time perdedor">
<h2>Time perdedor é rebaixado para Série B</h2>
</a>
<a href="noticia8.html" class="chamada esportes normal mini">
<img src="img/esporte2.jpg" alt="Time vencedor">
<h2>Time vencedor sobe para Série A da Copa</h2>
</a>
<a href="noticia9.html" class="chamada esportes normal">
<h2>Transferência milionária de craque para a Europa</h2>
</a>
<a href="noticia10.html" class="chamada famosos normal">
<h2>BBB: brothers vão pra piscina</h2>
</a>
<a href="noticia12.html" class="chamada famosos normal">
<h2>Subcelebridade faz algo estúpido para aparecer</h2>
</a>
<a href="noticia16.html" class="chamada famosos">
<h2>Casal de famosos se separa</h2>
</a>
<a href="noticia13.html" class="chamada famosos normal">
<h2>Novela tem cena decisiva nessa sexta-feira</h2>
</a>
<a href="noticia15.html" class="chamada esportes">
<h2>Jogador é flagrado em festança promíscua</h2>
</a>
</div>
<div class="secao">
<a href="video.html" class="tv chamada normal famosos">
<img src="img/tv1.jpg" alt="Roupão">
<p>BBB</p>
<h2>Jeílson usa roupão de bolinhas verdes e é consolado</h2>
<span class="bolinha"></span>
<span class="bolinha"></span>
<span class="bolinha"></span>
</a>
</div>
</main>
<script src="js/menu.js"></script>
</body>
</html>/* Aqui a gente dividi em 3 colunas */
.secao {
float: left;
width: 33.333%;
}
/* converte em 2 colunas */
.mini {
float: left;
width: 50%;
}
/* centralizamos o conteudo */
.container{
margin: 0 auto;
/*width: 100%;*/
max-width: 1200px;
}
.logo,
.secao {
padding: 0 1%;
}
/* eveitamos que as imagens estorem os box definindo um max width */
img {
max-width: 100%;
}
/*definimos tudo na mesma linha do cabeçalho permitindo que eles escorregem para baixo */
.logo,
.busca,
.barra-nav,
.menu-principal {
/* O inline-block é interessante por simular uma linha de texto com seus elementos.
Se não cabe mais um "caracter" na linha, a "palavra" escorrega pra linha de baixo. */
display: inline-block; !important;
vertical-align: middle;
/*padding: 0.5em;*/
}
.menu-principal li {
float: left;
}
header {
padding: 0.5em 0;
}
.destaques {
margin-top: 1em;
}
.barra-nav {
margin: 0.4em 0;
}
.secao {
width: 100%;
}
.secao {
width: 100%;
}
.barra-nav {
background: #f0f0f0;
padding: 1em;
margin: 0;
height: 100%;
width: 90%;
max-width: 320px;
position: fixed;
z-index: 1;
top: 0;
left: -90%;
transition: left 0.3s ease-out;
}
.menu-ativo:after {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.4);
}
@media not all and (max-width: 600px) {
.menu-abrir,
.menu-fechar {
display: none;
}
}
@media (min-width: 600px) {
.secao {
width: 50%;
}
}
@media (min-width: 1000px) {
.secao {
width: 33.333%;
}
}Marcio, dá uma olhada no seu seletor .barra-nav
.barra-nav {
background: #f0f0f0;
padding: 1em;
margin: 0;
height: 100%;
width: 90%;
max-width: 320px;
position: fixed;
z-index: 1;
top: 0;
left: -90%;
transition: left 0.3s ease-out;
}Ele deve ser uma media query, como abaixo:
@media (max-width: 600px) {
.barra-nav {
background: #f0f0f0;
padding: 1em;
margin: 0;
heigth: 100%;
width: 90%;
max-widht: 320px;
position: fixed;
z-index: 1;
top: 0;
left: -90%;
/* transição animada
neste caso a animação é na propriedade left
*/
transition: left 0.3s ease-out;
}
}eu coloquei mas não funcionou vc ainda tem o seu código se tiver manda para fazer um comparativo e ver o que estar errado com o meu.
Marcio, eu alterei o seu css. Apenas a alteração acima e funcionou com o seu html. O único código que não usei seu foi o do script.
Vou colocar aqui o css (seu com a alteração que fiz) e o html (seu também, pois testei em cima dele). E junto vai o javascript (meu) pois este vc não havia postado, ok?
html
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Notícias.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" href="css/exercicios.css">
</head>
<body>
<header>
<div class="container">
<button class="menu-abrir">Abre Menu</button>
<h1 class="logo">
<img src="img/logo.png" alt="Notícias.com">
</h1>
<nav class="barra-nav">
<button class="menu-fechar">Fecha Menu</button>
<script src="js/menu.js"></script>
<ul class="menu-principal">
<li><a href="noticias.html" class="noticias">Notícias</a>
<li><a href="esportes.html" class="esportes">Esportes</a>
<li><a href="famosos.html" class="famosos">Famosos</a>
</ul>
<form class="busca">
<input type="search" id="campo-busca">
<button type="submit">Buscar</button>
</form>
</nav>
</div>
</header>
<main class="destaques container">
<div class="secao">
<a href="noticia1.html" class="chamada noticias principal">
<h2>Descoberto mais um esquema de espionagem da NSA</h2>
</a>
<a href="noticia2.html" class="chamada noticias normal">
<h2>Deputado é pego em vídeo pedindo propina</h2>
</a>
<a href="noticia3.html" class="chamada noticias normal">
<h2>Acidente na BR-42 mata 12 da mesma família</h2>
</a>
<a href="noticia4.html" class="chamada noticias normal mini">
<h2>NASA acha indícios de vida em Marte</h2>
</a>
<a href="noticia5.html" class="chamada noticias normal mini">
<h2>Recorde de vendas do Xbox One</h2>
</a>
<!--<a href="noticia14.html" class="chamada noticias normal">
<h2>BC anuncia nova alta nos juros</h2>
</a>-->
<a href="noticia11.html" class="chamada famosos normal">
<img src="img/entretenimento1.jpg" alt="Atriz na praia">
<h2>Atriz da Globo passeia com filho em Copacabana</h2>
</a>
<a href="noticia6.html" class="chamada esportes normal">
<h2>Estádios das Olimpíadas estão atrasados</h2>
</a>
</div>
<div class="secao">
<a href="noticia7.html" class="chamada esportes normal mini">
<img src="img/esporte1.jpg" alt="Time perdedor">
<h2>Time perdedor é rebaixado para Série B</h2>
</a>
<a href="noticia8.html" class="chamada esportes normal mini">
<img src="img/esporte2.jpg" alt="Time vencedor">
<h2>Time vencedor sobe para Série A da Copa</h2>
</a>
<a href="noticia9.html" class="chamada esportes normal">
<h2>Transferência milionária de craque para a Europa</h2>
</a>
<a href="noticia10.html" class="chamada famosos normal">
<h2>BBB: brothers vão pra piscina</h2>
</a>
<a href="noticia12.html" class="chamada famosos normal">
<h2>Subcelebridade faz algo estúpido para aparecer</h2>
</a>
<a href="noticia16.html" class="chamada famosos">
<h2>Casal de famosos se separa</h2>
</a>
<a href="noticia13.html" class="chamada famosos normal">
<h2>Novela tem cena decisiva nessa sexta-feira</h2>
</a>
<a href="noticia15.html" class="chamada esportes">
<h2>Jogador é flagrado em festança promíscua</h2>
</a>
</div>
<div class="secao">
<a href="video.html" class="tv chamada normal famosos">
<img src="img/tv1.jpg" alt="Roupão">
<p>BBB</p>
<h2>Jeílson usa roupão de bolinhas verdes e é consolado</h2>
<span class="bolinha"></span>
<span class="bolinha"></span>
<span class="bolinha"></span>
</a>
</div>
</main>
</body>
</html>css
/* Aqui a gente dividi em 3 colunas */
.secao {
float: left;
width: 33.333%; /* era 33.333 */
}
/* ok */
/* converte em 2 colunas */
.mini {
float: left;
width: 50%;
}
/* centralizamos o conteudo */
.container{
margin: 0 auto;
/*width: 100%;*/
max-width: 1200px;
}
.logo,
.secao {
padding: 0 1%;
}
/* eveitamos que as imagens estorem os box definindo um max width */
img {
max-width: 100%;
}
/*definimos tudo na mesma linha do cabeçalho permitindo que eles escorregem para baixo */
.logo,
.busca,
.barra-nav,
.menu-principal {
/* O inline-block é interessante por simular uma linha de texto com seus elementos.
Se não cabe mais um "caracter" na linha, a "palavra" escorrega pra linha de baixo. */
display: inline-block; !important;
vertical-align: middle;
/*padding: 0.5em;*/
}
.menu-principal li {
float: left;
}
header {
padding: 0.5em 0;
}
.destaques {
margin-top: 1em;
}
.barra-nav {
margin: 0.4em 0;
}
.secao {
width: 100%;
}
.secao {
width: 100%;
}
/* comentei
.barra-nav {
background: #f0f0f0;
padding: 1em;
margin: 0;
height: 100%;
width: 90%;
max-width: 320px;
position: fixed;
z-index: 1;
top: 0;
left: -90%;
transition: left 0.3s ease-out;
}
*/
/* adicionei!!! */
@media (max-width: 600px) {
.barra-nav {
background: #f0f0f0;
padding: 1em;
margin: 0;
heigth: 100%;
width: 90%;
max-widht: 320px;
position: fixed;
z-index: 1;
top: 0;
left: -90%;
/* transição animada
neste caso a animação é na propriedade left
*/
transition: left 0.3s ease-out;
}
}
.menu-ativo .barra-nav {
left: 0;
}
.menu-ativo:after {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.4);
}
/* ok */
@media not all and (max-width: 600px) {
.menu-abrir,
.menu-fechar {
display: none;
}
}
/* ok meu 768 */
@media (min-width: 600px) {
.secao {
width: 50%;
float: left; /* adicionei */
}
} /* adicionei */
/* ok meu 1024 */
@media (min-width: 1000px) { /* adicionei @ */
.secao {
width: 33.333%;
// float: left; /* adicionei */
}
}menu.js
document.querySelector('.menu-abrir').onclick=function() {
console.log("Testando");
document.documentElement.classList.add('menu-ativo');
};
document.querySelector('.menu-fechar').onclick=function() {
document.documentElement.classList.remove('menu-ativo');
} ;
document.documentElement.onclick = function(event) {
if (event.target === document.documentElement) {
document.documentElement.classList.remove('menu-ativo');
}
};Ok erro de css, ja que o javaScript estar igual ao seu, funcionou aqui muito obrigado pela assistência.