0

Básicamente estoy creando un menú y quiero que en la parte izquierda del menú aparezca HOME y en la parte derecha las secciones de la barra de navegación (Quiénes somos, Nuestros Servicios, Contacto). He conseguido hacerlo pero creo que el código es muy sucio, y me gustaría alguna forma de hacerlo de forma más limpia. Gracias.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio de prueba menú</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar">
        <a href="#" id="home">HOME</a>
        <a href="#" class="navlink" id="somos">Quiénes somos</a>
        <a href="#" class="navlink" id="servicios">Servicios</a>
        <a href="#" class="navlink" id="contacto">Contacto</a>
    </nav>
    
</body>
</html>

CSS:


.navbar{
    display: flex;
    /* justify-content: space-around; */
   
}

#home{
    display: inline-block;
    text-decoration: none; 
    position: absolute;
    top: 15px;
    left: 100px;


}

.navlink{
    display: inline-block;
    text-decoration: none; 
   
}

#somos{
    position: absolute;
    top: 15px;
    right: 500px; 

}

#servicios{
    position: absolute;
    top: 15px;
    right: 300px; 

}

#contacto{
    position: absolute;
    top: 15px;
    right: 100px; 

}

Muchas gracias, saludos.

1
  • Para mi está limpio, esos menus por lo general se hacen con el combo <ul> y <li>. El hecho de hacerlo solo con un <nav> ya es muy sexy.
    – user166844
    Commented el 4 jul. 2020 a las 23:43

1 respuesta 1

0

Lo puedes conseguir de forma fácil con flexbox, para que esto funciones debes definir un display:flex para el padre, en este caso el nav y separar los hijos en dos para poder aplicar un justify-content: space-between. Para separar los hijos en dos, agregaremos una nueva etiqueta para encapsular el resto de opciones del menú.

Te dejo un snippet a continuación

nav{
  display: flex;
  justify-content: space-between;
}

.right-sections{
  display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio de prueba menú</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar">
        <a href="#" id="home">HOME</a>
        <div class="right-sections">
          <a href="#" class="navlink" id="somos">Quiénes somos</a>
          <a href="#" class="navlink" id="servicios">Servicios</a>
          <a href="#" class="navlink" id="contacto">Contacto</a>
        </div>
    </nav>
    
</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.