Problemas con los estilos css, lo que pongo debajo de menu__link--inside en el css no funciona, si lo pongo arriba del menu si
¿Los estilos en css se pueden ir cargando según convenga?
Es decir poner los estilos del cuerpo, el footer y a lo último la barra de navegación? Porque al ponerle js a la barra de navegación lo que pongo debajo del nav no me carga el css. Para que se entienda, puse un estilo a un h2 y como lo ubiqué después del css del menú desplegable al recargar la pagina lo ignora, pero si lo pongo más arriba, antes del menú si me lo toma.
(function(){
const listElements = document.querySelectorAll('.menu__item--show');
const list = document.querySelector('.menu__links');
const menu = document.querySelector('.menu__hamburguer');
const addClick = ()=>{
listElements.forEach(element =>{
element.addEventListener('click', ()=>{
let subMenu = element.children[1];
let height = 0;
element.classList.toggle('menu__item--active');
if(subMenu.clientHeight === 0){
height = subMenu.scrollHeight;
}
subMenu.style.height = `${height}px`;
});
});
}
const deleteStyleHeight = ()=>{
listElements.forEach(element=>{
if(element.children[1].getAttribute('style')){
element.children[1].removeAttribute('style');
element.classList.remove('menu__item--active');
}
});
}
window.addEventListener('resize', ()=>{
if(window.innerWidth > 800){
deleteStyleHeight();
if(list.classList.contains('menu__links--show'))
list.classList.remove('menu__links--show');
}else{
addClick();
}
});
if(window.innerWidth <= 800){
addClick();
}
menu.addEventListener('click', ()=> list.classList.toggle('menu__links--show'));
})();
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
}
/*
este estilo se applica al estar arriba del menu*/
.img_destino{
height: 300px;
width: 400px;
}
.menu{
background-color: #1A202C;
color: #fff;
height: 70px;
}
.menu__container{
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1200px;
height: 100%;
margin: 0 auto;
}
.menu__links{
height: 100%;
transition: transform .5s;
display: flex;
}
.menu__item{
list-style: none;
position: relative;
height: 100%;
--clip: polygon(0 0, 100% 0, 100% 0, 0 0);
--transform: rotate(-90deg);
}
.menu__item:hover{
--clip: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
--transform: rotate(0);
}
.menu__link{
color: #fff;
text-decoration: none;
padding: 0 30px;
display: flex;
height: 100%;
align-items: center;
}
.menu__link:hover{
background-color: #5e7094;
}
.menu__arrow{
transform: var(--transform);
transition: transform .3s;
display: block;
margin-left: 3px;
}
.menu__nesting{
list-style: none;
transition:clip-path .3s;
clip-path: var(--clip);
position: absolute;
right: 0;
bottom: 0;
width: max-content;
transform: translateY(100%);
background-color: #000;
}
.menu__link--inside{
padding: 30px 100px 30px 20px;
}
.menu__link--inside:hover{
background-color: #798499;
}
.menu__hamburguer{
height: 100%;
display: flex;
align-items: center;
padding: 0 15px;
cursor: pointer;
display: none;
}
.menu__img{
display: block;
width: 36px;
}
@media (max-width:800px){
.menu__hamburguer{
display: flex;
}
.menu__item{
--clip:0;
overflow:hidden ;
}
.menu__item--active{
--transform: rotate(0);
--background: #5e7094;
}
.menu__item--show{
background-color: var(--background);
}
.menu__links{
position: fixed;
max-width: 400px;
width: 100%;
top: 70px;
bottom: 0;
right: 0;
background-color: #000;
overflow-y: auto;
display: grid;
grid-auto-rows: max-content;
transform: translateX(100%);
}
.menu__links--show{
transform: unset;
width: 100%;
}
.menu__link{
padding: 25px 0;
padding-left: 30px;
height: auto;
}
.menu__arrow{
margin-left: auto;
margin-right: 20px;
}
.menu__nesting{
display: grid;
position: unset;
width: 100%;
transform: translateY(0);
height: 0;
transition: height .3s;
}
.menu__link--inside{
width: 90%;
margin-left: auto;
border-left: 1px solid #798499;
}
/*Este estilo no se aplica*/
h2{
font-family: 'Times New Roman', Times, serif;
}
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu desplegable</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<nav class="menu">
<section class="menu__container">
<h1 class="menu__logo">Viajes</h1>
<ul class="menu__links">
<li class="menu__item">
<a href="#" class="menu__link">Home</a>
</li>
<li class="menu__item menu__item--show">
<a href="#" class="menu__link">Continentes <img src="assets/arrow.svg" class="menu__arrow"></a>
<ul class="menu__nesting">
<li class="menu__inside">
<a href="#" class="menu__link menu__link--inside">Europa</a>
</li>
<li class="menu__inside">
<a href="#" class="menu__link menu__link--inside">America</a>
</li>
<li class="menu__inside">
<a href="#" class="menu__link menu__link--inside">Asia</a>
</li>
<li class="menu__inside">
<a href="#" class="menu__link menu__link--inside">Africa</a>
</li>
<li class="menu__inside">
<a href="#" class="menu__link menu__link--inside">Oceania</a>
</li>
</ul>
</li>
<li class="menu__item">
<a href="#" class="menu__link">Iniciar</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">Registrarse</a>
</li>
</ul>
<div class="menu__hamburguer">
<img src="assets/menu.svg" class="menu__img">
</div>
</section>
</nav>
<section class="cartas">
<h2 class="titulos">Destinos Recomendados</h2>
<div class="carta">
<a href="#">
<img class="img_destino"src="cerro7colores.jpg" alt="">
</a>
</div>
</section>
<script src="js/app.js"></script>
</body>
</html>
JS
que hace que se interrumpa la carga del resto de los estilos. Debes depurar inactivando temporalmente elJS
o cargándolo al final delHTML
antes de cerrar la etiquetabody
... algo así por ejemplo<body>...Todo el html...<script src="ruta_de_los_script.js" /></body>
. Tal como te indica @Luis , necesitamos conocer tu código para revisar y tratar de ayudarte. Pásate por esta sección para que conozcas las normas de la comunidad.