Barra de navegación fija con Foundation

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

Contenido del curso

¡Hemos renovado este curso!

1
¿Dónde aprender frontend actualizado?
00:17 min

Bienvenido al curso

Foundation

Bootstrap

Conclusiones

Contenido complementario

Tomar examen

Comentarios

David Camacho

student•

Para esta clase queremos que la barra de navegacion nos siga a cualquier parte donde naveguemos, para ello vamos a utilizar Sticky

Para el ejemplo de la clase le vamos a pasar el id que tenia el section (menu-container) a el nav, de manera que el section va a quedar sin id ni atributos, de esta manera al section le vamos a agregar el atributo data-sticky-container.
Dentro del section vamos a agregar un div con class="data-sticky" esto es para que tenga los estilos que requiere foundation para que sea sticky. Y dentro de ese div vamos a pegar todo el nav con id="menu-container".

Ahora solo tenemos que configurar los atributos para el data-sticky...

Para ello le vamos a agregar el atributo data-sticky a el div con clase data-sticky
Tambien debemos agregarle el atributo data-options="marginTop:0;" Esto es cuanto margen va a dejar desde la parte superior.
Otro atributo que vamos a agregar es data-sticky-on="small" Esto es desde que tamaño de la pantalla se va a activar el stikcy.
data-top-anchor="--" este atributo recibe el id de otro elemento al cual se tiene que pegar, en el ejemplo de la clase se debe pegar es al section, por ende le agregamos un id al section y se lo pasamos al data-top-anchor

Ahora debemos darle un ancho del 100% y un z-index mayor al data-sticky, esto lo hacemos en css:

.data-sticky {

	width: 100%;

	z-index: 10; //El z-index es para que funcionen los submenus en caso de que tengamos

Wilfredo Bardales

student•

Estoy siguiendo cada clase y estaria super bueno q pongan los archivos uno tal cual cuando

empiezas el video y otro cuando ya esta todo el codigo terminado

moises mannarino

student•

<section id="st" data-sticky-container>
      <div class="data-sticky" data-sticky data-options="marginTop:0;" data-sticky-on="small" data-top-anchor="st">
          <nav id="menu-container" class="title-bar" data-magellan data-bar-offset="29">
                   <ul class="menu align-spaced show-for-small-only">
                     <li>
                         <a href="#" data-toggle="offCanvas">Menu</a>
                     </li>
                  </ul>
                  <ul class="dropdown menu align-spaced show-for-medium" data-dropdown-menu>
                    <li> <a href="#compraboletos">Tickets</a></li>
                    <li> <a href="#lineup-nav">Lineup</a>
                        <ul id="submenu-container" class="menu">
                            <li><a href="#lineup-nav" data-toggle-dia="panelViernes">Viernes</a></li>
                            <li><a href="#lineup-nav" data-toggle-dia="panelSabado">Sábado</a></li>
                           <li><a href="#lineup-nav" data-toggle-dia="panelDomingo">Domingo</a></li>
                        </ul>
                    </li>
                    <li> <a href="#info-container">Info</a></li>
                    <li> <a href="#suscribete">Suscribete</a></li>
                   </ul>
          </nav>
      </div>
    </section>```

Enrique Alexis Lopez Araujo

student•

No etendi muy bien sacha, por que utilizas el z-index, saludos!

Lester Fibla Saavedra

student•

z-index es para manejar la ubicación de los elementos en el eje z, o sea, como se "apilan" desde la pantalla hacia tu cara, digamos. A menor número más al fondo y a mayor número más "cerca de tu cara".

Entonces, el z-index del menú es para que quede por encima de todos los demás elementos de la página.

Cesar David Ramírez Dimaté

student•

Así es, el z-index lo que hace es ponerle una especie de prioridad a los elementos que se visualizan. Entre más grande sea el número, más prioridad tendrá.

Teofilo Rosales Gama

student•

mi Sticky:

Daniela Michelle Rosales Lopez

student•

Si queremos de nuestro margen sea de 0 no utilizaremos data-options="marginTop:0;"
Encontre esta solución:
data-margin-top=“0”

Elvis Moreira

student•

En la sección que contiene el menú colocar el siguiente atributo data-sticky-container

Abajo de la sección colocar un div con la clase data-sticky agrupando todos los elementos del menú en este div

En ese mismo div va el atributo data-sticky

<div class="data-sticky" data-sticky>

Para activar el funcionamiento de la navegación fija colocamos el atributo data-sticky-on=“small” de la siguiente manera

    <div class="data-sticky" data-sticky data-options="marginTop:0;" dat-sticky-on="small">

Usuario anónimo

user•

alguien sera que me pude ayudar me sale pegado el boleto esta es una imagen

Diego Forero

Team Platzi•

Comparte el código que tienes, es muy difícil ayudarte con solo la imagen no sabemos como esta tu código, puede ser un error de digitación en alguna clase o algo por el estilo.

Usuario anónimo

user•

que pena por no compartir el codigo, este es:

<body>
    
    <!--Social-->

    <section id="social-container">
      <div class="row align-center text-center">
        <div class="small-1 column">
          <a href="#" target="_blank">  
            <i class="fi-social-facebook"></i>
          </a>
        </div>
        <div class="small-1 column">
          <a href="#" target="_blank">  
            <i class="fi-social-twitter"></i>
          </a>
        </div>
        <div class="small-1 column">
          <a href="#" target="_blank">  
            <i class="fi-social-instagram"></i>
          </a>
        </div>
      </div>
    </section>

    <!--/Social-->

    <!--Logo-->

    <section id="logo-container">
      <div class="callout text-center">
        <h1>Platzipalooza</h1>
      </div>
    </section>

    <!--/Logo-->

    <!--Menu-->

    <section id="menu-container">
      <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="#">Sabado</a></li>
          <li><a href="#">Domingo</a></li>
        </ul>
        </li>
        <li><a href="#">Info</a></li>
        <li><a href="#">Suscríbete</a></li>
      </ul>
    </section>   

    <!--/Menu-->

    <!--Tickets-->

    <section id="tickets-action">
      <div class="callout large text-center">
        <a href="#">
          <button class="large hollow button">Comprar Boletos</button>
        </a>
      </div>
    </section>

    <!--/Tickets-->

    <!--Lineup-->

    <section id="lineup-container">
      <h3 class="text-center">Lineup</h3>
      <ul class="tabs text-center" data-tabs id="lineup-tabs">
        <li class="tabs-title is-active">
          <a href="#panelviernes">Viernes</a>
        </li>
        <li class="tabs-title">
          <a href="#panelsabado">Sabado</a>
        </li>
        <li class="tabs-title">
          <a href="#paneldomingo">Domingo</a>
        </li>
      </ul>
      <div class="tabs-content" data-tabs-content="lineup-tabs">
        <div class="tabs-panel is-active" id="panelviernes">

          <div class="row">

            <div class="small-12 medium-6 column" id="img1">
                  <img class="imagen" src="http://www.carolina.cl/static/2017/04/ozuna-web-400x400.png" alt="ozuna">
            </div>
            

            <div class="small-12 medium-6 column" id="img2">
                  <img class="imagen" src="https://s-media-cache-ak0.pinimg.com/originals/41/a4/37/41a4378a7d339de402345966d5686ede.jpg" alt="maluma">
            </div>

             <div class="small-12 medium-6 column" id="img3">
                  <img class="imagen" src="https://sites.google.com/site/nusica2015rg4l/_/rsrc/1433415623704/daddy-yankee/1246473650838_f.jpg?height=400&width=400" alt="daddyYankee">
            </div>

            
             <div class="small-12 medium-6 column" id="img4">
                  <img class="imagen" src="http://www.fuleteo.co/subir/images/anuel2baa2.jpg" alt="Anuel AA">
            </div>

          </div>
        </div>

        <div class="tabs-panel" id="panelsabado">

          <div class="row">
            
            <div class="small-12 medium-6 column" id="img5">
                  <img class="imagen" src="http://artistasmiami.com/wp-content/uploads/2017/05/Janos.jpg" alt="JanioCoronado">
            </div>
            

            <div class="small-12 medium-6 column" id="img6">
                  <img class="imagen" src="https://static.clcecuador.com/_CLCEcuador/images/products/large/7924.jpg" alt="AlexCampo">
            </div>

             <div class="small-12 medium-6 column" id="img7">
                  <img class="imagen" src="http://2.bp.blogspot.com/-Mn8EB88XO2w/VohYPp8rrwI/AAAAAAAAAGE/h-ZwIOk0PPw/s1600/foto_21_1247070631.jpg" alt="DiomedesYJuancho">
            </div>

            
             <div class="small-12 medium-6 column" id="img8">
                  <img class="imagen" src="https://yesfm.tritondigital.com/encicloudmedia/fotos/2011/10/Wilfrido%20Vargas_El%20baile_Portada.jpg?ab5eec07f2afa5daf6978dcbb1c443d25b795be21894a9d485f7289b224b4eb3749dbf763b053dd7344c5553789828398ca11aeee67c57ea93f1e3c3a71218fac06df7f60a17e2d75836a6cc8e4e199a829e3655ae0f4d9115d5e24c964c5badb41b0ce98ffcb7aee958f439b8cf681bec19d73ca963b0fa1958a75f758376d98401d1" alt="Wilfrido">
            </div>

          </div>
        </div>


        <div class="tabs-panel" id="paneldomingo">
          
          <div class="row">
            
            <div class="small-12 medium-6 column" id="img9">
                  <img class="imagen" src="https://i.pinimg.com/736x/6d/d8/40/6dd8402c180b1b1b02d5889c9e30d562--salsa-merengue-music-life.jpg" alt="GilbertoSantaRosa">
            </div>
            

            <div class="small-12 medium-6 column" id="img10">
                  <img class="imagen" src="https://s-media-cache-ak0.pinimg.com/originals/a3/3b/8a/a33b8afc23ecf47d9c5c249248f8a71a.jpg" alt="TitoNieves">
            </div>

             <div class="small-12 medium-6 column" id="img11">
                  <img class="imagen" src="http://1.bp.blogspot.com/-N08o_216YP4/VpkmrE1XoSI/AAAAAAAADQE/EOA-U-t9a0o/s400/LA%2BIDENTIDADb.jpg" alt="OquestaLaIdentidad">
            </div>

            
             <div class="small-12 medium-6 column" id="img12">
                  <img class="imagen" src="https://i1.wp.com/noticaribe.com.mx/wp/wp-content/uploads/2014/07/mi0003276911.jpg" alt="HectorYWillie">
            </div>

          </div>

        </div>

      </div>
    </section>

    <!--/Lineup-->

    <!--Compra de boletos-->

    <section id="tickets-container">
      <h3 class="text-center">Comprar Boletos</h3>
      <div class="row" data-equalizer data-equalize-on="small">
        
        <div class="column small-10 small-offset-1 medium-6 medium-offset-3">

          <ul class="pricing-table">
            <li class="title">Platino</li>
            <li class="price">$120 Dolares</li>
            <li class="description">Acceso Viernes, Sabado y Domingo</li>
            <li>2 bebidas gratis, por los tres dias de concierto</li>
            <li>parqueadero incluido, por los tres dias de concierto</li>
            <li>Participa de un sorteo para acceder al backstage</li>
            <li><a class="button" href="#">Comprar Platino</a></li>
          </ul>
        
        </div>

        <div class="column small-6 medium-4 medium-offset-2">

          <ul class="pricing-table">
            <li class="title">Gold</li>
            <li class="price">$90 Dolares</li>
            <li class="description">Acceso Viernes, Sabado y Domingo</li>
            <li data-equalizer-watch>1 bebidas gratis, por los tres dias de concierto</li>
            <li>-</li>
            <li>-</li>
            <li><a class="button" href="#">Comprar Platino</a></li>
          </ul>

        </div>

        <div class="column small-6 medium-4">

          <ul class="pricing-table">
            <li class="title">Silver</li>
            <li class="price">$65 Dolares</li>
            <li class="description">Acceso Viernes, Sabado y Domingo</li>
            <li data-equalizer-watch>-</li>
            <li>-</li>
            <li>-</li>
            <li><a class="button" href="#">Comprar Platino</a></li>
          </ul>

        </div>

      </div>
    </section>

fernando josé pineda trujillo

student•

si a alguien más como a mí le quedaba un pequeño gap, espaciado, entre el menu-container y tickets-action, se hace lo siguiente:

#scrollSticky{
	height: 38px !important;
}

o ajustar tamaño hasta cuadrar

Boris Saavedra

student•

En la nueva versión de Foundation la nueva clase para el Sticky Menu es:

<div class="sticky">

y no

<div class="data-sticky">

Esto es muy bueno porque ahora la clase “sticky” hereda todos los estilos de la clase padre.

Teofilo Rosales Gama

student•

es verdad y ya deberian actualizar el curso

Cesar David Ramírez Dimaté

student•

Si. Eso estaba revisando. De hecho en .sticky.is-stuck define el z-index y width. Aunque en el momento que estoy viendo este curso estoy con la versión 6.4.2, se puede revisar en el archivo foundation.js

var FOUNDATION_VERSION = '6.4.2';

Platzi Team

student•

En la versión 6.4.3 de foundation no hace falta agregar el estilo .data-sticky{width:100%;}

Cesar David Ramírez Dimaté

student•

De hecho en esta versión se utiliza es la clase sticky, no data-sticky.

Itzel

student•

q raro, sin poner z-index me salió…y siguiendo tus instrucciones :0

Luis Felipe Silgado Cortázar

student•

A mi me funcionó sin añadir ningún estilo, yo me imagino que las nuevas características de foundation corrigieron esos detalles que en principio son fáciles de arreglar, pero que molestan tanto.

Cesar David Ramírez Dimaté

student•

Es por la versión, la 6.4.2 ya tiene optimizado esta parte. Aunque es del width, ya que el z-index es necesario para el lineup, que al pasar el mouse de una vez se despliegue el listado.

<section id="st" data-sticky-container>
      <div class="data-sticky" data-sticky data-options="marginTop:0;" data-sticky-on="small" data-top-anchor="st">
          <nav id="menu-container" class="title-bar" data-magellan data-bar-offset="29">
                   <ul class="menu align-spaced show-for-small-only">
                     <li>
                         <a href="#" data-toggle="offCanvas">Menu</a>
                     </li>
                  </ul>
                  <ul class="dropdown menu align-spaced show-for-medium" data-dropdown-menu>
                    <li> <a href="#compraboletos">Tickets</a></li>
                    <li> <a href="#lineup-nav">Lineup</a>
                        <ul id="submenu-container" class="menu">
                            <li><a href="#lineup-nav" data-toggle-dia="panelViernes">Viernes</a></li>
                            <li><a href="#lineup-nav" data-toggle-dia="panelSabado">Sábado</a></li>
                           <li><a href="#lineup-nav" data-toggle-dia="panelDomingo">Domingo</a></li>
                        </ul>
                    </li>
                    <li> <a href="#info-container">Info</a></li>
                    <li> <a href="#suscribete">Suscribete</a></li>
                   </ul>
          </nav>
      </div>
    </section>```

<body>
    
    <!--Social-->

    <section id="social-container">
      <div class="row align-center text-center">
        <div class="small-1 column">
          <a href="#" target="_blank">  
            <i class="fi-social-facebook"></i>
          </a>
        </div>
        <div class="small-1 column">
          <a href="#" target="_blank">  
            <i class="fi-social-twitter"></i>
          </a>
        </div>
        <div class="small-1 column">
          <a href="#" target="_blank">  
            <i class="fi-social-instagram"></i>
          </a>
        </div>
      </div>
    </section>

    <!--/Social-->

    <!--Logo-->

    <section id="logo-container">
      <div class="callout text-center">
        <h1>Platzipalooza</h1>
      </div>
    </section>

    <!--/Logo-->

    <!--Menu-->

    <section id="menu-container">
      <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="#">Sabado</a></li>
          <li><a href="#">Domingo</a></li>
        </ul>
        </li>
        <li><a href="#">Info</a></li>
        <li><a href="#">Suscríbete</a></li>
      </ul>
    </section>   

    <!--/Menu-->

    <!--Tickets-->

    <section id="tickets-action">
      <div class="callout large text-center">
        <a href="#">
          <button class="large hollow button">Comprar Boletos</button>
        </a>
      </div>
    </section>

    <!--/Tickets-->

    <!--Lineup-->

    <section id="lineup-container">
      <h3 class="text-center">Lineup</h3>
      <ul class="tabs text-center" data-tabs id="lineup-tabs">
        <li class="tabs-title is-active">
          <a href="#panelviernes">Viernes</a>
        </li>
        <li class="tabs-title">
          <a href="#panelsabado">Sabado</a>
        </li>
        <li class="tabs-title">
          <a href="#paneldomingo">Domingo</a>
        </li>
      </ul>
      <div class="tabs-content" data-tabs-content="lineup-tabs">
        <div class="tabs-panel is-active" id="panelviernes">

          <div class="row">

            <div class="small-12 medium-6 column" id="img1">
                  <img class="imagen" src="http://www.carolina.cl/static/2017/04/ozuna-web-400x400.png" alt="ozuna">
            </div>
            

            <div class="small-12 medium-6 column" id="img2">
                  <img class="imagen" src="https://s-media-cache-ak0.pinimg.com/originals/41/a4/37/41a4378a7d339de402345966d5686ede.jpg" alt="maluma">
            </div>

             <div class="small-12 medium-6 column" id="img3">
                  <img class="imagen" src="https://sites.google.com/site/nusica2015rg4l/_/rsrc/1433415623704/daddy-yankee/1246473650838_f.jpg?height=400&width=400" alt="daddyYankee">
            </div>

            
             <div class="small-12 medium-6 column" id="img4">
                  <img class="imagen" src="http://www.fuleteo.co/subir/images/anuel2baa2.jpg" alt="Anuel AA">
            </div>

          </div>
        </div>

        <div class="tabs-panel" id="panelsabado">

          <div class="row">
            
            <div class="small-12 medium-6 column" id="img5">
                  <img class="imagen" src="http://artistasmiami.com/wp-content/uploads/2017/05/Janos.jpg" alt="JanioCoronado">
            </div>
            

            <div class="small-12 medium-6 column" id="img6">
                  <img class="imagen" src="https://static.clcecuador.com/_CLCEcuador/images/products/large/7924.jpg" alt="AlexCampo">
            </div>

             <div class="small-12 medium-6 column" id="img7">
                  <img class="imagen" src="http://2.bp.blogspot.com/-Mn8EB88XO2w/VohYPp8rrwI/AAAAAAAAAGE/h-ZwIOk0PPw/s1600/foto_21_1247070631.jpg" alt="DiomedesYJuancho">
            </div>

            
             <div class="small-12 medium-6 column" id="img8">
                  <img class="imagen" src="https://yesfm.tritondigital.com/encicloudmedia/fotos/2011/10/Wilfrido%20Vargas_El%20baile_Portada.jpg?ab5eec07f2afa5daf6978dcbb1c443d25b795be21894a9d485f7289b224b4eb3749dbf763b053dd7344c5553789828398ca11aeee67c57ea93f1e3c3a71218fac06df7f60a17e2d75836a6cc8e4e199a829e3655ae0f4d9115d5e24c964c5badb41b0ce98ffcb7aee958f439b8cf681bec19d73ca963b0fa1958a75f758376d98401d1" alt="Wilfrido">
            </div>

          </div>
        </div>


        <div class="tabs-panel" id="paneldomingo">
          
          <div class="row">
            
            <div class="small-12 medium-6 column" id="img9">
                  <img class="imagen" src="https://i.pinimg.com/736x/6d/d8/40/6dd8402c180b1b1b02d5889c9e30d562--salsa-merengue-music-life.jpg" alt="GilbertoSantaRosa">
            </div>
            

            <div class="small-12 medium-6 column" id="img10">
                  <img class="imagen" src="https://s-media-cache-ak0.pinimg.com/originals/a3/3b/8a/a33b8afc23ecf47d9c5c249248f8a71a.jpg" alt="TitoNieves">
            </div>

             <div class="small-12 medium-6 column" id="img11">
                  <img class="imagen" src="http://1.bp.blogspot.com/-N08o_216YP4/VpkmrE1XoSI/AAAAAAAADQE/EOA-U-t9a0o/s400/LA%2BIDENTIDADb.jpg" alt="OquestaLaIdentidad">
            </div>

            
             <div class="small-12 medium-6 column" id="img12">
                  <img class="imagen" src="https://i1.wp.com/noticaribe.com.mx/wp/wp-content/uploads/2014/07/mi0003276911.jpg" alt="HectorYWillie">
            </div>

          </div>

        </div>

      </div>
    </section>

    <!--/Lineup-->

    <!--Compra de boletos-->

    <section id="tickets-container">
      <h3 class="text-center">Comprar Boletos</h3>
      <div class="row" data-equalizer data-equalize-on="small">
        
        <div class="column small-10 small-offset-1 medium-6 medium-offset-3">

          <ul class="pricing-table">
            <li class="title">Platino</li>
            <li class="price">$120 Dolares</li>
            <li class="description">Acceso Viernes, Sabado y Domingo</li>
            <li>2 bebidas gratis, por los tres dias de concierto</li>
            <li>parqueadero incluido, por los tres dias de concierto</li>
            <li>Participa de un sorteo para acceder al backstage</li>
            <li><a class="button" href="#">Comprar Platino</a></li>
          </ul>
        
        </div>

        <div class="column small-6 medium-4 medium-offset-2">

          <ul class="pricing-table">
            <li class="title">Gold</li>
            <li class="price">$90 Dolares</li>
            <li class="description">Acceso Viernes, Sabado y Domingo</li>
            <li data-equalizer-watch>1 bebidas gratis, por los tres dias de concierto</li>
            <li>-</li>
            <li>-</li>
            <li><a class="button" href="#">Comprar Platino</a></li>
          </ul>

        </div>

        <div class="column small-6 medium-4">

          <ul class="pricing-table">
            <li class="title">Silver</li>
            <li class="price">$65 Dolares</li>
            <li class="description">Acceso Viernes, Sabado y Domingo</li>
            <li data-equalizer-watch>-</li>
            <li>-</li>
            <li>-</li>
            <li><a class="button" href="#">Comprar Platino</a></li>
          </ul>

        </div>

      </div>
    </section>

Barra de navegación fija con 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