Cómo estructurar la barra de navegación HTML para pantallas móviles y de escritorio.

16 Jun, 2023 Programación 0

He creado dos barras de navegación HTML (una para pantallas de escritorio y otra para pantallas móviles) y quiero tener solo una barra de navegación HTML y usar CSS para dar estilo a ambas tamaños de pantalla, ya que creo que no es una buena idea repetir el código. El problema es que nunca he hecho esto antes y la mayoría de los ejemplos de muestra que encontré utilizan frameworks de CSS. ¿Cómo debo abordar este problema?

Aquí hay una versión simplificada del código:

function openNav() {
  document.getElementById("sidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("sidenav").style.width = "0";
}

.navbar {
  background-color: white;
  padding-bottom: 10px;
  width: 100%;
}

.main-nav {
  display: none;
}

.navbar-toggle {
  position: absolute;
  top: 8px;
  right: 20px;
  font-size: 19px;
}

.nav-mobile {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  background-color: white;
  overflow-x: hidden;
  padding-top: 80px;
}

.nav-mobile a {
  display: block;
}

.nav-mobile .closebutton {
  position: absolute;
  top: 0;
  right: 5px;
  font-size: 56px;
}

.bar1,
.bar2,
.bar3 {
  width: 25px;
  height: 2px;
  background-color: black;
  margin: 6px 0;
}

@media (min-width: 768px) {
  .main-nav {
    display: flex;
    margin-right: 30px;
    flex-direction: row;
    justify-content: flex-end;
  }

  .navbar-toggle {
    display: none;
  }

  .navbar {
    display: flex;
    justify-content: space-between;
  }
}

<nav class="navbar">
  <div class="logo-position">
    <a href="#" class="logo">LOGO</a>
  </div>
  <ul class="main-nav">
    <li><a href="#" class="nav-links">Home</a></li>
    <li><a href="#" class="nav-links">About</a></li>
    <li><a href="#" class="nav-links">Portfolio</a></li>
    <li><a href="#" class="nav-links">Contact</a></li>
  </ul>
</nav>

<!-- Navbar for mobile -->
<div id="sidenav" class="nav-mobile">
  <a href="javascript:void(0)" class="closebutton" onclick="closeNav()">×</a>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Portfolio</a>
  <a href="#">Contact</a>
</div>

<div class="navbar-toggle" onclick="openNav()">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

davy.ai

June 16, 2023 at 2:20 pm

Para dar estilo a una barra de navegación HTML para pantallas de escritorio y móviles, se pueden usar las consultas de medios en CSS. Primero, elimine el código de la barra de navegación para la vista móvil y mantenga solo el código para la barra de navegación de escritorio en su archivo HTML. Luego, use las consultas @media en su CSS para agregar estilo para pantallas con un ancho máximo de 768px, que generalmente se considera el punto de interrupción para las pantallas móviles. Dentro de las consultas de medios, puede agregar propiedades para modificar la apariencia de la barra de navegación para pantallas móviles.

Aquí hay un ejemplo de cómo puede modificar el código CSS proporcionado para lograr esto:

.navbar {
  background-color: white;
  padding-bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.main-nav {
  display: flex;
  margin-right: 30px;
  flex-direction: row;
  justify-content: flex-end;
  list-style-type: none;
}

.main-nav li {
  margin: 0 10px;
}

.main-nav a {
  text-decoration: none;
  color: black;
}

.navbar-toggle {
  display: none;
}

@media (max-width: 768px) {
  .main-nav {
    display: none;
  }

  .navbar-toggle {
    display: block;
    position: absolute;
    top: 8px;
    right: 20px;
    font-size: 19px;
    cursor: pointer;
  }

  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-mobile {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 2;
    top: 0;
    right: 0;
    background-color: white;
    overflow-x: hidden;
    padding-top: 80px;
    display: none;
  }

  .nav-mobile a {
    display: block;
    padding: 10px;
  }

  .nav-mobile .closebutton {
    position: absolute;
    top: 0;
    right: 5px;
    font-size: 56px;
    cursor: pointer;
  }

  .nav-mobile.show {
    display: block;
  }
}

En este código CSS actualizado, hemos eliminado los estilos para .nav-mobile (la barra de navegación para la vista móvil) y, en su lugar, hemos agregado estilos dentro de una consulta @media para pantallas con un ancho máximo de 768px. Dentro de la consulta de medios, hemos agregado estilos para una nueva clase .nav-mobile que se utilizará para mostrar la barra de navegación para la vista móvil. También hemos agregado estilos para una nueva clase .show que utilizaremos para cambiar la visualización de la barra de navegación para la vista móvil cuando el usuario haga clic en el botón de alternancia.

Para cambiar la visualización de la barra de navegación para la vista móvil, necesitaremos agregar un código JavaScript. Aquí hay una versión modificada del código JavaScript proporcionado para lograr esto:

function toggleNav() {
  var nav = document.getElementById("nav-mobile");
  nav.classList.toggle("show");
}

document.getElementById("navbar-toggle").addEventListener("click", toggleNav);

document.querySelectorAll("#nav-mobile a").forEach(function(a){
  a.addEventListener("click", toggleNav);
});

En este código JavaScript actualizado, hemos reemplazado las funciones openNav () y closeNav () con una nueva función toggleNav () que cambia la visualización de la barra de navegación para la vista móvil alternando la clase .show. También hemos agregado escuchadores de eventos tanto al botón de alternancia como a los enlaces dentro de la barra de navegación para la vista móvil. Cuando el usuario hace clic en el botón de alternancia, se llama a la función toggleNav (), lo que cambia la visualización de la barra de navegación para la vista móvil. Cuando el usuario hace clic en un enlace dentro de la barra de navegación para la vista móvil, se llama a la función toggleNav () para ocultar la barra de navegación para la vista móvil.

Answer

davy.ai

June 16, 2023 at 2:20 pm
Para dar estilo a una barra de navegación HTML para pantallas de escritorio y móviles, se pueden usar las consultas de medios en CSS. Primero, elimine el código de la barra de navegación para la vista móvil y mantenga solo el código para la barra de navegación de escritorio en su archivo HTML. Luego, use las consultas @media en su CSS para agregar estilo para pantallas con un ancho máximo de 768px, que generalmente se considera el punto de interrupción para las pantallas móviles. Dentro de las consultas de medios, puede agregar propiedades para modificar la apariencia de la barra de navegación para pantallas móviles.

Aquí hay un ejemplo de cómo puede modificar el código CSS proporcionado para lograr esto:
```
.navbar {
  background-color: white;
  padding-bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.main-nav {
  display: flex;
  margin-right: 30px;
  flex-direction: row;
  justify-content: flex-end;
  list-style-type: none;
}

.main-nav li {
  margin: 0 10px;
}

.main-nav a {
  text-decoration: none;
  color: black;
}

.navbar-toggle {
  display: none;
}

@media (max-width: 768px) {
  .main-nav {
    display: none;
  }

  .navbar-toggle {
    display: block;
    position: absolute;
    top: 8px;
    right: 20px;
    font-size: 19px;
    cursor: pointer;
  }

  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-mobile {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 2;
    top: 0;
    right: 0;
    background-color: white;
    overflow-x: hidden;
    padding-top: 80px;
    display: none;
  }

  .nav-mobile a {
    display: block;
    padding: 10px;
  }

  .nav-mobile .closebutton {
    position: absolute;
    top: 0;
    right: 5px;
    font-size: 56px;
    cursor: pointer;
  }

  .nav-mobile.show {
    display: block;
  }
}
```
En este código CSS actualizado, hemos eliminado los estilos para .nav-mobile (la barra de navegación para la vista móvil) y, en su lugar, hemos agregado estilos dentro de una consulta @media para pantallas con un ancho máximo de 768px. Dentro de la consulta de medios, hemos agregado estilos para una nueva clase .nav-mobile que se utilizará para mostrar la barra de navegación para la vista móvil. También hemos agregado estilos para una nueva clase .show que utilizaremos para cambiar la visualización de la barra de navegación para la vista móvil cuando el usuario haga clic en el botón de alternancia.

Para cambiar la visualización de la barra de navegación para la vista móvil, necesitaremos agregar un código JavaScript. Aquí hay una versión modificada del código JavaScript proporcionado para lograr esto:
```
function toggleNav() {
  var nav = document.getElementById("nav-mobile");
  nav.classList.toggle("show");
}

document.getElementById("navbar-toggle").addEventListener("click", toggleNav);

document.querySelectorAll("#nav-mobile a").forEach(function(a){
  a.addEventListener("click", toggleNav);
});
```
En este código JavaScript actualizado, hemos reemplazado las funciones openNav () y closeNav () con una nueva función toggleNav () que cambia la visualización de la barra de navegación para la vista móvil alternando la clase .show. También hemos agregado escuchadores de eventos tanto al botón de alternancia como a los enlaces dentro de la barra de navegación para la vista móvil. Cuando el usuario hace clic en el botón de alternancia, se llama a la función toggleNav (), lo que cambia la visualización de la barra de navegación para la vista móvil. Cuando el usuario hace clic en un enlace dentro de la barra de navegación para la vista móvil, se llama a la función toggleNav () para ocultar la barra de navegación para la vista móvil.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Answer

davy.ai