Too often do designers treat website footers as an afterthought. Footers are a highly functional piece of the user interface. Furthermore, large, rich content footers are the perfect place for a website to provide users with useful information such as contact details, social media links, important site navigation, and legal information. The problem is, that is a lot of information and things can get crowded on smaller devices. To solve this, I like to consolidate this information to improve the usability and maximize screen real estate for mobile and tablet users.
La pantalla vertical, los bienes raíces es una mercancía preciosa.
A continuación encontrará mi enfoque para crear un pie de página receptivo robusto. Desglosaré el HTML, CSS y JQuery que lo hace funcionar, como así como el proceso de pensamiento detrás de cada decisión.
Descargo de responsabilidad: Va a obtener Nerdy.
el enfoque
esto La técnica de pie de página receptiva se basa en la idea de que más La información importante debe ser a la izquierda comenzando con el logotipo y enlaces sociales, contacto y luego navegación del sitio en ese respectivo orden. Tiene dos puntos de descanso principales. Uno en 749px para una vista de tableta y otro a 500px para una vista móvil. Estos son valores arbitrarios y podrían difieren dependiendo de la cantidad de contenido que tiene su pie de página. Al Punto de interrupción de 500 px, notará que las secciones de navegación obtienen consolidado en desplegables colapsados para disminuir su pantalla vertical bienes raíces.
El html
Aquí está la configuración básica de HTML para el pie de página. Obviamente, las secciones podrían ser agregado, eliminado o alargado, pero el concepto principal es que Todo se extiende uniformemente en el mismo avión en los tamaños de escritorio. Nota, los íconos de las redes sociales son SVG que se generan con código.
Vea el bolígrafo Potera receptiva por Alex Caldwell ( @acaldy ) en CodePen ==. || 77
The CSS
Es el CSS que lo controla todo. El contenedor de pie de página obtiene algo estilos básicos, y el Div centrado envuelve todo con un ancho máximo de 1200px. La clase centrada también agrega Flexbox a los divs contenidos, así que que se sientan en el mismo plano con las mismas alturas (me encanta esto Característica básica de FlexBox ).
Consulte el bolígrafo Potera receptiva por Alex Caldwell ( @acaldy || 85 ) on CodePen .
La siguiente parte de CSS (líneas 16-56) estilos y posicionas el logotipo, el contacto y los divs de navegación. Usamos anchos basados en porcentaje aquí para que todo se reduce bien de 1200px a 750px.
en nuestro primer punto de ruptura en 749px (líneas 59-79) , El logotipo y los contenedores de contacto van al ancho: 50% y la navegación El contenedor va ancho: 100%. Esto crea dos filas cuidadosamente apiladas de información. Para lograr esto, también necesitamos agregar Flex-Wrap: Wrap; a El Div. Centrado. Además, agregamos un poco de relleno al contacto y Divs de navegación, así como un ancho máximo del logotipo div para detenerse de ser demasiado grande, porque no me gusta. es donde sucede la magia. Todos los Divs Stack con ancho: 100%. Nosotros Luego prepare el H3 para obtener algunas sugerencias de interacción eliminando el margen, Agregar relleno (mayor área de éxito) y agregar la propiedad CURSOR: Puntero para que cambie a la mano/puntero en el vuelco. Además, también agregamos una flecha hacia abajo con el :: después del selector y algunos CSS
The next breakpoint at 500px (Lines 82-152) is where the magic happens. All of the divs stack with width:100%. We then prep the h3 to get some interaction hints by removing the margin, adding padding (increased hit area), and adding the property cursor:pointer to make it change to the hand/pointer on rollover. Furthermore, we also add a down arrow with the ::after selector and some css (líneas 107-124).
colapsar los enlaces de navegación en cada sección simplemente agregamos un MAX-HEGHT: 0 y un desbordamiento: Oculto al contenedor de Pieker-Links. En Este punto estamos preparados y listos para que haga una función de jQuery simple el resto del trabajo pesado.
la jQuery
cuando Se hace clic en el H3, alternamos la clase activa al portador de pies de página. Esto nos permite cambiar la altura máxima en los enlaces de pie de página a 1000px (o un número mayor que la altura del div). Agregando el activo clase en el contenedor de portavasos de pie de página también nos permite Transforme la flecha hacia abajo 180 grados para un buen efecto (líneas 136-141) .
Vea el bolígrafo Purero receptivo por Alex Caldwell ( @acaldy ) Ojalá esta simple técnica te ayude a construir un pie de página receptivo que funciona igualmente bien en escritorio, tableta y móvil dispositivos. Un aspecto importante del diseño receptivo es prestar atención a bienes inmuebles de pantalla vertical, sin importar dónde esté en el sitio web. No dude en usar este código para cualquier proyecto personal o comercial que te gustaría. CodePen .
And that’s it. Hopefully this simple technique helps you build a responsive footer that works equally well on desktop, tablet, and mobile devices. An important aspect of responsive design is paying attention to vertical screen real estate, no matter where it is on the website. Feel free to use this code for any personal or commercial project that you’d like.