Navegación
Hay opciones de navegación para una serie de situaciones, y todo está diseñado para funcionar entre dispositivos.
Nav Bar
Por defecto la barra de navegación superior de Foundation incluye las principales opciones nav, así como menús desplegables que apoyan ciernen ya sea una lista de las anclas o de contenido arbitrario.
<ul class="nav-bar" >
<li class="active"><a href="#" > Nav Item 1</a></li>
<li class="has-flyout" >
<a href="#" > Nav Item 2</a>
<a href="#" class="flyout-toggle"><span> </span></a>
<ul class="flyout" >
<li><a href="#" > Sub Nav 1</a></li>
<li><a href="#" > Sub Nav 2</a></li>
<li><a href="#" > Sub Nav 3</a></li>
</ul>
</li>
...
</ul>
Las listas desplegables
En la barra de navegación se puede utilizar un menú desplegable que sólo contienen una
ul de ancla, que actuará como un desplegable. La entrada individual incluye un enlace principal (que puede llevar a una página de nivel superior) y el elemento de menú desplegable. Tenga en cuenta que para el menú desplegable se exige que el padre tenga .has-flyout .
<li class="has-flyout" >
<a href="#" > Nav Item 2</a>
<a href="#" class="flyout-toggle"><span> </span></a>
<ul class="flyout" >
<li><a href="#" > Sub Nav Item 1</a></li>
<li><a href="#" > Sub Nav Item 2</a></li>
<li><a href="#" > Sub Nav 3</a></li>
<li><a href="#" > Sub Nav 4</a></li>
<li><a href="#" > Sub Nav Item 5</a></li>
</ul>
</li>
Dropdowns arbitrarias de contenido
Usted también puede tener menús desplegables con un tamaño específico que puede contener cualquier tipo de contenido, incluidas las filas y columnas.
<li class="has-flyout">
<a href="#">Nav Item 3</a>
<a href="#" class="flyout-toggle"><span> </span></a>
<div class="flyout [small, large]">
<h5>Regular Dropdown</h5>
<div class="row">
<div class="six columns">
<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
</div>
<div class="six columns">
<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
</div>
</div>
</div>
</li>
Dirección flotante
Menús laterales se fijan a la izquierda por defecto, pero usted puede fijar el derecho en los casos en que puede funcionar fuera de la página o sobre otro tipo de contenido mediante la adición .right al elemento div.flyout.
<li class="has-flyout">
<a href="#">Nav Item 4</a>
<a href="#" class="flyout-toggle"><span> </span></a>
<div class="flyout large right">
<h5>Large Dropdown</h5>
<div class="row">
<div class="four columns">
<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
</div>
<div class="four columns">
<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
</div>
<div class="four columns">
</div>
</div>
</div>
</li>
Vertical Nav
La misma barra de navegación que se ha visto, con la misma estructura, se puede hacer una barra de navegación vertical que todavía apoya el contenido flotante mediante la adición de una clase .vertical, con el elemento. Esto es ideal para la barra lateral de navegación.
Side Nav
Navegación lateral, como verás en la página principal de la Fundación, es útil para cualquiera de las secciones de un sitio o de la página.
<ul class="side-nav" >
<li class="active"><a href="#" > Link 1</a></li>
<li><a href="#" > Link 2</a></li>
<li class="divider"></li>
<li><a href="#" > Link 3</a></li>
<li><a href="#" > Link 4</a></li>
</ul>
Sub Nav
Este subnav sencillo es ideal para moverse entre los diferentes estados de una página. Utilizamos estos con frecuencia para mostrar repeticiones de algo, por lo general por fecha, pero también son útiles para estos filtros como.
<dl class="sub-nav" >
<dt>Filter:</dt>
<dd class="active"><a href="#" > All</a></dd>
<dd><a href="#" > Active</a></dd>
<dd><a href="#" > Pending</a></dd>
<dd><a href="#" > Suspended</a></dd>
</dl>
Paginación
Moverse entre páginas se ha vuelto menos común con la llegada de más páginas y de carga AJAX, pero todavía puede ser útil para largos listados repetitivos o de contenido.
<ul class="pagination" >
<li class="arrow unavailable"><a href="" > «</a></li>
<li class="current"><a href="" > 1</a></li>
<li><a href="" > 2</a></li>
<li><a href="" > 3</a></li>
<li><a href="" > 4</a></li>
<li class="unavailable"><a href="" > …</a></li>
<li><a href="" > 12</a></li>
<li><a href="" > 13</a></li>
<li class="arrow"><a href="" > »</a></li>
</ul>
