×
Ir ao conteúdo
  • Cadastre-se

Javascript menu responsivo não abre js


Impts
Ir à solução Resolvido por Marlon Vinicius Cardoso,

Posts recomendados

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);

 

Link para o comentário
Compartilhar em outros sites

  • Solução

Olá @Impts, boa tarde.

 

Tente substituir seu código:

@media (max-width: 600px) {

Por:

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

 

Link para o comentário
Compartilhar em outros sites

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>?

 

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

Link para o comentário
Compartilhar em outros sites

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>.

Link para o comentário
Compartilhar em outros sites

  • Moderador

@Impts @Marlon Vinicius Cardoso Atualmente, é melhor chamar os javascripts no final de body.

Deixar os css dentro do head  e os javascript no final. 

 

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Como se tornar um desenvolvedor full-stack

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!