¿Cómo hacer un menú responsivo? Ejemplos. Menú responsivo en CSS3
Todos los desarrolladores web saben desde hace mucho tiempo que los sitios web deben ser responsivos, pero no todos saben cómo hacerlo correctamente. En esta lección, aprenderá cómo crear un menú responsivo para un sitio web.
Para mayor claridad, crearemos una sección con una imagen de fondo grande, que consta de un encabezado con un logo y un menú horizontal.
La tarea es clara, dentro de la etiqueta de la sección habrá un encabezado del sitio, dentro del cual habrá un bloque div con un logotipo y una barra de navegación. Se utilizará como contenedor para un menú de listas con viñetas ul con elementos de menú-enlaces a .
- Hogar
- Buscar
- Servicios
- Noticias
- Fotos
- Normas
Como de costumbre, la estructura HTML parece muy simple: código limpio y nada superfluo, es agradable de ver. Sin embargo, si observa el resultado en el navegador, querrá abrir rápidamente el archivo de estilos y comenzar a embellecer las cosas.
Esto es lo que haremos ahora.
Estilo de sección - secciónEn nuestro caso, la sección ocupa la primera pantalla de la computadora y la etiqueta de la sección se llena con una foto de fondo grande, contra la cual se ubicarán todos los demás elementos.
Sección (
fondo: URL (bg.jpg);
}
Debemos asegurarnos de que el fondo, sin alterar las proporciones de la foto, ocupe todo el espacio libre en cualquier dispositivo.
Tamaño del fondo: portada;
altura: 100vh;
Cuando se ve en monitores grandes, si el tamaño de la foto es insuficiente, comenzará a multiplicarse. Desactivemos la repetición en segundo plano.
Repetición de fondo: no repetición;
En móviles, al no centrar el fondo, es posible que se corte.
Posición de fondo: centro centro;
La sección está lista, en ella escribiremos estilos para el encabezado.
Avancemos un poco y veamos en qué bloques constará el encabezado: este es un bloque div con un logotipo y un bloque de navegación de navegación.
¿Cómo poner dos bloques en fila, porque en su forma natural los bloques están uno debajo del otro? El método Flexbox hace frente a esta tarea perfectamente: lo alinea y lo alinea con respecto al contenedor del encabezado de la forma que lo necesitamos.
encabezado (
pantalla: flexible;
justificar contenido: espacio entre;
alinear elementos: centro;
}
La propiedad box-shadow dibuja una sombra inferior debajo del encabezado, separando así visualmente el encabezado del sitio del contenido. Es preferible establecer la altura del encabezado no en píxeles, sino en unidades relativas, por ejemplo en porcentajes, entonces las proporciones de los elementos del sitio se conservarán en cualquier pantalla.
Altura: 18%;
sombra de cuadro: 0 5px 15px rgba(0,0,0,.2);
Vemos el resultado de flexbox y la sombra que aparece debajo.
Ahora el logo está presionado en el borde izquierdo de la ventana del navegador, movámoslo un poco hacia la derecha.
Imagen del logotipo (
margen izquierdo: 2,3 em;
}
El siguiente código hace que el logotipo responda.
Ancho máximo: 100%;
Estilo del menú - ulEliminar marcadores de los elementos del menú.
Ul (
tipo de estilo de lista: ninguno;
}
Convertimos un menú vertical en uno horizontal, alineando todo en el centro, usando el método flexbox. La propiedad de transición garantiza un funcionamiento fluido del efecto de desplazamiento, hablaremos de esto más adelante.
Ul (
pantalla: flexible;
flujo flexible: nowrap;
dirección flexible: fila;
justificar-contenido: centro;
alinear elementos: centro;
transición: .5s;
}
Los elementos del menú li están muy cerca unos de otros y necesitamos trabajar con la fuente y los enlaces.
Establezcamos los márgenes alrededor de los elementos del menú.
Ulli a (
relleno: 10px 20px;
}
Realizaremos el texto en mayúsculas y eliminaremos el subrayado de enlaces.
Transformación de texto: mayúsculas;
decoración de texto: ninguna;
Elegimos una fuente más oscura para contrastar y la ponemos en negrita (odio cuando el color del texto se mezcla con el color de fondo del sitio).
Color: #262625;
peso de fuente: negrita;
Crea un efecto de desplazamiento simple y no te olvides de la transición suave.
Ulli a: flotar (
fondo: #000;
color: #fff;
transición: .5s
}
En la próxima lección, haremos que nuestro menú responda realizando consultas de medios. Ver todo el código en jsfiddle.
No todos los proyectos requieren efectos innecesarios, que pueden cargar significativamente las páginas, especialmente cuando se trata de diseño adaptable, donde el usuario puede ver el sitio en teléfonos inteligentes o tabletas. La mayoría de estos efectos se crean usando JavaScript, por lo que, como ejemplo, decidí mostrar cómo se puede crear uno de los elementos más importantes del sitio, es decir, el menú de navegación, casi sin recurrir a JS, pero principalmente solo usando CSS. Es absolutamente imposible negarse a usar JS porque en dispositivos móviles y computadoras o portátiles normales, muchos eventos son diferentes y, si en una computadora en CSS podemos usar la propiedad de manera segura :flotar, entonces no funcionará en una tableta como nos gustaría. Los más impacientes pueden inmediatamente ( en el ejemplo, cambie el ancho de la ventana del navegador).
Entonces, nos propusimos la siguiente tarea: crear un menú que sea flexible en ancho, cambiando a su versión móvil, donde el menú se desplegará al pasar el cursor o hacer clic en un botón. La estructura HTML es típica para este tipo de elementos, excepto que agregamos un elemento más: un botón para expandir/ocultar el menú en la versión móvil:
≡
CSS no es del todo estándar. Haremos que nuestro menú se comporte como si estuviéramos usando una mesa. Me gustaría enfatizar de inmediato que no todos los navegadores admiten las propiedades que usaremos. Pueden ocurrir problemas con versiones de IE inferiores a la versión 8 ( aunque es hora de dejar de centrarse en ellos) y hay un par de pequeñas dificultades con IE8, pero a continuación escribiré cómo resolverlas.
* ( margen: 0; relleno: 0; ) encabezado ( color de fondo: #C0C0C0; ) #menú ( pantalla: tabla; /* descripción a continuación */ ancho: 100%; colapso del borde: colapso; -webkit-box- tamaño: border-box; /* descripción a continuación */ -moz-box-sizing: border-box; /* descripción a continuación */ box-sizing: border-box /* descripción a continuación */ ) #menu ul ( display: fila de tabla; /* descripción a continuación */ color de fondo: #FFFFFF; estilo de lista: ninguno; #menu ul li ( pantalla: celda de tabla; /* descripción a continuación */ borde: 1px sólido #999999; ) menu ul li a (pantalla: bloque en línea; ancho: 100%; alto: 50px; alto de línea: 50px; tamaño de fuente: 1,2 em; alineación de texto: centro;) #menu ul li a:hover (fondo- color: #990000; color: #FFFFFF; ) #nav_button (pantalla: ninguno; ancho: 50px; alto: 50px; tamaño de fuente: 2,5 em; alineación de texto: centro; color de fondo: #FFFFFF; borde: 1px sólido #949494; cursor: puntero; ) @media screen y (ancho máximo: 600px) ( /* descripción a continuación */ #menu ( display: inline-block; posición: relativa; ancho: auto; ) #menu ul ( display: ninguno;
posición: absoluta;
arriba: 0;
| mostrar: celda de tabla; El elemento se comportará como o tamaño de caja: cuadro de borde; (y con prefijos de proveedor) Al calcular el ancho y alto de un elemento, las propiedades de ancho y alto incluirán los valores de margen ( relleno) y límites ( borde ). Esto es necesario para evitar la aparición de desplazamiento horizontal, porque sin esta propiedad, con un ancho de menú del 100%, también se agregará el grosor del borde, y si lo hay, también se agregará relleno. Escribimos este código en un archivo js separado y lo incluimos en la parte inferior de la página, antes de la etiqueta de cierre. Ahora unas palabras sobre la compatibilidad entre navegadores... Si cuenta con Internet Explorer por debajo de la versión nueve, para que funcione correctamente, debe conectar dos scripts de reparación dentro de la etiqueta: El primero permite a los navegadores más antiguos percibir adecuadamente las etiquetas HTML5, y el segundo permite "consultas de medios", con las que tampoco son amigables. Aunque, por otro lado, estos navegadores no se utilizan en dispositivos móviles y la misma etiqueta se puede sustituir por . Por lo tanto, utilizar estos scripts o no es, por supuesto, una decisión personal, pero los considero redundantes. Ahora el menú está listo para usar en cualquier dispositivo. Muy a menudo, especialmente los principiantes, en busca de la belleza imaginaria del sitio, lo llenan con gráficos innecesarios, scripts que, aunque realizan alguna pequeña acción, a veces pesan más que toda la página. No te vayas a los extremos y piensa en aquellos usuarios que pueden acceder a ti no sólo desde diferentes dispositivos, sino también a través de una conexión a Internet de baja velocidad. ¡Buena suerte! ;) Propongo que se considere una técnica para crear un menú adaptativo simple, muy flexible en la configuración y también bastante efectivo, utilizando marcado semántico puro, para implementar un diseño adaptativo, sin conectar JavaScript. Como resultado, usando CSS, obtendremos un menú que se puede alinear a la izquierda, a la derecha o colocar exactamente en el centro, los elementos activos/actuales se resaltan, un menú que se puede reorganizar rápidamente cuando se cambia el tamaño de la ventana del navegador. en una barra de navegación vertical desplegable que se ve muy bien en las pantallas de varios dispositivos móviles de usuario (tabletas, teléfonos inteligentes, computadoras portátiles y teléfonos móviles).
Miramos el ejemplo y nos aseguramos de que nuestro menú funcione. Este método suele ser muy útil cuando un menú utiliza una gran cantidad de enlaces. Puede agrupar fácilmente todos los botones en un panel atractivo que se abre al pasar el mouse.
En primer lugar, debemos marcar toda la estructura principal de nuestro menú. Estamos creando un elemento de navegación, por lo que es lógico e incluso práctico utilizar un elemento HTML5, una etiqueta con una clase del mismo nombre asignada, para el posterior formateo de estilos CSS, así como para la creación y posicionamiento absoluto de una barra de navegación desplegable. La clase actual apunta al enlace del menú activo/actual, cuya apariencia se creará usando CSS.
Como puede ver, el menú es una simple lista desordenada con una cierta cantidad de enlaces. El número de puntos puede ser diferente, pero aún así no hay necesidad de preocuparse, todo está dentro de límites razonables.
Todo. Hemos resuelto el marcado básico, se han escrito las clases y se han añadido las muletas. Pasemos ahora a definir los estilos de los elementos del menú, dando forma a la apariencia y haciendo que nuestro menú sea verdaderamente adaptable. El conjunto de estilos de menú CSS para pantallas de monitores de escritorio es bastante estándar; no veo el sentido de entrar en detalles. Solo quiero llamar su atención sobre el hecho de que especifiqué display:inline-block en lugar de float:left elemento
/* menú */ .nav ( margen: 20px 0; ) .nav ul ( margen: 0; relleno: 0; ) .nav li ( margen: 0 5px 10px 0; relleno: 0; estilo de lista: ninguno; mostrar: bloque en línea; *display:inline; /* ie7 */ ) .nav a ( padding: 3px 12px; decoración de texto: ninguno; color: #999; altura de línea: 100%; ) .nav a:hover ( color : #000; ) .nav .current a ( fondo: #999; color: #fff; radio del borde: 3px; ) Las secciones .nav a:hover y .nav .current a son responsables de cambiar el color de los enlaces y el fondo de los elementos del menú activos/actuales, respectivamente. No intenté ser demasiado inteligente en este ejemplo, hice todo con un espíritu minimalista, cuando pasas el cursor sobre el enlace, el color cambia, el texto se vuelve negro: #000; , y para los elementos activos agregué background: #999; , reemplazó el color de fuente con color blanco: #fff; y redondeamos un poco los bordes border-radius: 3px; en el botón resultante. Puedes fantasear y experimentar a este respecto a tu gusto. Alinear al centro y a la derechaComo mencioné anteriormente, podemos cambiar la alineación de los elementos de navegación usando la propiedad text-align agregando algunas líneas de código CSS:
/* menú a la derecha */ .nav.right ul ( text-align: right; ) /* menú en el centro */ .nav.center ul ( text-align: center; ) Adaptando el menúComienza la diversión. Nuestro menú en esta etapa tiene un formato de goma (el ancho se determina como un porcentaje) y aún no es adaptable en absoluto. Comience a cambiar el tamaño de la pantalla y verá que el menú está integrado en un caótico revoltijo de botones.
Corregiremos la situación mediante consultas de medios. En el punto de aplicación de consulta de medios en 600 px, configuro el posicionamiento relativo en posición: relativa; para el elemento de navegación para que luego podamos colocar la lista del menú
Cuando pasa el cursor sobre una barra de navegación agrupada, todos los elementos del menú deben mostrarse como una lista desplegable. Para ello definimos una regla.nav ul:hover li con la función código>display: block. Para los elementos activos/actuales agregamos un ícono para resaltarlos del resto. Si necesita mover el menú hacia la derecha o centrarlo, use las propiedades de posicionamiento izquierda y derecha para la lista ul de nuestro menú.
elementos */ ) .nav a ( display : block ; padding : 5px 5px 5px 32px ; text-align : left ; ) .nav .current a ( background : none ; color : #666 ; ) /* al pasar el cursor sobre los elementos del menú * / .nav ul: hover (imagen de fondo: ninguno;) .nav ul: hover li (pantalla: bloque; margen: 0 0 5px;) .nav ul: hover actual (fondo: url (imágenes/icon-check. png ) sin repetición 10px 7px ) /* menú responsivo a la derecha */ .nav .right ul ( izquierda : auto ; derecha : 0 ; ) /* menú responsivo en el centro */ .nav .center ul ( izquierda : 50%;) margen izquierdo: -90px; Naturalmente, todos los sitios tienen sus propias barras de menú, pero si el recurso se crea en un CMS, será mucho más fácil crear un nuevo menú adaptativo. OrejaCrear una funcionalidad responsiva no es un problema tan grave si utiliza herramientas Bootstrap. Aquí ya se incluyen plantillas para crear un menú horizontal. Solo necesita conectarse al recurso del archivo bootstrap.js. Con la ayuda de este marco, el webmaster tiene la oportunidad de crear navegación de cualquier complejidad. Se crea un menú responsivo con Bootstrap usando algún código. Características del método.Este código puede resultar engorroso, pero es comprensible. Vale la pena señalar que el papel principal aquí lo juega la etiqueta. navegación, que es responsable de crear la navegación y su apariencia. Los contenedores también están conectados aquí. contenedor-fluido Y recipiente, que establece el ancho de los puntos. Con su ayuda, puedes forzar que el menú se expanda en pantallas de diferentes resoluciones o dejarlo fijo.
Las clases juegan un papel importante en la creación de funcionalidad adaptativa aquí. colapsar Y colapso de la barra de navegación quienes son los responsables del estilo. El menú en sí se crea escribiendo elementos que se colocan horizontalmente. Si utiliza este código de marco para crear navegación, en pantallas anchas se verá como un banner horizontal. Al principio estará el nombre del recurso y luego los elementos en una secuencia estrictamente especificada. En pantallas estrechas, solo se mostrarán el nombre del sitio y el ícono de hamburguesa que, al hacer clic, mostrará los elementos del menú en una lista vertical. Menú desplegableEl recurso Bootstrap será de gran ayuda para crear un menú desplegable responsivo. Para hacer esto, simplemente reemplace el eslogan |
