0

Vi una publicación con negativos que le ocurría a un usuario que no podía hacer un menú lateral fijo a la izquierda y se la eliminaron pero yo entendí su código.

Si lo ves o para los futuros usuarios que tengan problemas con los menús fijos laterales, dejo un código bien sencillo de base que puede servir para empezar a hacer un menú lateral, y si lo retocas un footer o navbar top. Este hace uso de position: fixed;

Con esto se consigue tener un menú lateral el cual se quedará fijo todo el rato a la izquierda. En este caso, aunque bajes hacia abajo el menú seguirá en el mismo sitio. Esto se puede ver en la página web de Youtube.

2
  • Con aceptar tu propia respuesta, en un rato, basta para indicar que tiene solución. Ahora bien, la pregunta como está es bastante floja y pocos van a llegar a esa respuesta a partir de la pregunta. Trata de ponerle un poquito más de detalle
    – Alfabravo
    Commented el 12 abr. 2022 a las 17:56
  • Intente dejarla asi un poco menos floja, no sabria como dejarla mejor para los demas usuarios
    – FranyxD
    Commented el 12 abr. 2022 a las 17:59

1 respuesta 1

0

Es básico, se podría mejorar y/o hacer responsive. Espero que pueda ayudar esta aportación.

Dato: 1em = 16px de normal. Puede variar en ciertos casos. si para un selector CSS hemos especificado un font-size de 16px, entonces 1em = 16px

.menuLateral {
  height: 100%;
  width: fit-content;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: black;
  overflow-x: hidden;
  padding: 2em 1.5em 0em 0em; 
}

.menuLateral a {
  padding: 0.5em;
  text-decoration: none;
  color: grey;
  display: block;
}

.menuLateral a:hover {
  color: white;
}


main {
  margin-left: 4em; /* Same as the width of the sidenav */
  font-size: 2em;
  padding: 0em 1em;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div class="menuLateral">
   <ul>
    <li><a href="#enlace1">Inicio</a></li>
    <li><a href="#enlace2">Contacto</a> </li>
    <li><a href="#enlace3">FAQ</a> </li>
   </ul>
</div>

<main>
  <h2>Menu lateral</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida mauris id nunc laoreet, vel semper quam interdum. Etiam congue nibh id rutrum fringilla. Aliquam erat volutpat. Nulla pellentesque mauris ante, at condimentum lacus finibus a. Nullam vitae suscipit turpis. Donec nec vehicula quam, nec malesuada diam. Pellentesque eget dolor volutpat, tristique justo vel, fermentum augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida mauris id nunc laoreet, vel semper quam interdum. Etiam congue nibh id rutrum fringilla. Aliquam erat volutpat. Nulla pellentesque mauris ante, at condimentum lacus finibus a. Nullam vitae suscipit turpis. Donec nec vehicula quam, nec malesuada diam. Pellentesque eget dolor volutpat, tristique justo vel, fermentum augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida mauris id nunc laoreet, vel semper quam interdum. Etiam congue nibh id rutrum fringilla. Aliquam erat volutpat. Nulla pellentesque mauris ante, at condimentum lacus finibus a. Nullam vitae suscipit turpis. Donec nec vehicula quam, nec malesuada diam. Pellentesque eget dolor volutpat, tristique justo vel, fermentum augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>

</main>
   
</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.