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>