Crear un sitio de una página con desplazamiento usando Foundation

Tutorial para crear un sitio web de una página (onepage website) con desplazamiento local (smooth scroll) usando el marco de trabajo Foundation de Zurb.

En ésta ocasión me voy a aventurar a crear un pequeño tutorial para crear un sitio web de una pagina, que ahora están muy de moda, usando como base Foundation.

Foundation es un muy buen marco de trabajo (framework en inglés) para desarrollar sitios de forma rápida y sobretodo que sean ajustables a la pantalla (responsive en inglés).

Es así que empecemos con este tutorial; para comenzar necesitaremos descargar:

Foundation Zurb - http://foundation.zurb.com/
Jquery Smooth Scroll Plugin - https://github.com/kswedberg/jquery-smooth-scroll

HTML

Comenzaré por crear una página sencilla la cual estará formada por una galería de fotos y un mensaje que será la sección de bienvenida del sitio, para esto usaremos el componente javascript que incluye Foundation llamado Orbit. En la sección siguiente a la bienvenida, irá una barra de navegación que servirá para desplazarse y el resto de la pagina serán las secciones propias del sitio web; en términos generales debe quedar algo parecido a lo siguiente:

	<!doctype html>
	<html class="no-js" lang="es">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>One Page Smooth Scroll Foundation</title>
	<link rel="stylesheet" href="css/foundation.css" />
	<script src="js/modernizr.js"></script>
	</head>
	<body>
	<div class="row">
	<div class="large-12>
	<div id="slider">
	<ul class="example-orbit" data-orbit>
	<li>
	<img src="http://placehold.it/1000x400&text=[ img 1 ]" alt="slide 1" />
	<div class="orbit-caption">
	Caption One.
	</div>
	</li>
	<li>
	<img src="http://placehold.it/1000x400&text=[ img 2 ]" alt="slide 2" />
	<div class="orbit-caption">
	Caption Two.
	</div>
	</li>
	<li>
	<img src="http://placehold.it/1000x400&text=[ img 3 ]" alt="slide 3" />
	<div class="orbit-caption">
	Caption Three.
	</div>
	</li>
	</ul>
	</div>
	<div class="large-12 columns panel">
	<h1>Bienvenido a Foundation</h1>

	</div>
	</div>

	</div>

	<div>
	<div class="row" id="nav-menu">
	<nav class="top-bar" data-topbar>
	<ul class="title-area">
	<li class="name">
	<h1><a href="#home">Mi Sitio</a></h1>
	</li>
	<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
	</ul>

	<section class="top-bar-section">
	<!-- Left Nav Section -->
	<ul>
	<li>Empresa</li>
	<li>Servicios</li>
	<li>Productos</li>
	<li>Contacto</li>
	</ul>

	</section>
	</nav>
	</div>
	</div>

	<div class="row">
	<div class="large-12 columns">

	<h2>Empresa</h2>
	</div>
	</div>

	<div class="row">
	<div class="large-12 columns">
	<h2>Servicios</h2>

	</div>
	</div>

	<div class="row">
	<div class="large-12 columns">
	<h2>Productos</h2>
	</div>
	</div>

	<div class="row">
	<div class="large-12 columns">
	<h2>Contacto</h2>
	</div>
	</div>

	<script src="js/jquery.js"></script>
	<script src="js/foundation.min.js"></script>
	<script>
	$(document).foundation();

	</script>
	</body>
	</html>

view raw one-page-ss-f-01.html hosted with ❤ by GitHub

CSS

Para el ejemplo se necesita que las secciones de página tengan una altura mínima y además un poco de espacio entre sección y sección, para esto se necesita agregar en la sección de "head" unas cuantas lineas de estilo que darán un poco de forma a la página web:

 <style type="text/css">
 .page-section {padding-top:20px;min-height:650px;border-top:solid 2px gray}
 .page-section-first {padding-top:60px;}
 .page-divider {min-height:100px;}
        </style>

Ahora se debe aplicar la clase de estilo ".page-section" a las secciones en nuestro código de html:

	<div class="row page-section">
	<div class="large-12 columns">
	<h2>Empresa</h2>
	</div>
	</div>

	<div class="row page-section">
	<div class="large-12 columns">
	<h2>Servicios</h2>
	</div>
	</div>

	<div class="row page-section">
	<div class="large-12 columns">
	<h2>Productos</h2>
	</div>
	</div>

	<div class="row page-section">
	<div class="large-12 columns">
	<h2>Contacto</h2>
	</div>

view raw one-page-ss-f-02.html hosted with ❤ by GitHub

MAGELLAN

Lo siguiente, es configurar el componente de javascript "Magellan" que viene incluido en Foundation. Este componente permite desplazar el contenido de la página y al mismo tiempo se vuelve una barra fija en la parte superior del navegador, es decir es un famoso menú pegajoso (sticky menu en Inglés):

	<div class="magellan" data-magellan-expedition>
	<div class="row" id="nav-menu">
	<nav class="top-bar" data-topbar>
	<ul class="title-area">
	<li class="name">
	<h1><a href="#">Mi Sitio</a></h1>
	</li>
	<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
	</ul>

	<section class="top-bar-section">
	<!-- Left Nav Section -->
	<ul>
	<li data-magellan-arrival="section-1"><a class="magellan-link" href="#section-1">Empresa</a></li>
	<li data-magellan-arrival="section-2"><a class="magellan-link" href="#section-2">Servicios</a></li>
	<li data-magellan-arrival="section-3"><a class="magellan-link" href="#section-3">Productos</a></li>
	<li data-magellan-arrival="section-4"><a class="magellan-link" href="#section-4">Contacto</a>
	</li>
	</ul>

	</section>
	</nav>
	</div>
	</div>

view raw one-page-ss-f-03.html hosted with ❤ by GitHub

Se ha agregando una clase de estilo "magellan-link" a todos los enlaces de el menú de navegación, esta clase se usará con el javascript smooth scroll.

Ya en este punto se deben crear los destinos de los enlaces de el menú de navegación usando de "data-magellan-destination" en los encabezados (en las etiquetas <h2>) de cada seccion:

<h2 id="section-1" class="page-section-first" data-magellan-destination="section-1">Empresa</h2>
.
.
.
<h2 id="section-2" data-magellan-destination="section-2">Servicios</h2>
.
.
.
<h2 id="section-3" data-magellan-destination="section-3">Productos</h2>
.
.
.
<h2 id="section-4" data-magellan-destination="section-4">Contacto</h2>

En el primer encabezado existe una clase extra, que lo único que hace es agregar un poco de margen superior a la primera sección.

SMOOTH SCROLL

El turno de usar el agregado de Jquery: smooth-scroll, el cual permitirá que el efecto de desplazamiento por la página tenga una mejor animación:

<script src="js/jquery.smooth-scroll.min.js"></script>
<script>
$("a.magellan-link").smoothScroll({offset: -60, speed:1000});
</script>

El numero -60 para el valor offset esta basado en el alto de 65 pixeles que tiene la barra de
El código anterior debe ir al final, antes de cerrar la etiqueta de body. Con esto ultimo el sitio web de una pagina con desplazamiento quedará funcionando.

EXTRA

En muchos sitios que usan esta forma de navegación se presenta un botón al inicio de la pagina, por lo cual en la sección de bienvenida se puede agregar un botón de la siguiente forma:

<div class="text-center">
 <ul class="button-group">
   <li data-magellan-arrival="section-1"><a class="magellan-link button" href="#section-1">ir a sitio</a></li>
 </ul>
</div>

Otra modificación es agregar un enlace al inicio de la página mediante el menú de navegación. Primero habrá que poner un ancla al inicio de la misma despues de la etiqueta body:


<a name="home" id="home" data-magellan-destination="home"></a>

Y finalmente se modifica la barra de menu:


<h1><a data-magellan-arrival="home" class="magellan-link" href="#home">Mi Sitio</a></h1>

Listo!

El código fuente puede ser descargado en https://github.com/vgarcias/onepage-ss-foundation
Y un demo puede ser visualizado en http://vgarcias.github.io/onepage-ss-foundation/

Comentarios

Edgardo dijo…

Hola, muy bueno tu proyecto, estoy probando y quisiera aplicarlo con Foundation 5.
Pero necesito compatibilidad con IE8, +10% de mis visitas lo usan. Mi menú de servicios tiene 2 sub -ítems y el de productos 5. Los desplegables, no se ven en IE8, incluso quise usar polyfills y rem-units, mejora totalmente el aspecto, pero el menú sigue sin funcionar.
¿Tendrás alguna solución para hacerlo funcionar?, muchas Gracias.

6:44 p.m.