0

Básicamente quiero que el menú se me quede fijo pero sin flotar en la página (actualmente flota superponiéndose sobre otros elementos de la web) y además que el Inicio aparezca a la izquierda y el resto de opciones a la derecha. Os paso todo el código:

function desplegarMenu(){

    let ancla=document.getElementsByClassName("nav-enlace"); //Cojo la clase sobre la que quiero actuar. Al ser varios enlaces, lo que estoy creando es un array, que puedo recorrer

    for (let i = 0; i < ancla.length; i++) {
        ancla[i].classList.toggle("desaparece"); //Classlist es una propiedad que me permite manejar las clases de CSS. Con toggle, si sólo hay un parámetro como ahora, le da el valor inverso booleano, es decir: si es true lo pone a false, y si es false lo pone a true.
    }

    let anclaContacto=document.getElementsByClassName("nav-enlace-especifico"); //Cojo la clase sobre la que quiero actuar. Al ser varios enlaces, lo que estoy creando es un array, que puedo recorrer

    for (let i = 0; i < anclaContacto.length; i++) {
        anclaContacto[i].classList.toggle("desaparece"); //Classlist es una propiedad que me permite manejar las clases de CSS. Con toggle, si sólo hay un parámetro como ahora, le da el valor inverso booleano, es decir: si es true lo pone a false, y si es false lo pone a true.
    }


}
/* Tipografías */

body{
    font-family: 'Roboto', sans-serif;
    margin: 0px; 
}

h2{
    font-weight: 700;
}

li, a {
    text-decoration: none;
    color: #000; 
    font-size: 16px;
}

/* Resto de estilos de la página */

header{
    display: flex;
    justify-content: space-between;
    align-items:center; 
    padding: 30px 10%; 
    position: fixed;
    z-index: 999999;
    width: 100%;
}

/* nav{
    background: #fff;
    padding: 10px; 
    display: flex; 
    justify-content: space-around;
} */

.nav-boton{
    background:#fff; 
    padding: 10px 30px;  
    display: none; 
    border: 2px solid #f4f6ff; 
}

.nav-inicio{
    background:#fff; 
    padding: 10px 30px;  
    text-decoration: none; 
    border-radius: 5px; 
}

.nav-enlace{
    background:#fff; 
    padding: 10px 30px;  
    display: inline-block; 
    text-decoration: none; 
    border-radius: 5px; 
}

.nav-enlace-especifico{
    background:#fff; 
    padding: 10px 30px;  
    display: inline-block; 
    text-decoration: none; 
    border-radius: 5px; 
}

.contacto{
    background: #fc5185; 
    color: #fff; 
}

.contacto:hover{
    background: #fb044e; 
}

.nav-enlace:hover{
    background: #364f6b;
    color: #fff; 
    border-radius: 5px; 
}


.precios{
    display: flex; 
    flex-wrap: wrap;
    text-align: center; 
    background: #f0f0f0;
    padding-bottom: 20px;
    justify-content: center;
 
}

.promocioncursos{
    background: #fff;
    color: #000000; 
    margin: 20px; 
    padding: 10px; 
    border-radius: 5px; 
    box-shadow: 6px 6px 10px rgba(0,0,0,0.18);
    max-width: 500px; 
    display: block;
    position: relative;
    padding-bottom: 60px;
}

.precio{
    font-size: 50px;
    color: #43dde6; 
}

.btn-comprar{
    background: #fc5185; 
    display: block; 
    padding: 10px; 
    color: #fff; 
    text-decoration: none; 
    border-radius: 5px; 
    transform: translate(-50%, -100%);
    left:50%;
    top: 100%; 
    position: absolute;
    width: 250px;
    margin-top: -14px;
}

.seccion-boton-info{
    background: #f0f0f0;
    height: 100px;
    display: flex;
    justify-content: center;

}

.boton-info{
    background:#fc5185;
    color: #fff; 
    border-radius: 5px;
    max-height: 50px;
    margin-top: 25px;
    font-weight: bold;
    border: none;
}


button:active{
    background:#c70039;
}

.btn-comprar:hover{
    background:  #FD3F3F; 
}

.boton-info:hover{
    background: #FD3F3F;
}

/* Los media para el diseño responsive */

/* Con esto le digo que entre 0 y 700 px se comporte de una determinada manera y si no, de la forma predeterminada que ya le he dicho yo con CSS */
@media (max-width: 700px){
    nav{
        flex-direction: column; 
    }

    .nav-boton{
        display: inline-block; 
    }

    .nav-enlace{
        margin: 10px 0px; 
    }

    .nav-enlace-especifico{
        margin: 10px 0px; 
    }

    .desaparece{
        display: none; 
    }

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Academy, tu academia online de JavaScript de referencia</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
    <!--TODO: Intentar echar todo a la derecha en el menú principal. Clase diferente para el inicio. Esto tengo que intentarlo que hoy la he liado -->
    <!--TODO:Fijar barra de arriba: position: fixed; orden de capas css poner capa más adelante. -->
</head>
<body>

    <header>
        <nav>
            <button class="nav-boton" onclick="desplegarMenu()">Menú</button>
            <a href="#" class="nav-inicio desaparece">Inicio</a>
            <ul>
                <li><a href="#" class="nav-enlace desaparece">Quiénes somos</a></li>
                <li><a href="#" class="nav-enlace desaparece">Nuestros cursos</a></li>
                <li><a href="#" class="nav-enlace desaparece">Accede a tus cursos</a></li>
                <li><a href="#" class="nav-enlace-especifico desaparece contacto">Contacto</a></li>
            </ul>
        </nav>
    </header>

    <section class="precios">

        <div class="promocioncursos">
            <h2>Plan Rookie</h2>
            <p class="precio">10€/mes</p>
            <p>Acceso a los cursos de JavaScript más básicos</p>
        <hr>
            <p>Aprende las bases de JavaScript</p>
            <p>El lenguaje de programación más utilizado en Frontend</p>
            <p>Cursos realizados por programadores con años de experiencia en la industria</p>
        <hr>
        <a href="#" class="btn-comprar">Comprar</a>

        </div>

        <div class="promocioncursos">
            <h2>Plan Junior Dev</h2>
            <p class="precio">20€/mes</p>
            <p>Acceso a los cursos de JavaScript básicos + intermedios</p>
        <hr>
            <p>Aprende JS hasta nivel intermedio</p>
            <p>El lenguaje de programación más utilizado en Frontend</p>
            <p>Cursos realizados por programadores con años de experiencia en la industria</p>
        <hr>
        <a href="#" class="btn-comprar">Comprar</a>

        </div>

        <div class="promocioncursos">
            <h2>Plan Senior Dev</h2>
            <p class="precio">30€/mes</p>
            <p>Acceso a todos los cursos de JS, hasta nivel avanzado</p>
        <hr>
            <p>Llega hasta los límites de JavaScript</p>
            <p>El lenguaje de programación más utilizado en Frontend</p>
            <p>Cursos realizados por programadores con años de experiencia en la industria</p>
        <hr>
        <a href="#" class="btn-comprar">Comprar</a>

        </div>

        <div class="promocioncursos">
            <h2>Plan Premium Dev</h2>
            <p class="precio">40€/mes</p>
            <p>Acceso a TODOS los cursos de JavaScript, más acceso a cursos de todos los frameworks de JavaScript (Node.js, Angular...) </p>
        <hr>
            <p>Aprende las bases de JavaScript</p>
            <p>El lenguaje de programación más utilizado en Frontend, ahora también en Backend con Node.js</p>
            <p>Cursos realizados por programadores con años de experiencia en la industria</p>
        <hr>
        <a href="#" class="btn-comprar">Comprar</a>

        </div>

    </section>

    <section class="seccion-boton-info">
        <button class="boton-info"> QUIERO SABER MÁS </button>
    </section>
    
</body>
</html>

1 respuesta 1

1

Puede usar la propiedad CSS position sticky para lograr ese efecto que quiere y display: grid; para organizar los elementos.

function desplegarMenu(){

    let ancla=document.getElementsByClassName("nav-enlace"); //Cojo la clase sobre la que quiero actuar. Al ser varios enlaces, lo que estoy creando es un array, que puedo recorrer

    for (let i = 0; i < ancla.length; i++) {
        ancla[i].classList.toggle("desaparece"); //Classlist es una propiedad que me permite manejar las clases de CSS. Con toggle, si sólo hay un parámetro como ahora, le da el valor inverso booleano, es decir: si es true lo pone a false, y si es false lo pone a true.
    }

    let anclaContacto=document.getElementsByClassName("nav-enlace-especifico"); //Cojo la clase sobre la que quiero actuar. Al ser varios enlaces, lo que estoy creando es un array, que puedo recorrer

    for (let i = 0; i < anclaContacto.length; i++) {
        anclaContacto[i].classList.toggle("desaparece"); //Classlist es una propiedad que me permite manejar las clases de CSS. Con toggle, si sólo hay un parámetro como ahora, le da el valor inverso booleano, es decir: si es true lo pone a false, y si es false lo pone a true.
    }


}
/* Tipografías */

body{
    font-family: 'Roboto', sans-serif;
    margin: 0px; 
}

h2{
    font-weight: 700;
}

li, a {
    text-decoration: none;
    color: #000; 
    font-size: 16px;
}

/* Resto de estilos de la página */

header{
  padding: 30px 10% 0;
  margin-bottom: 30px;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: sticky;
   z-index: 999999;
  top: 0;
  background: white;
  width: 100%;
}

nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.nav-boton{
    background:#fff; 
    padding: 10px 30px;  
    display: none; 
    border: 2px solid #f4f6ff; 
}

.nav-inicio{
    background:#fff; 
    padding: 10px 30px;  
    text-decoration: none; 
    border-radius: 5px; 
}

.nav-enlace{
    background:#fff; 
    padding: 10px 30px;  
    display: inline-block; 
    text-decoration: none; 
    border-radius: 5px; 
}

.nav-enlace-especifico{
    background:#fff; 
    padding: 10px 30px;  
    display: inline-block; 
    text-decoration: none; 
    border-radius: 5px; 
}

.contacto{
    background: #fc5185; 
    color: #fff; 
}

.contacto:hover{
    background: #fb044e; 
}

.nav-enlace:hover{
    background: #364f6b;
    color: #fff; 
    border-radius: 5px; 
}


.precios{
    display: flex; 
    flex-wrap: wrap;
    text-align: center; 
    background: #f0f0f0;
    padding-bottom: 20px;
    justify-content: center;
 
}

.promocioncursos{
    background: #fff;
    color: #000000; 
    margin: 20px; 
    padding: 10px; 
    border-radius: 5px; 
    box-shadow: 6px 6px 10px rgba(0,0,0,0.18);
    max-width: 500px; 
    display: block;
    position: relative;
    padding-bottom: 60px;
}

.precio{
    font-size: 50px;
    color: #43dde6; 
}

.btn-comprar{
    background: #fc5185; 
    display: block; 
    padding: 10px; 
    color: #fff; 
    text-decoration: none; 
    border-radius: 5px; 
    transform: translate(-50%, -100%);
    left:50%;
    top: 100%; 
    position: absolute;
    width: 250px;
    margin-top: -14px;
}

.seccion-boton-info{
    background: #f0f0f0;
    height: 100px;
    display: flex;
    justify-content: center;

}

.boton-info{
    background:#fc5185;
    color: #fff; 
    border-radius: 5px;
    max-height: 50px;
    margin-top: 25px;
    font-weight: bold;
    border: none;
}


button:active{
    background:#c70039;
}

.btn-comprar:hover{
    background:  #FD3F3F; 
}

.boton-info:hover{
    background: #FD3F3F;
}

/* Los media para el diseño responsive */

/* Con esto le digo que entre 0 y 700 px se comporte de una determinada manera y si no, de la forma predeterminada que ya le he dicho yo con CSS */
@media (max-width: 700px){
    nav{
        flex-direction: column; 
    }

    .nav-boton{
        display: inline-block; 
    }

    .nav-enlace{
        margin: 10px 0px; 
    }

    .nav-enlace-especifico{
        margin: 10px 0px; 
    }

    .desaparece{
        display: none; 
    }

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Academy, tu academia online de JavaScript de referencia</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
    <!--TODO: Intentar echar todo a la derecha en el menú principal. Clase diferente para el inicio. Esto tengo que intentarlo que hoy la he liado -->
    <!--TODO:Fijar barra de arriba: position: fixed; orden de capas css poner capa más adelante. -->
</head>
<body>

    <header>
        <nav>
            <button class="nav-boton" onclick="desplegarMenu()">Menú</button>
            <a href="#" class="nav-inicio desaparece">Inicio</a>
            <ul>
                <li><a href="#" class="nav-enlace desaparece">Quiénes somos</a></li>
                <li><a href="#" class="nav-enlace desaparece">Nuestros cursos</a></li>
                <li><a href="#" class="nav-enlace desaparece">Accede a tus cursos</a></li>
                <li><a href="#" class="nav-enlace-especifico desaparece contacto">Contacto</a></li>
            </ul>
        </nav>
    </header>

    <section class="precios">

        <div class="promocioncursos">
            <h2>Plan Rookie</h2>
            <p class="precio">10€/mes</p>
            <p>Acceso a los cursos de JavaScript más básicos</p>
        <hr>
            <p>Aprende las bases de JavaScript</p>
            <p>El lenguaje de programación más utilizado en Frontend</p>
            <p>Cursos realizados por programadores con años de experiencia en la industria</p>
        <hr>
        <a href="#" class="btn-comprar">Comprar</a>

        </div>

        <div class="promocioncursos">
            <h2>Plan Junior Dev</h2>
            <p class="precio">20€/mes</p>
            <p>Acceso a los cursos de JavaScript básicos + intermedios</p>
        <hr>
            <p>Aprende JS hasta nivel intermedio</p>
            <p>El lenguaje de programación más utilizado en Frontend</p>
            <p>Cursos realizados por programadores con años de experiencia en la industria</p>
        <hr>
        <a href="#" class="btn-comprar">Comprar</a>

        </div>

        <div class="promocioncursos">
            <h2>Plan Senior Dev</h2>
            <p class="precio">30€/mes</p>
            <p>Acceso a todos los cursos de JS, hasta nivel avanzado</p>
        <hr>
            <p>Llega hasta los límites de JavaScript</p>
            <p>El lenguaje de programación más utilizado en Frontend</p>
            <p>Cursos realizados por programadores con años de experiencia en la industria</p>
        <hr>
        <a href="#" class="btn-comprar">Comprar</a>

        </div>

        <div class="promocioncursos">
            <h2>Plan Premium Dev</h2>
            <p class="precio">40€/mes</p>
            <p>Acceso a TODOS los cursos de JavaScript, más acceso a cursos de todos los frameworks de JavaScript (Node.js, Angular...) </p>
        <hr>
            <p>Aprende las bases de JavaScript</p>
            <p>El lenguaje de programación más utilizado en Frontend, ahora también en Backend con Node.js</p>
            <p>Cursos realizados por programadores con años de experiencia en la industria</p>
        <hr>
        <a href="#" class="btn-comprar">Comprar</a>

        </div>

    </section>

    <section class="seccion-boton-info">
        <button class="boton-info"> QUIERO SABER MÁS </button>
    </section>
    
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.