Barra de menú en Foundation

Clase 9 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Resumen

Vamos a crear el menu con Foundation.

Recuerda que siempre puedes consultar la documentación oficial.

Antoni Pierres Portocarrero Bustamante

student•

usar el valor inheritnos ayudará cuando necesitamos que los elementos que se encuentran dentro de un elemento mayor, hereden de este los valores de sus atributos. Ejemplo:

#menu { background-color: #4e5323; }

#sub-menu { background-color: inherit; }

// sub-menu tomará el valor de color del menú mayor.

Genaro Calvillo Escamilla

student•

Cuando hago eso hereda el background-color del body y no del #menu ¿A qué crees que se deba?

Antoni Pierres Portocarrero Bustamante

student•

En mi código me funciona de esta forma:

#menu #sub-menu { background-color: inherit;}

Creo que se debe colocar el selector del padre antes.

Espero te ayude.

oscar enrique ordoñez izquierdo

student•

y si quiero mostrar en mi menu un archivo .png como seria

Sergio Zapata Donado

student•

Los colores del sitio sobre retina display se ven geniales, les recomiendo probar.

Carlos Francisco Betancourt Requena

student•

Los menú en Foundation se crean mediante la etiqueta <ul> con la clase menú; y los enlaces del menú se crean con la etiqueta <a> dentro de <li>.

Clases para modificar los menús:

Clase simple: se utiliza en la etiqueta <ul> del menú principal y sirve para hacer un menú más simple, visualmente lo que cambia es que tiene menos padding.
Clase vertical: se utiliza en la etiqueta <ul> del menú principal y sirve para crear un menú vertical.
Clase active: se utiliza en la etiqueta <li> que se desea afectar, y sirve para seleccionar ese item de menú de manera que se muestre diferente al resto, ya que es el item activo.
Clase menu-text: se utiliza en la etiqueta <li> que se desea afectar, el texto no debe de ser un enlace, sino simple texto.

Es posible agregar iconos a cada elemento del menú, sólo agregando la etiqueta:

<li><a href="#"><span class=“fi-ticket”></span> Tickets</a></li>

Clase icon-top: se utiliza en la etiqueta <ul> del menú principal y sirve para hacer que el icono quede arriba del texto del item de menú.

Sub-menús.

Los sub-menús se crean agregando la estructura completa de la etiqueta <ul class=”menu”> debajo del enlace que se requiere active el sub-menú; además se debe agregar a la etiqueta <ul> del menú principal la clase dropdown y el atributo data-dropdown-menu. Ejemplo:

<ul class="menu dropdown align-spaced" data-dropdown-menu>
        <li><a href="#">Tickets</a></li>
        <li>
          <a href="#">Lineup</a>
          <ul id="submenu-container" class="menu">
            <li><a href="#">Viernes</a></li>
            <li><a href="#">Sábado</a></li>
            <li><a href="#">Domingo</a></li>
          </ul>
        </li>
        <li class="active"><a href="#">Info</a></li>
        <li><a href="#">Suscríbete</a></li>
      </ul>

Ricardo Garrido Cruz

student•

Aportación acerca del uso de Javacript.

Fíjense de haber agregado las librerías que trae foundation en este orden:
1)Jquery
2)what-input
3)foundation
4)app.js //Este ultimo es donde pondrás tu código de Javascript.

Lo comento porque yo las puse en desorden y me quitó tiempo encontrar donde estába mi error.

Saludos a todos.

Juan David lemus Rubiano

student•

veo algo curioso en este framework que los dropdown buttons son mas faciles de hacer que en bootstrap, esta bueno este framework, hay que hacerlo famoso

Teofilo Rosales Gama

student•

las lineas de este video no funcionan como deberian(febrero 2018) foundation se actualizo por ejem align-spaced ya no existe o no se ejecuta ayuda!!!(por favor actualizen el curso).😦

Daniel Alejandro Contreras Suárez

student•

No estaras usando la Float Grid? A mi me esta funcionando perfectamente el “align-spaced” tanto en Flex Grid como en XY Grid.

Cesar David Ramírez Dimaté

student•

Es porque debes bajar el proyecto con Flex Grid.

Gonzalo Vazquez

student•

Que funcion tienen “li” y “a” en el codigo de #menu-container li a {

Diego Forero

Team Platzi•

li -> list item, es un item de una lista
a -> anchor es el enlace a donde va el menu.

Si no tienes claro todas las etiquetas html te recomiendo que tomes el curso de programación básica y desarrollo web online.

Raul Cortes santibañez

student•

Para quienes no tienen la opcion de presionar tab y que les complete el codigo HTML, deben instalar un package de sublime text que se llama “emmet”, creo que Atom lo trae integrado y en Visual Code studio tambien parece que hay que instalarlo.

Cesar David Ramírez Dimaté

student•

También recomiendo usar AutoFileName.

Teofilo Rosales Gama

student•

al parecer la version de este curso es Fundation 6.2.2 la que yo estoy usando es la flex-grid Fundation 6.4.2 , por favor alguna cosas funcionan de este curso pero no todas por favor actualizen el curso(no es malo ni nada de eso y el profe es buen tipo),sino para no perjudicar al los nuevos estudiantes como yo .😃

Cesar David Ramírez Dimaté

student•

Que cosas no te funcionan?

David Daniel Castillo Nava

student•

Creo que lo correcto seria usar clases y no Id ya que los id son únicos dentro del DOM si se coloca eso como id si se crea otro sub menu no podrás usar el mismo nombre como submenu-container.

Yo lo hice así :

#menu-container .submenu {
	background-color: #48a19d;
	border:none;
}

de esta forma si se crea otro sub menu automáticamente tendrá el mismo background deseado.

Cesar David Ramírez Dimaté

student•

Dices que no usar id pero igual lo estás usando jajaja, solo define la clase en el html y luego en el css.

Marco Vinicio González Jiménez

student•

En el submenú porque se le aplicó el background a la etiqueta <a> y no sólo submenu-container" ?

#submenu-container{ background-color: #48a19d; color: white;}

Jonatan Ruben Sosa Caycay

student•

Solo habría que cambiar el color del fondo, recuerda que el color de la fuente fue definido en #menu-container li a{color: #fff}, y como los estilos son en cascada, los elementos del submenu también heredan el color y el tipo de fuente, no habría creo yo la necesidad de re definirlos, ademas si quieres cambiar o definir el color en el submenu, nada cambiaría pruebalo.

Dave Chávarri

student•

Porque no se usa la etiqueta NAV para el menú?

Juan Carlos Ramirez Ustarroz

student•

A nivel de SEO si deberia de estar el nav en vez del section pero lejos de eso no afecta en nada puedes usar incluso un <div>

Iridian Iridian

student•

muy buena clase, gracias

Daniel Alejandro Contreras Suárez

student•

Hay algun problema si se modifica el archivo foundation.css?
Yo si dejé iconos en los menus, pero en el menu principal los deje arriba y en el submenu a la izquierda. El problema es que en foundation la clase icon-top esta declarada despues de icon-left, asi que la sobreescribe. Por lo tanto moví la clase icon-top arriba de la clase icon-left. Habra algun problema con esto?

Diego Forero

Team Platzi•

El único problema es que quieras actualizar la versión de foundation tienes que volver a hacer la modificación en el archivo de la nueva versión.

Barra de menú en Foundation

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman