# j-NavLayout

> Un diseño de navegación simple y totalmente responsivo.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: 3f60a5cbf413ff5851b539b81f0a86561e3fcbd39bc67a98890f2f849bea3b43
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Un diseño de navegación simple y totalmente responsivo.


__Es bueno saberlo__:

- `path {Boolean}` muestra el panel de navegación en los modos de visualización definidos en la opción de configuración `hide`.
- `<section>` debe contener una navegación
- `<main>` debe contener un contenido

__Configuración__:

- `width {Number}` un tamaño de navegación (predeterminado: `250`)
- `hide {String}` oculta la navegación en modos de visualización definidos (predeterminado: `xs,sm`)
- `autoresize {Boolean}` habilita el cambio de tamaño automático (predeterminado: `true`)
- Posición de navegación `position {String}` (predeterminado: `left`)
- `margin {Number}` agrega margen para `height` (predeterminado: `0`)
- `parent {String}` puede contener `parent`, `window` o selector jQuery para el método `closest` (predeterminado: `window`)

Úselo con `<ui-component name="navlayout">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

```html example.html
<style>
	html, body { margin: 0; padding: 0; }
</style>

<ui-component name="navlayout" path="common.menu" config="parent:window;hide:xs" class="invisible">

	<section style="background-color:blue;color:#FFF">
		Navigation
	</section>

	<main style="background-color:red;color:#FFF">
		Main body
	</main>

</ui-component>

<script>

	var common = { menu: false };

	setInterval(function() {
		var path = 'common.menu';
		SET(path, !GET(path));
	}, 3000);

</script>
```