Share
La Foundation 4 de Zurb presenta una barra superior brillante que se ha convertido casi en un símbolo de la construcción de un sitio de Foundation. Hoy vamos a ver cómo puede implementarlo de otra manera, ubicándolo en otro lugar de la página, brindándole un menú de navegación horizontal personalizado y receptivo..
En primer lugar, necesitaremos la última Fundación. Descomprima y coloque todos los archivos en su directorio de trabajo o prueba. Solo usaremos index.html, creando nuestro propio style.css en el que anularemos las diferentes clases de la Barra superior para hacer nuestra navegación personalizada..
Además, descargue la imagen de fondo proporcionada anteriormente. Lo usaremos para el menú, así que colóquelo en su carpeta "img". ¿Tener todo? Entonces enciende tu editor favorito y vámonos.!
El archivo de índice en su descarga viene con algún HTML preestablecido. Puede dejar todo lo que encuentre en la etiqueta del encabezado, y puede dejar los enlaces de secuencia de comandos (antes de la etiqueta de cierre) donde están. Necesitamos todo eso para asegurarnos de que Grid y la barra superior funcionen..
Puede borrar el resto del contenido ficticio. Vamos por un diseño de ancho completo aquí, nada demasiado complicado, solo algo para tener una mejor idea de en qué estamos trabajando.
Bien, configuremos el encabezado, la navegación, el contenido y el área del pie de página y pongamos contenido ficticio para rellenar. Le daremos a cada área una clase de "ancho completo", luego en cada área colocaremos un div con a, un div con a y. Esto configura una estructura de rejilla básica..
Nota: Para obtener más información sobre cómo funciona la cuadrícula, eche un vistazo a Foundation for Beginners: The Grid System
Barra superior personalizada de Foundation-4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, asperiores, voluptas, veniam commodi, impedimento tenorur, dolores cumque facere explicabo esse quaerat veritatis laboriosam eius modi amet maxime non officia nemo? Iste, quisquam, voluptatum, dolor nam reiciendis unde aliquam numquam necessitatibus odio et perspiciatis facere nihil inventore ullam aspernatur corporis veritatis quia dolorum? Sed, hic, eos quis quibusdam eum aut optio repudiandae en! Eligendi, neque ratione alias enim quae magnam dolores esse pariatur earum laborum reiciendis nobis sunt sequi sapiente ducimus iure ipsam. Sapiente, minima, rerum, facere quos saepe pariatur magni dolorem cum amet nemo quis laborum ipsa dignissimos ducimus inventore modi rem cumque quibusdam quam asperiores! Optio, nobis suscipit molestias voluptas veritatis aspernatur accusamus excepturi rem quaerat impedit animi voluptate at instalaciones isiquic cum fugit labore omnis provident recusandae autem. Doloribus, mollitia quos officiis quas sapiente nam dolor praesentium maxime cupiditate illum? Rem, esse, nulla vitae adipisci sequi deleniti quasi!
© 2013
Antes de que obtengamos estilo, diseñaremos la estructura HTML esencial para que la barra superior de Foundation funcione correctamente. Necesitamos cinco elementos básicos para que el motor funcione:
Accentsconagua
nav conul conli con = para expandir el menú en diseño móvil sección conul con y ul con Ahora, vamos a configurar estos conceptos básicos e implementar los cinco elementos.
Nota: En este ejemplo de tutorial, querremos crear un menú de navegación personalizado, eliminando así el título (que generalmente contiene el logotipo, en forma de texto o imagen). Para hacer esto, simplemente dejamos el li en la ul con el vacío..
Además, agreguemos algunos elementos del menú y un menú desplegable mientras estamos en ello. Para incluir un menú desplegable, agregue la clase "has-dropdown" al elemento li que desea que contenga el menú desplegable, luego ingrese una nueva ul con una clase de "menú desplegable". Para indicar la página actualmente activa, podemos asignar a nuestro elemento de menú actual una clase de "activo" en el elemento li. Podemos dejar la ul vacía. Normalmente, usaría esta área para agregar un botón o un formulario de entrada de búsqueda. Para obtener más información sobre los detalles del marcado de la barra superior, eche un vistazo a Foundation for Beginners: The Top Bar.
Mire el siguiente HTML, los comentarios explican cómo se construye..
Mira los resultados en tu navegador. Ahora configuramos un marco básico de Foundation utilizando la barra superior para crear un menú horizontal. Para colocarlo en otro lugar que no sea en la parte superior del navegador, simplemente coloque el navegador en una fila y columnas div.
Cuando cambia el tamaño del navegador, puede ver que el menú cambia en el punto de interrupción predefinido.
El siguiente paso es darle a todos un estilo personalizado. Nos centraremos en cómo podemos diseñar el estilo de la barra superior y las clases que se utilizan para eso..
Si aún no lo ha hecho, cree un nuevo archivo CSS, asígnele el nombre style.css y colóquelo en la carpeta css de la descarga de Foundation. No olvide incluirlo en la etiqueta del encabezado en su archivo de índice, haciendo referencia a él debajo de foundation.css así:
Fundación 4
Si no lo coloca debajo de foundation.css, no anulará las clases de la Barra superior..
Bien, primero consigamos un estilo básico en el área de encabezado, navegación, contenido y pie de página. Para el área de navegación, usaremos una imagen de fondo, que habrá descargado previamente. El diseño general no es tan importante, eche un vistazo a la CSS a continuación. Agregamos una clase de ancho completo a cada área para asegurarnos de que llena todo el ancho del navegador.
cuerpo fondo-color: #ccc; / ** Establezca los fondos para las diferentes secciones ** / .header-area background-color: # 2d465c; min-height: 160px; .navigation-area background-image: url ('… /img/navigation-container.jpg'); repetición de fondo: repetir-x; .content-area relleno: 50px 0 70px 0; .footer-area background-color: # 1f1f1f; color: #fff; min-height: 50px; relleno: 20px 0 0 0; .full-width min-width: 100%; posición: relativa; h2 color: #fff; fuente-peso: normal; margen superior: 50px; Si miras los resultados ahora, el menú aún se ve un poco fuera de lugar. Eso es porque todavía utiliza el CSS predeterminado. Vamos a arreglarlo!
Hay un par de clases de CSS que debemos abordar para obtener los resultados deseados. Primero, eliminaremos algo del fondo negro en la clase .top-bar y las listas de secciones y cambiaremos la altura y la altura de la línea a 58px (altura del área de navegación). Echa un vistazo a los comentarios para una explicación más detallada..
/ ** Cambia el color de fondo, la altura y el margen del borde ** / .top-bar background: none; altura: 58px; línea de altura: 58px; margen inferior: 0; / ** Elimina el fondo negro en la barra de menú ** / .top-bar-section ul background: none; transformación de texto: mayúsculas; / ** Elimina el fondo negro en el elemento del menú ** / .top-bar-section li a: not (.button) background: none; línea de altura: 58px; relleno: 0 27px;
Hemos eliminado el fondo negro predeterminado de la navegación, las listas de secciones y los anclajes de menú. Ajustamos la altura, la altura de la línea y el relleno y transformamos el texto en mayúsculas para que todo se ajuste a nuestro diseño personalizado.
Si actualizas tu navegador verás que está empezando a tomar forma. Continuemos con los menús desplegables, elementos de menú, activos y activados. Eche un vistazo a la CSS a continuación y, de nuevo, lea el texto comentado para obtener una explicación:
/ ** Cambia el elemento de menú activo del negro predeterminado a un gradiente ** / .top-bar-section ul li.active> a background: rgb (0, 0, 0); fondo: gradiente lineal (hacia abajo, rgba (0, 0, 0, 0.4) 0%, rgba (0, 0, 0, 0.7) 100%) repita el desplazamiento 0 0 transparente; color: #fff; / ** Cambia el estado de desplazamiento de los elementos de menú no activos ** / .top-bar-section li: hover a background: linear-gradient (al final, rgba (0, 0, 0, 0.4) 0%, rgba (0, 0, 0, 0.7) 100%) repita el desplazamiento 0 0 transparente; color: #fff; / ** Cambia el color del texto de los elementos del menú no activo a negro ** / .top-bar-section ul li> a color: # 2d2d2d; / ** Cambia el estado de desplazamiento de los elementos del menú desplegable ** / .top-bar-section ul.dropdown li a: hover: no (.button) fondo: ninguno repita el desplazamiento 0 0 rgba (0, 0, 0, 0.9); / ** Relleno IMPORTANTE para el contenedor desplegable ul ** / .top-bar-section ul.dropdown background: # 333; color: #fff; / ** Esto corrige la posición y el color de la flecha desplegable ** / .top-bar-section .has-dropdown> a: after border-color: rgba (0, 0, 0, 1) transparente transparente; margen superior: 2.5px;
Hemos hecho varios cambios a nuestro menú aquí. En primer lugar, cambiamos el fondo negro predeterminado del elemento de menú activo a un gradiente de CSS. Luego le dimos a los elementos del menú no activo un estado de desplazamiento similar. Para hacer que los elementos del menú no activo sean más visibles, cambiamos el color del texto a gris oscuro. Los cambios realizados en .li de la barra superior: flotar a mantendrá activado el estado del menú desplegable cuando el mouse se mueva sobre los elementos del menú desplegable. Para completar el CSS le dimos al contenedor desplegable ul un relleno de fondo y reubicamos la posición predeterminada de la flecha desplegable, debido a nuestros ajustes de relleno en la sección de la barra superior.
Actualiza tu navegador y mira los resultados hasta ahora. Todavía no hemos terminado del todo; aún debemos asegurarnos de que todo se vea bien cuando cambiamos el tamaño de la pantalla de nuestros navegadores (o, en realidad, cuando lo vemos en un dispositivo más pequeño). Para que esto suceda, agregaremos algunas consultas de medios a nuestro archivo CSS.
Hay un par de cosas que debemos ajustar para que el menú funcione con nuestro diseño personalizado cuando se reduce el tamaño de la pantalla. Esto implica principalmente agregar algunos rellenos, altura de línea, colores de texto y colores de fondo. Eche un vistazo a la CSS a continuación y mire los comentarios para obtener una explicación de cada sección..
Pantalla solo @media y (ancho máximo: 942 px) / * Hace que el menú sensible se ajuste al contenedor de navegación y cambie su fondo a negro * / .top-bar ul fondo-color: rgba (0, 0, 0, 0.5); parte inferior de relleno: 13px; / * Cambie el color del elemento del menú no activo a negro * / .top-bar-section ul li> a color: #fff; / * Da al menú desplegable un relleno negro * / .top-bar-section ul background: # 000; / * Dé el botón ATRÁS después de ir a un submenú con el relleno apropiado * / .top-bar-section .dropdown li.title h5 a line-height: 57px; / * Esto corrige la posición y el color de la flecha desplegable * / .top-bar-section .has-dropdown> a: after border-color: rgba (255, 255, 255, 1) transparente transparente; margen superior: 2.5px; / * Finalizar consulta de medios * /
Guarde el archivo, actualice su navegador y juegue con el tamaño del navegador. Como podéis ver el menú encaja muy bien en nuestro diseño..
Por lo tanto, se trata de un tutorial sobre cómo podemos crear un menú de respuesta personalizado utilizando la barra superior del marco de Foundation 4. Y recuerda, el menú no tiene que estar en la parte superior de la página. Simplemente envuélvalo en su propia fila y columnas div, entonces prácticamente puede colocarlo en cualquier lugar que desee!
Foundation es una gran herramienta para desarrollar rápidamente diseños receptivos, y cuando usted sabe cómo moverse, puede darle la forma que desee. Que te diviertas!
