Tutoriales En Linea Tutoriales En Linea
  • Tutoriales
    • Aprendizaje
    • Video Tutorial
    • Manuales
    • Hagalo usted mismo
    • Explorar todo
  • Adobe
    • After Effects
    • Dreamweaver
    • Premiere Pro CC
    • Photoshop
    • Photoshop Mix
    • Lightroom
    • Illustrator
    • Adobe Muse
    • Creative Cloud
  • Android
    • Developer Android
    • Aplicaciones
    • Android Studio
    • Android Wear
    • Desarrolladores
    • SDK Platform-Tools
    • ADB...depuración Bridge
    • Fastboot
    • Root
    • Recovery
  • Apple
    • iPhone y iPad
    • iPhone
    • iPad
    • Mac OS
    • iCloud
    • iTunes
  • Cursos
    • Actívate
    • Autoempleo
    • Idiomas
    • Curso De HTML
    • Curso de C++
    • Javascript
    • jQuery
    • Matematicas
    • Programacion
    • Python
    • Udacity
    • Diseño Web adaptativo
  • Ciberseguridad
    • Malware
    • Ransomware
    • Virus
    • Troyano
    • Dorkbot
    • Filecoders
    • keylogger
    • Spyware
    • Jackware
    • DDoS
    • HackerOne
    • Interpol
  • Criptomonedas
    • Blockchain
    • Mineria de Criptomonedas
    • Bitcoin (BTC)
    • Bitcoin Cash (BCH)
    • DASH (Dash)
    • Dogecoin (Doge)
    • Ethereum (ETH)
    • Litecoin (LTC)
    • Monero (XMR)
    • Ripple (XRP)
    • Zcash (ZEC)
    • Forex
    • Trading
  • Desarrollo Web
    • Sistema de gestion de contenidos
    • AMP
    • Datalife Engine
    • Blogger
    • WordPress
    • Joomla
    • Bootstrap
    • Plantillas
    • @font-face
    • Schema
    • Website
    • Desarrolladores
    • Lenguaje Web
  • Diseño Web
    • Web Responsive
    • Lenguaje Web
    • Datos estructurados
    • HTML
    • CSS3
    • JavaScript
    • Ajax
    • jQuery
    • PHP
  • Entretenimiento
  • Encuestas
    • GlobalTestMarket
    • Centro de opinion
    • Ipsos i-Say
    • Triaba
    • Panel opinea
    • Toluna
    • YouGov
    • ClixSense
    • ySense
    • Panel Cint
    • Beruby
  • Electricidad
  • Electronica
  • Ganar dinero comprando
    • CashbackDeals
    • Cashback
    • Por ir de compras
    • Aklamio
    • Intercambio de tráfico
    • Justificante de pagos
    • Webs estafas
  • Google
    • Google Pay
    • Adsense
    • Gmail
    • Google Apps
    • Google Chrome
    • Google Cloud Platform
    • Google Consumer Surveys
    • Google Desarrolladores
    • Google Fit
    • Google Maps
    • Google Photos
    • Google Play
    • Google Translation
    • DoubleClick
    • YouTube
    • Chromebooks
  • Marketing
    • SEM
    • SEO
    • Posicionamiento
    • Contenido
    • Publisuites
    • Space Content
    • Coobis
    • Marketing
  • Computadora u ordenador
    • Sistemas operativos
      • Windows
      • Mac OS
      • Android
      • Linux
      • Ubuntu
      • Kali Linux
      • Wifislax
    • hardware
    • Software
    • BIOS
    • Unidad de disco duro
    • Programacion
    • Dispositivos
    • Internet
  • Ofimática
    • Microsoft
    • Suite Ofimatica
    • Access
    • Word
    • Excel
    • Powerpoint
    • Outlook
    • Microsoft Publisher
  • PTC
    • No pierdas tiempo con estas web
  • Redes Sociales
    • Delicious
    • Facebook
    • Instagram
    • linkedin
    • Snapchat
    • TikTok
    • Twitter
    • Pinterest
    • Spotify
    • Vkontakte - VK
    • WhatsApp
  • Smartphone
    • Telefonos
    • Telefonia movil y telecomunicaciones
    • Desbloquear
    • Códigos NCK
    • Liberar
    • Tarjeta SIM
    • Tablet
  • Sitio Web
    • Dominios
    • Hosting
    • Servidores
    • Demo DLE
    • Documentación sobre Datalife Engine
    • Modulos DLE
    • Hack
    • Optimizacion
    • Google Adsense
    • Plantillas
  • Tips
    • Cabello
    • Consejos
    • Cremas
    • Cosmético
    • Cuerpo
    • Dieta
    • Exfoliantes
    • Entrenamiento
    • Ejercicio
    • Estilo
    • Fitness
    • Habitos
    • Hidratante
    • Look
    • Maquillaje
    • Moda
    • Piel Radiante
    • Recetas
    • Ropa
    • Rutina
    • Salud
    • Tratamientos
  • Trabajos
    • Atencion al cliente
    • Asistente virtual
    • Transcripcíon
    • Transcripcíones medica
    • Entrada de datos
    • De edicion y correccion
    • Mystery Shopping
    • Micro trabajos
    • Contabilidad
    • Tutoria y aprendizaje
    • Mas ingresos extras
  • Webmasters
    • Git
    • GitHub
    • Criptografia
    • Deep Web
    • Hacker
    • FTP
    • Indexar
    • Newsletter
    • Redes y VPN
    • Herramientas online
  • Windows
    • Skype
    • Windows
    • Windows 11
    • Windows 10
    • Windows 8
    • Windows 7
    • Puerta trasera de Windows
    • Microsoft Edge
Facebook Twitter YouTube Instagram Linkedin
  • Sobre nosotros
  • Últimos artículos
  • Herramientas SEO
  • Ver mas temas
  • Más sitios que te gustarán
Tutoriales En Linea Tutoriales En Linea
  • Secciones
    1. Android
    2. Adobe
    3. Bricolaje
    4. Bachillerato
    5. Cursos
    6. Criptomonedas
    7. Criptografia
    1. Diseño Web
    2. Encuestas
    3. Empleo
    4. Electricidad
    5. Electronica
    6. Forex
    7. Fisica
    1. Google
    2. Hardware
    3. Herramientas Ofimaticas
    4. Herramientas
    5. Internet
    6. Idiomas
    7. IPTV
    1. Lenguajes De Programacion
    2. Libros
    3. Microsoft
    4. Manuales
    5. Matematica
    6. Newsletter
    7. Optimizacion
    1. Redes Sociales
    2. Software
    3. Seguridad
    4. Telefonia
    5. WebSite
    6. Webmasters
    7. Ver todas las categorias
  • Smartphone
    Cómo AirDroid te ayuda a administrar tu teléfono de forma eficiente

    Cómo AirDroid te ayuda a administrar tu teléfono de forma eficiente

    Ya puedes usar WhatsApp en múltiples dispositivos inteligentes al mismo tiempo

    Ya puedes usar WhatsApp en múltiples dispositivos inteligentes al mismo tiempo

    Llega su fin a las aplicaciones preinstaladas para una experiencia de usuario mejorada

    Llega su fin a las aplicaciones preinstaladas para una experiencia de usuario mejorada

    Compartir archivos entre Windows y Android nunca fue tan fácil con Near Share

    Compartir archivos entre Windows y Android nunca fue tan fácil con Near Share

    ¿Cómo afecta la tecnología a nuestra vida social?

    ¿Cómo afecta la tecnología a nuestra vida social?

  • Tecnología
    1. Móviles
    2. Ordenadores
    3. Software
    4. Hardware
    5. Seguridad
    6. Ver todo
    Cómo AirDroid te ayuda a administrar tu teléfono de forma eficiente

    Cómo AirDroid te ayuda a administrar tu teléfono de forma eficiente

    Ya puedes usar WhatsApp en múltiples dispositivos inteligentes al mismo tiempo

    Ya puedes usar WhatsApp en múltiples dispositivos inteligentes al mismo tiempo

    Llega su fin a las aplicaciones preinstaladas para una experiencia de usuario mejorada

    Llega su fin a las aplicaciones preinstaladas para una experiencia de usuario mejorada

    Compartir archivos entre Windows y Android nunca fue tan fácil con Near Share

    Compartir archivos entre Windows y Android nunca fue tan fácil con Near Share

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Historia de los sistemas operativos

    Historia de los sistemas operativos

    Como eliminar las aplicaciones predeterminadas de Windows 10 y 11

    Como eliminar las aplicaciones predeterminadas de Windows 10 y 11

    Intel está paulatinamente descontinuando numerosos procesadores de su 11.ª generación

    Intel está paulatinamente descontinuando numerosos procesadores de su 11.ª generación

    Cómo instalar un servidor web en tu ordenador con XAMPP

    Cómo instalar un servidor web en tu ordenador con XAMPP

    ¿Cómo Hackear Una Cuenta de Gmail de Otra Persona?

    ¿Cómo Hackear Una Cuenta de Gmail de Otra Persona?

    Como activar Windows 10 con KMSAuto

    Como activar Windows 10 con KMSAuto

    Tutorial de administrador de Salesforce: paso a paso

    Tutorial de administrador de Salesforce: paso a paso

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Benefits Of Vertical Dual Monitors For Coding And Programming

    Benefits Of Vertical Dual Monitors For Coding And Programming

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    Aumenta el rendimiento de tu PC con el overclocking

    Aumenta el rendimiento de tu PC con el overclocking

    La ciberseguridad: Vital Para Las Apuestas Online en España

    La ciberseguridad: Vital Para Las Apuestas Online en España

    Microsoft busca aprovechar el increíble talento de las mujeres para ayudar a llenar la brecha de seguridad cibernética

    Microsoft busca aprovechar el increíble talento de las mujeres para ayudar a llenar la brecha de seguridad cibernética

    Cómo rastrear fácilmente la ubicación de sus seres queridos en Android

    Cómo rastrear fácilmente la ubicación de sus seres queridos en Android

    Los visionarios detrás de Tor han revolucionado la navegación en línea con su nuevo navegador basado en VPN

    Los visionarios detrás de Tor han revolucionado la navegación en línea con su nuevo navegador basado en VPN

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    China desarrolla una batería de litio con una densidad récord de almacenamiento de energía

    China desarrolla una batería de litio con una densidad récord de almacenamiento de energía

    El negocio de la salud

    El negocio de la salud

    Intel está paulatinamente descontinuando numerosos procesadores de su 11.ª generación

    Intel está paulatinamente descontinuando numerosos procesadores de su 11.ª generación

  • Estilo de vida
    1. Entrenamiento
    2. Maquillaje
    3. Dieta
    4. Moda
    5. Trucos y tips
    6. Ver todo
    ¿Por qué necesitas un entrenador personal?

    ¿Por qué necesitas un entrenador personal?

    Descubre los beneficios y funciones de la suplementación deportiva

    Descubre los beneficios y funciones de la suplementación deportiva

    Razones por las que los ejercicios HIIT son los más efectivos

    Razones por las que los ejercicios HIIT son los más efectivos

    Alimentos que mejorarán tu desempeño en el gimnasio

    Alimentos que mejorarán tu desempeño en el gimnasio

    Cosas a considerar al comprar mesas de maquillaje al por mayor

    Cosas a considerar al comprar mesas de maquillaje al por mayor

    Consejos efectivos para tratar las ojeras

    Consejos efectivos para tratar las ojeras

    Cuidado de la piel saludable para adolescentes

    Cuidado de la piel saludable para adolescentes

    Hinchado, brillante y quebradizo? Usted podría ser demasiado exfoliante

    Hinchado, brillante y quebradizo? Usted podría ser demasiado exfoliante

    Top 5 por las que estas realmente ansioso por el chocolate

    Top 5 por las que estas realmente ansioso por el chocolate

    Aumento de peso por retención de agua

    Aumento de peso por retención de agua

    Aprende a perder peso de manera eficiente y correcta

    Aprende a perder peso de manera eficiente y correcta

    Maneras de preparar ensaladas con aspecto atractivo

    Maneras de preparar ensaladas con aspecto atractivo

    Cómo llevar un vestido largo todo el año

    Cómo llevar un vestido largo todo el año

    Los mejores consejos de moda femenina para hacerte lucir más elegante

    Los mejores consejos de moda femenina para hacerte lucir más elegante

    Ideas para tu boda del sueño

    Ideas para tu boda del sueño

    Que hacer para que los zapatos de las mujeres sean más cómodos

    Que hacer para que los zapatos de las mujeres sean más cómodos

    Gestión Digital para Autónomos: Aprende a Administrar tu Negocio en Línea Eficazmente

    Gestión Digital para Autónomos: Aprende a Administrar tu Negocio en Línea Eficazmente

    Cómo negociar con los acreedores: consejos prácticos para negociar con los acreedores y reducir sus deudas

    Cómo negociar con los acreedores: consejos prácticos para negociar con los acreedores y reducir sus deudas

    5 Ways to Use Hair Extensions - Custom Hair by Albert Amin

    5 Ways to Use Hair Extensions - Custom Hair by Albert Amin

    Beneficios de las placas solares de autoconsumo

    Beneficios de las placas solares de autoconsumo

    ¡Servicio de limpieza profesional a domicilio!

    ¡Servicio de limpieza profesional a domicilio!

    ¿Qué es el Snus? Una guía para principiantes

    ¿Qué es el Snus? Una guía para principiantes

    Cómo aprovechar el tiempo libre para mejorar tu salud mental y física

    Cómo aprovechar el tiempo libre para mejorar tu salud mental y física

    Cómo aprovechar la tecnología para mejorar tu estilo de vida

    Cómo aprovechar la tecnología para mejorar tu estilo de vida

  • Marketing
    Herramienta de analisis de tus problemas de SEO

    Herramienta de analisis de tus problemas de SEO

    Herramientas SEO para posicionamiento de nuestra web 2023

    Herramientas SEO para posicionamiento de nuestra web 2023

    Herramienta online de generador de datos estructurados

    Herramienta online de generador de datos estructurados

    Reescritor de Articulos - herramienta de paráfrasis

    Reescritor de Articulos - herramienta de paráfrasis

    Analisis de backlinks: Herramienta gratuita de SEO (Backlinks Checker)

    Analisis de backlinks: Herramienta gratuita de SEO (Backlinks Checker)

  • Juegos
    Juegos - HTML5 Canvas

    Juegos - HTML5 Canvas

    Como jugar online y resolver un sudoku

    Como jugar online y resolver un sudoku

    Cómo jugar Ajedrez Online TL

    Cómo jugar Ajedrez Online TL

    Como se juega al ajedrez

    Como se juega al ajedrez

    Tetris en JavaScript – Open source

    Tetris en JavaScript – Open source

  • Herramientas

¡Bienvenido de nuevo!

Inicie sesión o Regístrate ahora

VK

o con Email

¿Has olvidado tu contraseña?
Búsqueda extendida

Escriba arriba y presione Enter para buscar.


Tutoriales En Linea » Diseño Web » Navegación desplegable adaptable con un menú de hamburguesas

Navegación desplegable adaptable con un menú de hamburguesas


Tutoriales En Linea Por Tutoriales En Linea En: Diseño Web, Bootstrap, CSS3, html5, jQuery , WebSite, webmasters, Noticias, Tutorial 0 Julio 17, 2019

4.2К
VISTO
Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp VKontakte Email
Compartir
Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp VKontakte
Navegación desplegable adaptable con un menú de hamburguesasBootstrap tienen barras de navegación fantásticas que puedes usar si eliges basar tu diseño en su marco. Para mis propios proyectos, elegí hacer una barra de navegación desplegable adaptable  con un menú de hamburguesas animado. La navegación se basa en Sass, es adaptable y requiere muy poca jQuery.

Hay mucho que se necesita para construir una barra de navegación como esta, así que repasaré los detalles. Los marcos son excelentes, pero creo que es una gran idea para cada desarrollador crear su propia navegación en algún momento para comprender cómo funciona.

HTML


Empecemos por el menú en sí. Es una lista regular, envuelta en una etiqueta nav.
<nav>
  <div class="nav-mobile">
    <a id="nav-toggle" href="#!"><span></span></a>
  </div>
  <ul class="nav-list">
    <li><a href="#!">Inicio</a></li>
    <li><a href="#!">Sobre nosotros</a></li>
    <li>
      <a href="#!">Servicios</a>
      <ul class="nav-dropdown">
        <li><a href="#!">Diseño web</a></li>
        <li><a href="#!">Desarrollo web</a></li>
        <li><a href="#!">Diseño gráfico</a></li>
      </ul>
    </li>
    <li><a href="#!">Precios</a></li>
    <li><a href="#!">Contactar</a></li>
  </ul>
</nav>
Una lista sin estilo aplicado. Todo en la clase nav-mobile no aparecerá hasta que comencemos a trabajar en la vista de dispositivo pequeño. La configuración de los enlaces #! asegurará que no se realice ninguna acción al hacer clic.

SCSS


Hay muchas enlaces en estas barras de navegación, y podemos evitar la repetición en el código con Sass. Además, las variables mejorarán drásticamente la facilidad de personalización del color y el tamaño.

Primero, se establecerá algunas variables.
$content-width: 1000px;
$breakpoint: 799px;
$nav-height: 70px;
$nav-background: #262626;
$nav-font-color: #ffffff;
$link-hover-color: #2581dc;
$ content-width será el ancho máximo del contenido dentro de la barra de navegación. $ breakpoint determina a qué ancho entrará en vigencia el punto de interrupción de la consulta de medios. Obviamente las variables nombradas se crean para el tamaño y los colores.

El esqueleto de sass
nav {
  ul {
    li {
      a {
        &:hover {
        }
        &:not(:only-child):after {
        }
      } // Dropdown list
      ul li {
        a {
        }
      }
    }
  }
}
Ahora comenzamos a completarlo. Flotaremos todo el navegador hacia la derecha, eliminaremos los puntos de viñeta de la lista y cualquier relleno predeterminado del navegador.
nav {
  float: right;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}
Ahora flotamos los elementos de la lista a la izquierda y diseñamos la etiqueta a. El li se establecerá en positión:relative, que todavía no hace nada, pero se explicará unos pasos más abajo.
li {
  float: left;
  position: relative;
  a {
    display: block;
    padding: 0 20px;
    line-height: $nav-height;
    background: $nav-background;
    color: $nav-font-color;
    text-decoration: none;
  }
}
Establecí la etiqueta a anidada en display:blockcon un poco de relleno, y le di nuestros colores previamente determinados. Esta es una barra de navegación oscura, pero puede revertir fácilmente los colores para una barra de navegación clara.
a {
  &:hover {
    background: $link-hover-color;
    color: $nav-font-color;
  }
  &:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}
El desplazamiento es simple: solo estoy cambiando el color de fondo de toda una etiqueta. A continuación, tenemos algunos CSS3 bastante interesantes.
&:not(:only-child):after
La ruta completa de este código es nav ul li a:not(:only-child):after. Esto significa que el código se aplicará a cualquier etiqueta a de nuestra lista de nav que NO sea un hijo único, también conocido como cualquier menú desplegable. El medio :after significa que viene después de la salida de la etiqueta. Decidí que para especificar cualquier elemento de navegación como un menú desplegable, irá seguido de una flecha Unicode - ▾ (# 9662).
} // Dropdown list
  ul li {
    min-width: 190px;
    a {
      padding: 15px;
      line-height: 20px;
    }
Un poco de estilo se aplica a los ul. Le he dado a li un ancho mínimo para que el ancho del menú desplegable no varíe según el contenido. He cambiado el relleno y la altura de la línea del menú desplegable a, porque el estilo cae en cascada desde el padre.


Posicionamiento


El posicionamiento absoluto y relativo elimina elementos del flujo normal del documento. Learn CSS Layout tiene una explicación muy buena y sencilla de cómo funciona el posicionamiento. La parte importante que debe recordar para este menú desplegable es que un  elemento en position:absolute se colocará en relación con un elemento en position: relative. Puede pensar que el elemento absoluto está anidado dentro del elemento relativo.

Ya configuramos el li a position: relative anterior. Ahora vamos a agregar una nueva clase, absolutamente posicionada. z-index: 1garantiza que el menú desplegable se mostrará encima de cualquier contenido. Y agregué un cuadro de sombra, como es estándar para los menús desplegables.
.nav-dropdown {
  position: absolute;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
Añadir display: none; para que podamos cambiarlo más tarde con jаvascript.

jQuery


Comenzaremos añadiendo jQuery.
;(function($) {
  // Begin jQuery
})(jQuery)
Y dile a la función que se ejecute en el DOM.
;(function($) {
  $(function() {
    // DOM Ready
    // Insert all scripts here
  })
})(jQuery)
Activar el menú desplegable es extremadamente simple. He ideado este método específico, y no lo he visto usado en ningún otro menú desplegable, y parece funcionar bastante bien. Voy a apuntar a cualquiera a en el menú que tenga hijos, y alternar la clase .nav-dropdown.
$('nav ul li > a:not(:only-child)').click(function(e) {
  $(this)
    .siblings('.nav-dropdown')
    .toggle()
})
  • Cuando nav ul li > a:not(:only-child) se hace clic en la ruta CSS...
  • Alternar (cambiar la propiedad display) esa clase específica nav-dropdown.

$(this) especifica que solo se dirige a aquello en lo que se hizo clic, y no a todas las instancias de esa ruta CSS.

Pero para que es eso (e)? Si tiene dos menús desplegables en la navegación y hace clic en ambos, ambos se abren. Queremos evitar ese comportamiento y forzar que solo se abra un desplegable a la vez. Dentro de esa misma función, agregue:
$('.nav-dropdown')
  .not($(this).siblings())
  .hide()
e.stopPropagation()
Esto oculta todos los menús desplegables e stopPropagation(); impide que se lleve a cabo esa acción. Lo adjuntamos e y lo colocamos e en la función.

Hay una cosa más: quiero que el menú desplegable se oculte si hago clic fuera de él en cualquier momento. Lo ocultaremos configurando una función de clic en la etiqueta completa html.
$('html').click(function() {
  $('.nav-dropdown').hide()
})
Aquí está toda la jQuery hasta ahora.
;(function($) {
  $(function() {
    $('nav ul li > a:not(:only-child)').click(function(e) {
      $(this)
        .siblings('.nav-dropdown')
        .toggle()
      $('.nav-dropdown')
        .not($(this).siblings())
        .hide()
      e.stopPropagation()
    })
    $('html').click(function() {
      $('.nav-dropdown').hide()
    })
  })
})(jQuery)

Móvil


Ahora tenemos un menú desplegable totalmente funcional. El siguiente paso es convertirlo en un menú de "hamburguesa" en el colapso móvil. Vamos a crear un cuadrado en la parte superior derecha de la pantalla donde vivirá la hamburguesa.
.nav-mobile {
  //display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: $nav-background;
  height: $nav-height;
  width: $nav-height;
}
Crear una consulta de medios basada en el punto de interrupción móvil.
@media only screen and (max-width: $breakpoint) {
  // Insert all mobile styles here
}
Por ahora, esconderemos ul y trabajaremos en la hamburguesa.
nav {
  ul {
    display: none;
  }
}
Elijah Manor creó un gran ícono de hamburguesa animado CSS, y vamos a usar ese método. Puedes leer su tutorial para aprender más sobre cómo funciona esto. Por mi parte, lo condensé para Sass.

El concepto detrás de cómo funciona es que una clase span en el id #nav-toggle tiene una :before y una :after. El intervalo se muestra como un elemento de nivel de bloque delgado y ancho que parece una línea. El antes y el después suben y bajan la línea, creando tres líneas.

Finalmente, el jQuery entra y agrega una clase .active al intervalo, que gira el :before y :after, creando una X.
#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
  span,
  span:before,
  span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: $nav-font-color;
    position: absolute;
    display: block;
    content: '';
    transition: all 300ms ease-in-out;
  }
  span:before {
    top: -10px;
  }
  span:after {
    bottom: -10px;
  }
  &.active span {
    background-color: transparent;
    &:before,
    &:after {
      top: 0;
    }
    &:before {
      transform: rotate(45deg);
    }
    &:after {
      transform: rotate(-45deg);
    }
  }
}
Alternar el lapso .active.
$('#nav-toggle').on('click', function() {
  this.classList.toggle('active')
})
La adición final a nuestro código jQuery activará el clic nav ulal hacer clic.
$('#nav-toggle').click(function() {
  $('nav ul').toggle()
})
¡Perfecto! La hamburguesa alterna el menú. Nuestra funcionalidad jQuery está completa.

La barra de navegación


Vuelva a su HTML desde el principio del tutorial. Envuelva todo nav en este código.
<section class="navigation">
  <div class="nav-container">
    <div class="brand">
      <a href="#!">Logo</a>
    </div>
    <!-- <nav></nav> -->
  </div>
</section>
Hay tres capas en este código:

.navigation- La envoltura exterior para la barra de navegación. Especifica la altura y el color, y estirará el ancho completo de la ventana gráfica.
.navigation {
  height: $nav-height;
  background: $nav-background;
}
.nav-container- La envoltura interior para la barra de navegación. Define hasta qué punto el contenido real debe extenderse.
.nav-container {
  max-width: $content-width;
  margin: 0 auto;
}
.brand - dentro .navigation y .nav-container, hay dos columnas - .brand en el lado izquierdo y  nav en el derecho. Lo primero que hice con la lista de navegación fue flotar a la derecha. La mayor parte de esto es solo estilo; La parte importante es el posicionamiento absoluto y el flotador izquierdo.
.brand {
  position: absolute;
  padding-left: 20px;
  float: left;
  line-height: $nav-height;
  text-transform: uppercase;
  font-size: 1.4em;
  a,
  a:visited {
    color: $nav-font-color;
    text-decoration: none;
  }
}
Y ese es el final de este tutorial! Si no quería leer nada de eso, aquí tiene los tres aspectos completos y completamente funcionales: HTML, SCSS y JS. Si no usa Sass y solo quiere el CSS, puede convertirlo muy fácilmente a CSS.

Aqui esta en CSS3


@charset "UTF-8";
.navigation {
  height: 70px;
  background: #262626;
}

.brand {
  position: absolute;
  padding-left: 20px;
  float: left;
  line-height: 70px;
  text-transform: uppercase;
  font-size: 1.4em;
}
.brand a,
.brand a:visited {
  color: #ffffff;
  text-decoration: none;
}

.nav-container {
  max-width: 1000px;
  margin: 0 auto;
}

nav {
  float: right;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  float: left;
  position: relative;
}
nav ul li a,
nav ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  background: #262626;
  color: #ffffff;
  text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
  background: #2581DC;
  color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: " ▾";
}
nav ul li ul li {
  min-width: 190px;
}
nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}

.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile navigation */
.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: #262626;
  height: 70px;
  width: 70px;
}

@media only screen and (max-width: 798px) {
  .nav-mobile {
    display: block;
  }

  nav {
    width: 100%;
    padding: 70px 0 15px;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
  }
  nav ul li ul li a {
    padding-left: 30px;
  }

  .nav-dropdown {
    position: static;
  }
}
@media screen and (min-width: 799px) {
  .nav-list {
    display: block !important;
  }
}
#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #ffffff;
  position: absolute;
  display: block;
  content: "";
  transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

article {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px;
}
Ver demostración
Síguenos en Síguenos en Google News
  • 100
  • 1
  • 2
  • 3
  • 4
  • 5
Articulo anterior Error en los resultados enriquecidos de la lista de ítems de tu listItem
Articulo siguiente 5 apps que todo novato en el deporte debe descargar
Tutoriales En Linea
Tutoriales En Linea
  • Website
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Instagram

Sobre mi: CEO de Tutoriales En Linea:
https://tutorialesenlinea.es
Fundador y CEO de Tutoriales En Linea...Leer mas...

Artículos Relacionados


Viewport, una etiqueta imprescindible para el diseño adaptativo

Viewport, una etiqueta imprescindible para el diseño adaptativo

Como usar aria-label para fines de enlace

Como usar aria-label para fines de enlace

Como crear un icono de hamburguesa animado en CSS

Como crear un icono de hamburguesa animado en CSS


Comentarios



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!

Destacados

Lista de proxies

Lista de proxies

Oct 04 76 148
Lo que más molesta a tus usuarios según Google

Lo que más molesta a tus usuarios según Google

Ene 13 74 527
Como instalar Windows 11 cuando tu hardware no cumple con los requisitos

Como instalar Windows 11 cuando tu hardware no cumple con los requisitos

Oct 10 101 038
Como descargar Windows 11

Como descargar Windows 11

Ago 18 81 548

Lo mas leidos

Herramientas SEO para posicionamiento de nuestra web 2023

Herramientas SEO para posicionamiento de nuestra web 2023

Por administrador 27-09-22
Herramienta online de generador de datos estructurados

Herramienta online de generador de datos estructurados

Por Tutoriales En Linea 11-02-23
Anunciate Aqui

Anunciate Aqui

Por Tutoriales En Linea 15-05-23

Etiquetas

NavegacionTutoriales En LineaDiseñoArticulosDiseñadores WebNoticiasHTMLDiseñadoresCSS3jQueryMenuhamburguesasadaptableVariablesBootstrap





Sobre nosotros

Tutoriales En Linea

¡Bienvenidos a Tutoriales En Línea, el sitio web perfecto para encontrar todas las herramientas necesarias para mejorar tus habilidades de forma gratuita! En Tutoriales En Linea se encuentran tutoriales, cursos online y aprendizaje de calidad, muy útiles para desarrollar tus capacidades... Leer mas...

Tiene una pregunta? Contactar...

Enlaces

  • Sobre nosotros
  • Ultimos tutoriales
  • Publicar tutorial
  • Ver mas temas
  • Ultimos comentarios
  • ¿Preguntas Frecuentes?
  • Derechos de autor
  • Politica de cookies
  • DMCA
  • Nuestro equipo
  • Normas

Herramientas online

  • Buscador de recetas
  • Prueba de diseño web
  • Codificar en binarios, hexadecimales...
  • Cual es mi IP
  • Test de velocidad
  • Editor HTML
  • Test de escritura
  • Test de nutricion
  • Descargar Videos
  • Generador de datos estructurados

Recursos

  • Analisis de tus problemas de SEO
  • Herramientas SEO
  • Generar palabras claves
  • Referencia de CSS3
  • Convertir HTML a XML
  • Acortador de URL
  • Selector de colores
  • Contador de palabras
  • Comprimir imagenes
  • Conversor a URI de datos
  • Suscribirse
Disponible en Google Play - Google Play y el logotipo de Google Play son marcas comerciales de Google LLC.
Facebook Twitter Instagram Pinterest Linkedin Youtube
  • Anunciarse
  • Socios externos
  • Política de privacidad
  • Términos y Condiciones
  • Sobre nosotros
  • Contactar
© Tutoriales En Linea. Reservados todos los derechos, queda prohibida la reproducción parcial o total sin previa autorización.