Javascript menu responsivo não abre js

Impts · 22 de dezembro de 2021

Quando clico no botão ao reduzir a página apra 600px, ele não abre as opções do media...

<header id="header">
	<nav id="nav">
		<button id="btn-mobile">Menu</button>
		<ul id="opcion-nav">
			<li><a id="logo" href="">Logo</a></li>
			<li><a href="">Menu</a></li>
			<li><a href="">Menu</a></li>
			<li><a href="">Menu</a></li>
			<li><a href="">Menu</a></li>
			<li><a href="">Menu</a></li>
		</ul>
	</nav>

</header>

body, ul {
	margin: 0;
	padding: 0;
}


#nav li a {
	color: white;
	text-decoration: none;
	font-family: sans-serif;
}

#header {
	box-sizing: border-box;
	height: 50px;
	padding: 1rem;
	display: flex;
	background-color: gold;
	justify-content: center;
}

#opcion-nav {
	display: flex;
	gap:  .9rem;
	list-style: none;

}


#btn-mobile {
	display: none;
}

@media (max-width: 600px) {
	#btn-mobile {
		display: block;
	}
	#opcion-nav {
		display: block;
		position: absolute;
		width: 100%;
		top: 50px;
		right: 0px;
		background-color: grey;
		display: block;
		height: 0px;
		transition: .6s;
		z-index: 1000;
		visibility: hidden;
		overflow: hidden;
	}

	#nav.active #opcion-nav {
		
		height: calc(100vh - 50px);
		visibility: visible;
		overflow: auto;
	}

	#nav li a {
	padding: 1rem 0;
	margin: 0 1rem;
	border-bottom: 2px solid RGB(0, 0, 0, 05);
}

}

const btnMobile = document.getelementbyid('btn-mobile');
function toggleMenu(){
	const nav = document.getelementbyid('nav');
	nav.classlist.toggle('active')
}
btnMobile.addeventlistener('click', toggleMenu);

Marlon Vinicius Cardoso · 22 de dezembro de 2021

Olá @Impts, boa tarde.

Tente substituir seu código:

@media (max-width: 600px) {

Por:

@media screen and (max-width: 600px) {

Impts · 22 de dezembro de 2021

@Marlon Vinicius Cardoso Não funcionou também, consegue identificar erro no javascript?

Impts · 22 de dezembro de 2021

1 hora atrás, Marlon Vinicius Cardoso disse:
Olá @Impts, boa tarde.

Tente substituir seu código:
@media (max-width: 600px) {
Por:
@media screen and (max-width: 600px) {

Consegui, o erro foi a chamada do arquivo, tipos como javascript você tem que chamar ele dentro do <body> mesmo?

Não pode ser igual o css dentro do <head>?

Marlon Vinicius Cardoso · 23 de dezembro de 2021

15 horas atrás, Impts disse:

Consegui, o erro foi a chamada do arquivo, tipos como javascript você tem que chamar ele dentro do <body> mesmo?

Não pode ser igual o css dentro do <head>?

<script src="script.js"></script>

Eu sempre chamo ele no início do <body>.