Skip to main content
se eliminaron 2065 caracteres en el cuerpo; título editado
Origen Enlace
jachguate
  • 32.1k
  • 8
  • 41
  • 69

Problemas con los estilos css, lo que pongo debajo El CSS deja de menu__link--insidefuncionar dependiendo de la ubicación en el css no funciona, si lo pongo arriba del menu siHTML

Los estilos en css se pueden ir cargando según convenga? Es decir ponerProblemas con 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.

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 cargade menu__link--inside en 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 ignorano funciona, pero si lo pongo más arriba, antes del menúmenu si me lo toma.

Los¿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>

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>

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.

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.

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>

El CSS deja de funcionar dependiendo de la ubicación en el HTML

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>

Añadí el codigo.
Origen Enlace
Agus
  • 11
  • 2

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.

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.

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.

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>

Problemas con los estilos css

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.

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.

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.

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>
Origen Enlace
Agus
  • 11
  • 2

Problemas con los estilos css

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.