2

Quiero hacer una lista de navegacion en la cual cuando haga click sobre cualquiera de los links me lleve a una parte determinada de la pagina. Necesito ayuda para lograr qur la lista queda en la izquierda mientras que todo lo que incluye al body se ubique a su derecha (de la lista). Con este codigo logro que los links funcionen pero lo que nose como lograr es como es que se ubiquen a la izqueirda de la pagina mientras que el resto del body quede a la derecha de ellos (no agregue el resto del codigo porque es muy largo)

El codigo HTML que tengo es este:

<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Ejercicio</title>
        <link rel="stylesheet" href="css/css.css">
        <script src="js/js.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    
    <body>
        <header>
        <h1>Gestion de Series</h1>
        </header>
        <nav>   
            <a href ="#" class="clase1"> Series</a>
            <br>
            <a href ="#" class="clase2"> Opiniones</a>
            <br>
            <a href ="#" class="clase3"> Estadisticas</a>
        </nav>

El codigo CSS es este:

.clase1{
  background-image: linear-gradient(to right, rgba(255,186,3,0), rgba(252, 186, 3, 1));
  text-decoration: none;
  color: #000000
}
  
.clase2{
  background-image: linear-gradient(to right, rgba(209,64,36,0), rgba(209, 64, 36, 1));
  text-decoration: none;
  color: #000000
}

.clase3{
  background-image: linear-gradient(to right, rgba(156,9,26,0), rgba(156, 9, 26, 1));
  text-decoration: none;
  color: #000000
}
1
  • acabo de editar la publicacion esperando que se pueda entender mejor mi problema
    – user273188
    Commented el 21 oct. 2020 a las 21:46

1 respuesta 1

3

Puedes proceder de la siguiente forma:

Tener una estructura HTML como la siguiente:

  • Tu menú de navegación mantenlo dentro del nav
  • Las secciones a las que vas a navegar colócalas dentro de una etiqueta section

Lo anterior de manera inicial nos dejará el bloque del menú encima del bloque de las secciones, para solventar esto hacemos lo siguiente:

  • Como deseamos que el menú este a la izquierda y permanezca fijo, le damos las siguientes propiedades:

    .menu {
      position: fixed;
      top: 0;
    }
    

Lo anterior lo hacemos para que el elemento (el menú que existe dentro del nav) no sea afectado por el movimiento del scroll1

  • Sin embargo lo anterior genera el problema que tu menú queda fuera del flujo de los nodos de la página y se vería amontado texto y menú, para solventar eso; hacemos lo siguiente:

    #secciones {
      margin-left: 100px;
    }
    

Esta medida es un tanto a modo pero nos ayuda a indicar un separamiento del lado izquierdo de la sección de contenidos y evitar que queden como ya mencionaba

EJEMPLO

    <style>
      .menu {
        position: fixed;
        top: 0;
      }
      #secciones {
        margin-left: 100px;
      }
    </style>
    <div class="container">
      <nav class="menu">
      <ul class="menu-list">
        <li class="menu-list__element">
          <a href="#inicio">
            Inicio
          </a>
        </li>
        <li class="menu-list__element">
          <a href="#medio">
            Medio
          </a>
        </li>
        <li class="menu-list__element">
          <a href="#fin">
            Fin
          </a>
        </li>
      </ul>
    </nav>
    <section id="secciones">
      <p class="secciones-parrafo" id="inicio">
        <p>El inicio</p>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nam cum possimus maxime animi nemo pariatur ipsa, incidunt sit corporis explicabo quae provident autem sapiente labore commodi nobis facere magni.</span>
        <span>Sit nihil voluptatum autem tenetur inventore asperiores deserunt magni impedit totam non quas, numquam vitae molestias distinctio velit, vel, optio alias minus error soluta repellat quae qui aliquid vero debitis.</span>
        <span>Veniam quod tempore, ipsum sed. Id ratione adipisci facere et debitis, explicabo nostrum at repudiandae ipsam molestias doloribus saepe perferendis fugit, quam quae dolor praesentium! Modi cupiditate qui, vel iusto.</span>
      </p>
      <p class="secciones-parrafo" id="medio">
        <p>El medio</p>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque magnam corrupti atque, blanditiis repellendus commodi adipisci, consequuntur maxime rem error nesciunt debitis ullam. Hic velit quibusdam, repudiandae consequuntur explicabo nostrum.</span>
        <span>Mollitia et, sit? Placeat aspernatur nam fugiat rerum corporis odit sunt temporibus nesciunt praesentium, quae ex optio perspiciatis, earum, natus qui vero aut, repellendus officiis. Earum aut, repellat officiis nostrum.</span>
        <span>Sint cumque consectetur quidem labore cum consequuntur ut officia similique repellat, incidunt quia laboriosam unde suscipit? Incidunt illo nihil dicta consectetur, impedit, officia necessitatibus tempora reprehenderit, maiores obcaecati doloribus, iste.</span>
      </p>
      <p class="secciones-parrafo" id="fin">
        <p>El final</p>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit earum dolor quos eveniet quae repudiandae aspernatur at, ea fuga pariatur veritatis nemo nam doloribus est mollitia sequi culpa quia praesentium.</span>
        <span>Neque nihil, placeat odio nemo eum iusto necessitatibus assumenda molestiae quos nulla, dicta quibusdam, repellendus? Illo rem quas voluptas error consequuntur at nulla possimus, expedita unde atque, necessitatibus ab, nostrum!</span>
        <span>Possimus harum provident natus laboriosam dolores soluta, id nulla voluptatem, architecto aspernatur! Quod, illum, magni! Voluptas vero quos ipsa ipsam atque est, odit explicabo dicta voluptate aspernatur amet, autem sint.</span>
      </p>
    </section>

Aclaración

El ejemplo no esta estilizado y seguro puede ser mejorado notablemente, es solo para ilustrar la solución propuesta

Referencia

2
  • por alguna razon la lista de navegacion con el scroll se mueve a pesar de que use position: fixed;
    – user273188
    Commented el 23 oct. 2020 a las 0:07
  • Revisa si tu css no tiene alguna otra regla que anule el comportamiento que defino en mi respuesta, tal vez algún framework, etc
    – user128299
    Commented el 23 oct. 2020 a las 0:08

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.