Cree Una Barra De Navegación Adhesiva Personalizada Con CSS

Las barras de navegación son probablemente la mejor manera de permitir que los usuarios naveguen por sus sitios web sin esfuerzo y sin perderse.

Las personas generalmente colocan barras de navegación en la parte superior de la página, pero también puede colocar una barra de navegación a ambos lados de su página web si complementa su diseño. Las barras de navegación pueden ser una lista horizontal de elementos de navegación (enlaces) o estilo hamburguesa en las esquinas superior izquierda o superior derecha de las páginas web en pantallas más pequeñas.

Para permitir una mejor accesibilidad a las barras de navegación, puede pegarlas en la parte superior usando unas pocas líneas de CSS y JavaScript. Se puede acumular más código JavaScript a medida que aumenta la complejidad de la barra de navegación.

En esta publicación, veremos cómo puede crear una barra de navegación adhesiva personalizada que responda a todos los tamaños de pantalla con una gran funcionalidad, usando solo CSS para crearla.

También aprenderemos cómo usar el azúcar sintáctico de SCSS para escribir nuestro código CSS mucho más rápido y limpio.

Entonces empecemos.

Usando HTML y SCSS

Comenzaremos con algunas cosas simples y gradualmente nos sumergiremos en cosas más complejas a medida que avance este artículo. Lo primero que podemos hacer para crear una barra de navegación es escribir algo de HTML. Entonces, comience copiando este código HTML en su editor de código favorito o en Codepen.

<html>
  <body>
    <header class="header">
      <nav class="header__nav" id="navbar">
        <ul class="header__list">
          <li class="header__item"><a href="index.html" class="header__link">Home</a></li>
          <li class="header__item"><a href="about.html" class="header__link">About</a></li>
          <li class="header__item"><a href="services.html" class="header__link">Services</a></li>
          <li class="header__item"><a href="services.html" class="header__link">Contact</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

El código HTML anterior es bastante simple, y no hay nada complejo en él. Me gustaría que notara las convenciones que usé para escribir los "nombres de clase" para cada elemento. Esta pequeña convención para escribir "nombres de clase" para elementos HTML se conoce como BEM . BEM significa Block-Element-Modifier .

Damos un nombre de bloque a cada elemento contenedor en nuestro código HTML. En este caso, el envoltorio es nuestro <header class="header">. También puede describirlo como el elemento padre .

Cada elemento secundario dentro del contenedor o padre tiene el nombre de clase de su padre, seguido de dos guiones bajos con un identificador único. Como habrás notado, en nuestro caso, es:

<nav class="header__nav" id="navbar">

Ahora, podemos darle a cada elemento secundario en nuestro contenedor un nombre de clase como este. Otra cosa a tener en cuenta aquí es que comencé sus nombres de clase con la palabra "encabezado", incluso cuando son sub-hijos del encabezado. Se hace a propósito para mantener la consistencia, y al escribir código SCSS, eventualmente nos ayudará mucho, y lo veremos en un momento.

Para continuar, puede copiar el siguiente código SCSS en su archivo SCSS:

$color-blue: #00315c;
$color-purple: #6f479f;
$color-black: #202020;
$color-gray: #edebeb;
$color-white: #fcfcfc;

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

html,
body {
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

body {
  font-family: "Montserrat", sans-serif;
}

.header {
  height: 20vh;
  background-color: $color-gray;
  padding: 1.5rem;
  position: relative;

  &__nav {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 4rem 5rem;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
    width: 100%;
    transition: 0.6s;
  }

  &__list {
    list-style: none;
    display: flex;
  }

  &__item {
    &:not(:last-child) {
      margin-right: 5rem;
    }
  }

  &__link {
    font-size: 1.6rem;
    color: $color-blue;
    font-weight: 400;
    text-decoration: none;

    &:hover {
      font-weight: 600;
      transition: all 0.3s;
    }
  }
}

(Nota: si me está siguiendo en Codepen, puede seleccionar la opción SCSS en el menú de configuración en la ventana CSS. Si está en su editor como VS Code, puede descargar la extensión SCSS; compilará su SCSS código en código CSS que puede incluir en su archivo HTML)

Extensión del preprocesador CSS

Si está familiarizado con SCSS y comprende lo que sucede en el código anterior, no dude en omitir las siguientes líneas.

  • Las primeras líneas del código son las variables de los colores, que usaremos más en este tutorial. Puede configurar estas variables en cualquier color que desee y luego, en lugar de escribir el valor hash o el valor "RGBA" cada vez que desee usar un color, puede escribir el nombre de la variable
  • La sintaxis que quiero que tenga en cuenta comienza en la línea 24. He escrito el .headerpara iniciar el estilo del elemento de encabezado. Pero, dentro de los mismos corchetes, también he escrito "&__nav" que inicia el estilo de nuestro elemento de navegación.
  • En SCSS, puede escribir el estilo de los elementos anidados en los mismos corchetes. Además, el &signo tiene el valor de su identificador principal. En este caso, es .headerSi estuviéramos usando ID en lugar de nombres de clase, &significaría#header
  • También puede ver en la línea 61, cómo he usado el &:hover, porque quería aplicar la pseudo clase flotante en mis elementos de enlace.
  • Por lo tanto, nos facilita escribir el estilo anidado y eliminar el código redundante. Puede seguir este enlace para leer más sobre SCSS y su sintaxis .

Como habrás notado, no pusimos mucho esfuerzo en crear una barra de navegación para pantallas más grandes porque, según la buena experiencia del usuario, siempre debería ser una lista horizontal en la parte superior de la pantalla.

Podemos agregar el menú de hamburguesas en pantallas más grandes, pero para evitar clics adicionales de los usuarios, el menú de hamburguesas siempre aparece en pantallas más pequeñas, lo que haremos ahora.

Barras de navegación de hamburguesas con CSS

Ahora, podemos enfocarnos en crear una barra de navegación de hamburguesas personalizada en pantallas más pequeñas simplemente usando CSS.

Para darle una visión general de lo que estamos construyendo; no es factible mostrar elementos de navegación horizontales en pantallas más pequeñas. En su lugar, crearemos un menú de hamburguesas, que mostrará los elementos superpuestos al fondo de toda la pantalla.

Comencemos escribiendo algo de código. Copie el código HTML que se proporciona a continuación después de la línea 10 dentro de su código HTML existente.

 <div class="navigation">
    <input
      type="checkbox"
      class="navigation__checkbox"
      id="navi-toggle"
    />
    <label for="navi-toggle" class="navigation__button">
      <span class="navigation__icon"></span>
    </label>
    <div class="navigation__background"></div>
    <nav class="navigation__nav">
      <ul class="navigation__list">
        <li class="navigation__item">
          <a href="index.html" class="navigation__link">Home</a>
        </li>
        <li class="navigation__item">
          <a href="about.html" class="navigation__link">About</a>
        </li>
        <li class="navigation__item">
          <a href="services.html" class="navigation__link">Services</a>
        </li>
        <li class="navigation__item">
          <a href="contact.html" class="navigation__link">Contact Us</a>
        </li>
      </ul>
    </nav>
  </div>

Después de copiar el código, su archivo HTML debería verse así:

archivo HTML

Es el único código HTML que necesitamos para hacer un menú de hamburguesas que se vea bien en pantallas más pequeñas. Entonces, déjame explicarte algunos puntos clave en este código recién agregado:

  • Hemos agregado un nuevo <div>elemento y le hemos dado <div>un nombre de clase de "navegación". Dentro del div, hemos agregado una casilla de verificación. Esta casilla de verificación nos ayudará a determinar cuándo queremos que se muestren nuestros elementos de navegación y cuándo los queremos ocultar.
  • Después de la casilla de verificación, tenemos una etiqueta que, junto con un elemento dentro de ella, actuará como el ícono de las “tres líneas” que vemos en un menú típico de hamburguesas.
  • El tercer elemento es otro <div>con un nombre de clase "navigation__background". Este div proporcionará una superposición de fondo para que nuestros elementos de navegación se muestren claramente en la pantalla
  • Lo último son nuestros elementos de navegación en una lista. Tenemos que volver a agregarlos porque los elementos de navegación anteriores son para las pantallas más grandes y estos elementos de navegación son para las más pequeñas.

(Nota: he usado las mismas convenciones de nomenclatura BEM para escribir nombres de clase para cada elemento)

Dar estilo a la barra de navegación con CSS

Ahora, todo lo que queda es diseñar nuestra barra de navegación. Entonces, escribiremos mucho código CSS. Intentaré explicar cada bloque de CSS que escribimos uno por uno para que no cause ninguna confusión.

En primer lugar, escribiremos algunas consultas de medios porque necesitamos mostrar el menú de hamburguesas en un cierto ancho.

  • Ahora, para consultas de medios, usaremos los " mixins " en SCSS. Los mixins son como funciones en SCSS
  • Para el argumento, pasará el punto de interrupción en el que desea ver los cambios.
  • Para facilitar las cosas, puede dar a cada punto de interrupción un nombre propio; por ejemplo, "400px" se puede nombrar como "teléfono" porque ese es el ancho de pantalla promedio de un teléfono
  • Una vez llamado, puede escribir sus estilos CSS dentro de las llaves y los estilos se aplicarán para ese punto de interrupción. Veamos cómo podemos lograr esto escribiendo esas consultas de medios.

Preguntas de los medios

Copie el siguiente código en la parte superior de su archivo SCSS y estaremos listos para usar estas consultas de medios.

@mixin respond($breakpoint) {
  @if $breakpoint == phone {
    @media only screen and (max-width: 37.5em) {
      @content;
    } //600px
  }
  @if $breakpoint == s-hundred {
    @media only screen and (max-width: 43.75em) {
      @content;
    } //700px
  }
  @if $breakpoint == tab-port {
    @media only screen and (max-width: 56.25em) {
      @content;
    } //900px
  }
  @if $breakpoint == tab-land {
    @media only screen and (max-width: 75em) {
      @content;
    } //1200px
  }
  @if $breakpoint == big-desktop {
    @media only screen and (min-width: 112.5em) {
      @content;
    } //1800
  }
}

¿Obtuviste la sintaxis para estas consultas de medios? Creamos un mixin (función) llamado "responder", que se supone que debe tomar cualquier "punto de interrupción" como argumento y aplicar esos estilos dentro de esa consulta de medios.

Estilo de la hamburguesa

Ahora, podemos comenzar a diseñar nuestra barra de navegación en función de estas consultas de medios. Entonces, comencemos copiando este código:

.navigation {
  display: none;
  @include respond(s-hundred){
    display: block;
  }
  z-index: 2000;
  &__checkbox {
    display: none;
  }
}

En el código anterior, estamos configurando la visualización de nuestra navegación de hamburguesas en ninguno,  porque solo queremos ser visibles en pantallas más pequeñas. Por lo tanto, hemos utilizado nuestro mixin de respuesta para lograr esa funcionalidad.

El índice z se establece en 2000 porque queremos que nuestra barra de navegación se superponga a todo el resto del contenido. Lo veremos más adelante en este artículo.

Dado que estamos mostrando nuestra navegación de hamburguesas a 700 px, podemos eliminar la visualización de nuestra lista horizontal con el mismo ancho.

Para hacer esto, agregue esta pequeña consulta de medios resaltada dentro de su estilo "header__list".

&__list {
    list-style: none;
    display: flex;
    @include respond(s-hundred){
      display: none;
    }
}

Después de agregar estos múltiples bloques de código, su archivo SCSS debería verse así:

Código de archivo SCSS

Tamaño de pantalla superior a 700 px:

Configuración del ancho de pantalla en 705

Tamaño de pantalla inferior a 700 px para comparación:

Establecer el ancho del tamaño de la pantalla en 696

De ahora en adelante, tenemos que agregar todos los bloques de código dentro del bloque de estilo “.navigation” porque todo está anidado.

La siguiente pieza del bloque de código es bastante simple. Este código diseñará nuestro botón de navegación para que sea transparente y circular. Lo estamos haciendo transparente porque el elemento del ícono de navegación dentro de él servirá como el ícono de hamburguesa para este botón.

&__button {
    background-color: transparent;
    height: 7rem;
    width: 7rem;
    top: 6rem;
    right: 6rem;
    border-radius: 50%;
    z-index: 2000;
    box-shadow: 0 1rem 3rem rgba($color-black, 0.1);
    text-align: center;
    cursor: pointer;
  }

Ahora, diseñaremos nuestro icono de hamburguesa. Usaremos las clases Pseudo "antes" y "después" con posición: absoluta. Finalmente, agregaremos un pequeño efecto de desplazamiento en nuestro ícono usando la pseudo-clase "desplazamiento".

&__icon {
    position: relative;
    margin-left: 2rem;
    &,
    &::before,
    &::after {
      width: 4rem;
      height: 3px;
      background-color: $color-black;
      display: inline-block;
    }
    &::before,
    &::after {
      content: '';
      position: absolute;
      left: 0;
      transition: all 0.2s;
    }
    &::before {
      top: -0.65rem;
    }
    &::after {
      top: 0.65rem;
    }
  }
  &__button:hover &__icon::before {
    top: -1rem;
  }
  &__button:hover &__icon::after {
    top: 1rem;
  }

En este punto, nuestro ícono de menú de hamburguesas debería aparecer en la pantalla como en la imagen a continuación:

Icono de hamburguesa en la barra de navegación

Ahora, al presionar el botón (o marcar), queremos que nuestro icono de hamburguesa se transforme en un icono de cierre " X " para indicar que nuestra barra de navegación está visible ahora, y que si se presiona más, se cerrará nuestra barra de navegación.

Para hacer esto, copie el código dado a continuación, y estaremos listos para usar nuestro ícono.

&__checkbox:checked + &__button &__icon {
  background-color: transparent;
}
&__checkbox:checked + &__button &__icon::before {
  top: 0;
  transform: rotate(135deg);
  background-color: $color-white;
}
&__checkbox:checked + &__button &__icon::after {
  top: 0;
  transform: rotate(-135deg);
  background-color: $color-white;
}
  • En el bloque de código anterior, estamos tomando la ayuda de la pseudoclase "marcada" que está presente en nuestro elemento de casilla de verificación. Junto con eso, también estamos usando el selector CSS "+"
  • El selector CSS “+” nos ayuda a seleccionar el elemento que se coloca inmediatamente después del elemento especificado
  • por último, estamos rotando los pseudoelementos "antes" y "después" de nuestro icono para que parezca una " X "

Seguiremos adelante agregando nuestra superposición de fondo. La lógica detrás de nuestro trasfondo es bastante simple; agregaremos el color de fondo en nuestro botón y, inicialmente, no será visible porque su índice z estaría detrás del botón de la casilla de verificación.

Tan pronto como hagamos clic en la casilla de verificación, escalaremos nuestro fondo para cubrir toda la pantalla y nuestros elementos de navegación se volverán visibles.

Copie el siguiente código para lograr esto.

&__background {
  background: radial-gradient(
    rgba($color-blue, 1),
    rgba($color-purple, 1)
  );
  height: 6rem;
  width: 6rem;
  position: fixed;
  top: -1rem;
  right: 0rem;
  z-index: -1000;
  display: none;
  border-radius: 50rem;
  }

  &__checkbox:checked ~ &__background {
  @include respond(s-hundred) {
    display: block;
    transform: scale(80);
  }
}

Después de aplicar la superposición de fondo, la barra de navegación debería verse así:

Barra de navegación con fondo azul oscuro

Lo último que queda es diseñar nuestros elementos de navegación. Por contexto, los elementos de navegación solo deberían aparecer cuando hacemos clic en el icono de la hamburguesa.

Cubrirá toda la pantalla para ofrecer una experiencia de usuario positiva en pantallas más pequeñas.

Por último, debería desaparecer una vez que volvamos a hacer clic en el icono. Se ha incluido cierta lógica básica de estilo en este bloque de código, que es muy similar a lo que hemos hecho en el resto del tutorial.

&__nav {
    position: fixed;
    margin-top: 1rem;
    padding: 1.2rem;
    font-size: 1.5rem;
    font-weight: 400;
    z-index: 1500;
    @include respond(phone){
      padding: 0;
    }
  }

  &__list {
    list-style: none;
    opacity: 0;
    visibility: hidden;
    margin-top: 50%;
  }

  &__item {
    &:not(:last-child) {
      margin-bottom: 1.5rem;
    }
  }

  &__link {
    text-decoration: none;
    color: $color-white;
    &:hover {
      color: $color-blue;
    }
  }

  &__checkbox:checked ~ &__nav &__list {
    opacity: 1;
    visibility: visible;
    transition: all 0.5s;
  }

  &__checkbox:checked ~ &__nav {
    @include respond(s-hundred) {
      font-size: 4rem;
      position: absolute;
      top: 32rem;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  &__checkbox:checked ~ &__nav &__link {
    @include respond(s-hundred) {
      color: $color-white;
    }
  }

Finalmente, nuestra barra de navegación adhesiva personalizada debería verse así en pantallas más pequeñas:

Barra de navegación en pantalla más pequeñaelementos de la barra de navegación en una pantalla más pequeña

Puede diseñar la barra de navegación o sus elementos como desee. Tengo el símbolo de cierre " X " en el medio, pero generalmente va al lado superior derecho. Por lo tanto, eres libre de hacer el resto del estilo como mejor te parezca.

Finalmente, si desea agregar una pequeña animación en su barra de navegación al desplazarse, puede agregar este pequeño bloque de código CSS dentro de su bloque de estilo de encabezado:

&__sticky {
    padding: 5rem 10rem;
    background-color: $color-gray;
    box-shadow: 0px 3px 5px rgba($color-blue, 0.5);
}

Además, no olvide agregar este código JavaScript:

const navBar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
  navBar.classList.toggle('header__sticky', window.scrollY > 0);
});

Las herramientas y técnicas que CSS nos brinda en este momento son suficientes para crear cosas geniales como nuestra barra de navegación sin usar JavaScript.

Puede encontrar el enlace de CodePen para esta barra de navegación adhesiva personalizada aquí.

Conclusión

Puedes hacer toneladas de cosas solo con CSS. Si ve tutoriales sobre barras de navegación personalizadas o cualquier otra cosa elegante, para lo cual tiene que descargar alguna biblioteca o escribir algún código JavaScript, entonces considere otras alternativas primero, ¡porque JavaScript no es la única forma!

Intente comprender varios conceptos de CSS y tal vez pueda hacer todo eso usando solo CSS.

Fuente: https://blog.logrocket.com/build-custom-sticky-navbar-css/

#css 

What is GEEK

Buddha Community

Cree Una Barra De Navegación Adhesiva Personalizada Con CSS

Cree Una Barra De Navegación Adhesiva Personalizada Con CSS

Las barras de navegación son probablemente la mejor manera de permitir que los usuarios naveguen por sus sitios web sin esfuerzo y sin perderse.

Las personas generalmente colocan barras de navegación en la parte superior de la página, pero también puede colocar una barra de navegación a ambos lados de su página web si complementa su diseño. Las barras de navegación pueden ser una lista horizontal de elementos de navegación (enlaces) o estilo hamburguesa en las esquinas superior izquierda o superior derecha de las páginas web en pantallas más pequeñas.

Para permitir una mejor accesibilidad a las barras de navegación, puede pegarlas en la parte superior usando unas pocas líneas de CSS y JavaScript. Se puede acumular más código JavaScript a medida que aumenta la complejidad de la barra de navegación.

En esta publicación, veremos cómo puede crear una barra de navegación adhesiva personalizada que responda a todos los tamaños de pantalla con una gran funcionalidad, usando solo CSS para crearla.

También aprenderemos cómo usar el azúcar sintáctico de SCSS para escribir nuestro código CSS mucho más rápido y limpio.

Entonces empecemos.

Usando HTML y SCSS

Comenzaremos con algunas cosas simples y gradualmente nos sumergiremos en cosas más complejas a medida que avance este artículo. Lo primero que podemos hacer para crear una barra de navegación es escribir algo de HTML. Entonces, comience copiando este código HTML en su editor de código favorito o en Codepen.

<html>
  <body>
    <header class="header">
      <nav class="header__nav" id="navbar">
        <ul class="header__list">
          <li class="header__item"><a href="index.html" class="header__link">Home</a></li>
          <li class="header__item"><a href="about.html" class="header__link">About</a></li>
          <li class="header__item"><a href="services.html" class="header__link">Services</a></li>
          <li class="header__item"><a href="services.html" class="header__link">Contact</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

El código HTML anterior es bastante simple, y no hay nada complejo en él. Me gustaría que notara las convenciones que usé para escribir los "nombres de clase" para cada elemento. Esta pequeña convención para escribir "nombres de clase" para elementos HTML se conoce como BEM . BEM significa Block-Element-Modifier .

Damos un nombre de bloque a cada elemento contenedor en nuestro código HTML. En este caso, el envoltorio es nuestro <header class="header">. También puede describirlo como el elemento padre .

Cada elemento secundario dentro del contenedor o padre tiene el nombre de clase de su padre, seguido de dos guiones bajos con un identificador único. Como habrás notado, en nuestro caso, es:

<nav class="header__nav" id="navbar">

Ahora, podemos darle a cada elemento secundario en nuestro contenedor un nombre de clase como este. Otra cosa a tener en cuenta aquí es que comencé sus nombres de clase con la palabra "encabezado", incluso cuando son sub-hijos del encabezado. Se hace a propósito para mantener la consistencia, y al escribir código SCSS, eventualmente nos ayudará mucho, y lo veremos en un momento.

Para continuar, puede copiar el siguiente código SCSS en su archivo SCSS:

$color-blue: #00315c;
$color-purple: #6f479f;
$color-black: #202020;
$color-gray: #edebeb;
$color-white: #fcfcfc;

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

html,
body {
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

body {
  font-family: "Montserrat", sans-serif;
}

.header {
  height: 20vh;
  background-color: $color-gray;
  padding: 1.5rem;
  position: relative;

  &__nav {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 4rem 5rem;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
    width: 100%;
    transition: 0.6s;
  }

  &__list {
    list-style: none;
    display: flex;
  }

  &__item {
    &:not(:last-child) {
      margin-right: 5rem;
    }
  }

  &__link {
    font-size: 1.6rem;
    color: $color-blue;
    font-weight: 400;
    text-decoration: none;

    &:hover {
      font-weight: 600;
      transition: all 0.3s;
    }
  }
}

(Nota: si me está siguiendo en Codepen, puede seleccionar la opción SCSS en el menú de configuración en la ventana CSS. Si está en su editor como VS Code, puede descargar la extensión SCSS; compilará su SCSS código en código CSS que puede incluir en su archivo HTML)

Extensión del preprocesador CSS

Si está familiarizado con SCSS y comprende lo que sucede en el código anterior, no dude en omitir las siguientes líneas.

  • Las primeras líneas del código son las variables de los colores, que usaremos más en este tutorial. Puede configurar estas variables en cualquier color que desee y luego, en lugar de escribir el valor hash o el valor "RGBA" cada vez que desee usar un color, puede escribir el nombre de la variable
  • La sintaxis que quiero que tenga en cuenta comienza en la línea 24. He escrito el .headerpara iniciar el estilo del elemento de encabezado. Pero, dentro de los mismos corchetes, también he escrito "&__nav" que inicia el estilo de nuestro elemento de navegación.
  • En SCSS, puede escribir el estilo de los elementos anidados en los mismos corchetes. Además, el &signo tiene el valor de su identificador principal. En este caso, es .headerSi estuviéramos usando ID en lugar de nombres de clase, &significaría#header
  • También puede ver en la línea 61, cómo he usado el &:hover, porque quería aplicar la pseudo clase flotante en mis elementos de enlace.
  • Por lo tanto, nos facilita escribir el estilo anidado y eliminar el código redundante. Puede seguir este enlace para leer más sobre SCSS y su sintaxis .

Como habrás notado, no pusimos mucho esfuerzo en crear una barra de navegación para pantallas más grandes porque, según la buena experiencia del usuario, siempre debería ser una lista horizontal en la parte superior de la pantalla.

Podemos agregar el menú de hamburguesas en pantallas más grandes, pero para evitar clics adicionales de los usuarios, el menú de hamburguesas siempre aparece en pantallas más pequeñas, lo que haremos ahora.

Barras de navegación de hamburguesas con CSS

Ahora, podemos enfocarnos en crear una barra de navegación de hamburguesas personalizada en pantallas más pequeñas simplemente usando CSS.

Para darle una visión general de lo que estamos construyendo; no es factible mostrar elementos de navegación horizontales en pantallas más pequeñas. En su lugar, crearemos un menú de hamburguesas, que mostrará los elementos superpuestos al fondo de toda la pantalla.

Comencemos escribiendo algo de código. Copie el código HTML que se proporciona a continuación después de la línea 10 dentro de su código HTML existente.

 <div class="navigation">
    <input
      type="checkbox"
      class="navigation__checkbox"
      id="navi-toggle"
    />
    <label for="navi-toggle" class="navigation__button">
      <span class="navigation__icon"></span>
    </label>
    <div class="navigation__background"></div>
    <nav class="navigation__nav">
      <ul class="navigation__list">
        <li class="navigation__item">
          <a href="index.html" class="navigation__link">Home</a>
        </li>
        <li class="navigation__item">
          <a href="about.html" class="navigation__link">About</a>
        </li>
        <li class="navigation__item">
          <a href="services.html" class="navigation__link">Services</a>
        </li>
        <li class="navigation__item">
          <a href="contact.html" class="navigation__link">Contact Us</a>
        </li>
      </ul>
    </nav>
  </div>

Después de copiar el código, su archivo HTML debería verse así:

archivo HTML

Es el único código HTML que necesitamos para hacer un menú de hamburguesas que se vea bien en pantallas más pequeñas. Entonces, déjame explicarte algunos puntos clave en este código recién agregado:

  • Hemos agregado un nuevo <div>elemento y le hemos dado <div>un nombre de clase de "navegación". Dentro del div, hemos agregado una casilla de verificación. Esta casilla de verificación nos ayudará a determinar cuándo queremos que se muestren nuestros elementos de navegación y cuándo los queremos ocultar.
  • Después de la casilla de verificación, tenemos una etiqueta que, junto con un elemento dentro de ella, actuará como el ícono de las “tres líneas” que vemos en un menú típico de hamburguesas.
  • El tercer elemento es otro <div>con un nombre de clase "navigation__background". Este div proporcionará una superposición de fondo para que nuestros elementos de navegación se muestren claramente en la pantalla
  • Lo último son nuestros elementos de navegación en una lista. Tenemos que volver a agregarlos porque los elementos de navegación anteriores son para las pantallas más grandes y estos elementos de navegación son para las más pequeñas.

(Nota: he usado las mismas convenciones de nomenclatura BEM para escribir nombres de clase para cada elemento)

Dar estilo a la barra de navegación con CSS

Ahora, todo lo que queda es diseñar nuestra barra de navegación. Entonces, escribiremos mucho código CSS. Intentaré explicar cada bloque de CSS que escribimos uno por uno para que no cause ninguna confusión.

En primer lugar, escribiremos algunas consultas de medios porque necesitamos mostrar el menú de hamburguesas en un cierto ancho.

  • Ahora, para consultas de medios, usaremos los " mixins " en SCSS. Los mixins son como funciones en SCSS
  • Para el argumento, pasará el punto de interrupción en el que desea ver los cambios.
  • Para facilitar las cosas, puede dar a cada punto de interrupción un nombre propio; por ejemplo, "400px" se puede nombrar como "teléfono" porque ese es el ancho de pantalla promedio de un teléfono
  • Una vez llamado, puede escribir sus estilos CSS dentro de las llaves y los estilos se aplicarán para ese punto de interrupción. Veamos cómo podemos lograr esto escribiendo esas consultas de medios.

Preguntas de los medios

Copie el siguiente código en la parte superior de su archivo SCSS y estaremos listos para usar estas consultas de medios.

@mixin respond($breakpoint) {
  @if $breakpoint == phone {
    @media only screen and (max-width: 37.5em) {
      @content;
    } //600px
  }
  @if $breakpoint == s-hundred {
    @media only screen and (max-width: 43.75em) {
      @content;
    } //700px
  }
  @if $breakpoint == tab-port {
    @media only screen and (max-width: 56.25em) {
      @content;
    } //900px
  }
  @if $breakpoint == tab-land {
    @media only screen and (max-width: 75em) {
      @content;
    } //1200px
  }
  @if $breakpoint == big-desktop {
    @media only screen and (min-width: 112.5em) {
      @content;
    } //1800
  }
}

¿Obtuviste la sintaxis para estas consultas de medios? Creamos un mixin (función) llamado "responder", que se supone que debe tomar cualquier "punto de interrupción" como argumento y aplicar esos estilos dentro de esa consulta de medios.

Estilo de la hamburguesa

Ahora, podemos comenzar a diseñar nuestra barra de navegación en función de estas consultas de medios. Entonces, comencemos copiando este código:

.navigation {
  display: none;
  @include respond(s-hundred){
    display: block;
  }
  z-index: 2000;
  &__checkbox {
    display: none;
  }
}

En el código anterior, estamos configurando la visualización de nuestra navegación de hamburguesas en ninguno,  porque solo queremos ser visibles en pantallas más pequeñas. Por lo tanto, hemos utilizado nuestro mixin de respuesta para lograr esa funcionalidad.

El índice z se establece en 2000 porque queremos que nuestra barra de navegación se superponga a todo el resto del contenido. Lo veremos más adelante en este artículo.

Dado que estamos mostrando nuestra navegación de hamburguesas a 700 px, podemos eliminar la visualización de nuestra lista horizontal con el mismo ancho.

Para hacer esto, agregue esta pequeña consulta de medios resaltada dentro de su estilo "header__list".

&__list {
    list-style: none;
    display: flex;
    @include respond(s-hundred){
      display: none;
    }
}

Después de agregar estos múltiples bloques de código, su archivo SCSS debería verse así:

Código de archivo SCSS

Tamaño de pantalla superior a 700 px:

Configuración del ancho de pantalla en 705

Tamaño de pantalla inferior a 700 px para comparación:

Establecer el ancho del tamaño de la pantalla en 696

De ahora en adelante, tenemos que agregar todos los bloques de código dentro del bloque de estilo “.navigation” porque todo está anidado.

La siguiente pieza del bloque de código es bastante simple. Este código diseñará nuestro botón de navegación para que sea transparente y circular. Lo estamos haciendo transparente porque el elemento del ícono de navegación dentro de él servirá como el ícono de hamburguesa para este botón.

&__button {
    background-color: transparent;
    height: 7rem;
    width: 7rem;
    top: 6rem;
    right: 6rem;
    border-radius: 50%;
    z-index: 2000;
    box-shadow: 0 1rem 3rem rgba($color-black, 0.1);
    text-align: center;
    cursor: pointer;
  }

Ahora, diseñaremos nuestro icono de hamburguesa. Usaremos las clases Pseudo "antes" y "después" con posición: absoluta. Finalmente, agregaremos un pequeño efecto de desplazamiento en nuestro ícono usando la pseudo-clase "desplazamiento".

&__icon {
    position: relative;
    margin-left: 2rem;
    &,
    &::before,
    &::after {
      width: 4rem;
      height: 3px;
      background-color: $color-black;
      display: inline-block;
    }
    &::before,
    &::after {
      content: '';
      position: absolute;
      left: 0;
      transition: all 0.2s;
    }
    &::before {
      top: -0.65rem;
    }
    &::after {
      top: 0.65rem;
    }
  }
  &__button:hover &__icon::before {
    top: -1rem;
  }
  &__button:hover &__icon::after {
    top: 1rem;
  }

En este punto, nuestro ícono de menú de hamburguesas debería aparecer en la pantalla como en la imagen a continuación:

Icono de hamburguesa en la barra de navegación

Ahora, al presionar el botón (o marcar), queremos que nuestro icono de hamburguesa se transforme en un icono de cierre " X " para indicar que nuestra barra de navegación está visible ahora, y que si se presiona más, se cerrará nuestra barra de navegación.

Para hacer esto, copie el código dado a continuación, y estaremos listos para usar nuestro ícono.

&__checkbox:checked + &__button &__icon {
  background-color: transparent;
}
&__checkbox:checked + &__button &__icon::before {
  top: 0;
  transform: rotate(135deg);
  background-color: $color-white;
}
&__checkbox:checked + &__button &__icon::after {
  top: 0;
  transform: rotate(-135deg);
  background-color: $color-white;
}
  • En el bloque de código anterior, estamos tomando la ayuda de la pseudoclase "marcada" que está presente en nuestro elemento de casilla de verificación. Junto con eso, también estamos usando el selector CSS "+"
  • El selector CSS “+” nos ayuda a seleccionar el elemento que se coloca inmediatamente después del elemento especificado
  • por último, estamos rotando los pseudoelementos "antes" y "después" de nuestro icono para que parezca una " X "

Seguiremos adelante agregando nuestra superposición de fondo. La lógica detrás de nuestro trasfondo es bastante simple; agregaremos el color de fondo en nuestro botón y, inicialmente, no será visible porque su índice z estaría detrás del botón de la casilla de verificación.

Tan pronto como hagamos clic en la casilla de verificación, escalaremos nuestro fondo para cubrir toda la pantalla y nuestros elementos de navegación se volverán visibles.

Copie el siguiente código para lograr esto.

&__background {
  background: radial-gradient(
    rgba($color-blue, 1),
    rgba($color-purple, 1)
  );
  height: 6rem;
  width: 6rem;
  position: fixed;
  top: -1rem;
  right: 0rem;
  z-index: -1000;
  display: none;
  border-radius: 50rem;
  }

  &__checkbox:checked ~ &__background {
  @include respond(s-hundred) {
    display: block;
    transform: scale(80);
  }
}

Después de aplicar la superposición de fondo, la barra de navegación debería verse así:

Barra de navegación con fondo azul oscuro

Lo último que queda es diseñar nuestros elementos de navegación. Por contexto, los elementos de navegación solo deberían aparecer cuando hacemos clic en el icono de la hamburguesa.

Cubrirá toda la pantalla para ofrecer una experiencia de usuario positiva en pantallas más pequeñas.

Por último, debería desaparecer una vez que volvamos a hacer clic en el icono. Se ha incluido cierta lógica básica de estilo en este bloque de código, que es muy similar a lo que hemos hecho en el resto del tutorial.

&__nav {
    position: fixed;
    margin-top: 1rem;
    padding: 1.2rem;
    font-size: 1.5rem;
    font-weight: 400;
    z-index: 1500;
    @include respond(phone){
      padding: 0;
    }
  }

  &__list {
    list-style: none;
    opacity: 0;
    visibility: hidden;
    margin-top: 50%;
  }

  &__item {
    &:not(:last-child) {
      margin-bottom: 1.5rem;
    }
  }

  &__link {
    text-decoration: none;
    color: $color-white;
    &:hover {
      color: $color-blue;
    }
  }

  &__checkbox:checked ~ &__nav &__list {
    opacity: 1;
    visibility: visible;
    transition: all 0.5s;
  }

  &__checkbox:checked ~ &__nav {
    @include respond(s-hundred) {
      font-size: 4rem;
      position: absolute;
      top: 32rem;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  &__checkbox:checked ~ &__nav &__link {
    @include respond(s-hundred) {
      color: $color-white;
    }
  }

Finalmente, nuestra barra de navegación adhesiva personalizada debería verse así en pantallas más pequeñas:

Barra de navegación en pantalla más pequeñaelementos de la barra de navegación en una pantalla más pequeña

Puede diseñar la barra de navegación o sus elementos como desee. Tengo el símbolo de cierre " X " en el medio, pero generalmente va al lado superior derecho. Por lo tanto, eres libre de hacer el resto del estilo como mejor te parezca.

Finalmente, si desea agregar una pequeña animación en su barra de navegación al desplazarse, puede agregar este pequeño bloque de código CSS dentro de su bloque de estilo de encabezado:

&__sticky {
    padding: 5rem 10rem;
    background-color: $color-gray;
    box-shadow: 0px 3px 5px rgba($color-blue, 0.5);
}

Además, no olvide agregar este código JavaScript:

const navBar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
  navBar.classList.toggle('header__sticky', window.scrollY > 0);
});

Las herramientas y técnicas que CSS nos brinda en este momento son suficientes para crear cosas geniales como nuestra barra de navegación sin usar JavaScript.

Puede encontrar el enlace de CodePen para esta barra de navegación adhesiva personalizada aquí.

Conclusión

Puedes hacer toneladas de cosas solo con CSS. Si ve tutoriales sobre barras de navegación personalizadas o cualquier otra cosa elegante, para lo cual tiene que descargar alguna biblioteca o escribir algún código JavaScript, entonces considere otras alternativas primero, ¡porque JavaScript no es la única forma!

Intente comprender varios conceptos de CSS y tal vez pueda hacer todo eso usando solo CSS.

Fuente: https://blog.logrocket.com/build-custom-sticky-navbar-css/

#css 

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Alayna  Rippin

Alayna Rippin

1603188000

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics

Aisu  Joesph

Aisu Joesph

1618024175

CSS Alignment Made Simple

CSS is seen as an impediment in web development for many of us. Most of the time it looks like even when you follow the rules and everything seems clear, it still doesn’t work the way you want it to.

Therefore, the purpose of this article is to make some features of CSS much easier to understand.

The thing I want to address now is the alignment of the elements.

Without further ado, here are some of the most common scenarios one might encounter when it comes to this topic and how they can be approached.

#css-center #css-position #css-flexbox #css-center-image-in-a-div #css

CSS Animation: translate3d, backdrop-filter, and Custom Tags

In this tutorial, we are going to learn:

  • how to create a smooth animation using the CSS transform translate3d prop.
  • why we’d want to use the cubic-bezier transition timing function and this function’s benefits.
  • how and why we use custom tags.
  • if you watch the video to the end, I also provide a bonus tip on using backdrop-filter to style some frost/blur style on background.

#css #css animation #css / style sheets #css animations #css background