Intro

Una vez más jQuery nos facilita enormemente el desarrollo de páginas web. Con este plugin podrás crear una página como la de esta demo, con diseño One Page.

En Endeos te enseñamos cómo:

• - En primer lugar toca plantearse qué secciones quieres en la web

• - A continuación se puede crear la estructura del menú de navegación

• - El siguiente paso será introducir el contenido de cada sección

• - Finalmente, implementaremos la funcionalidad haciendo la llamada al plugin

El menú

Definiremos un menú con la siguiente estructura:

    <ul id='nav'>
       <li>
             <a href='#apartado-a'>Apartado A</a>
       </li>

       <li>
             <a href='#apartado-b'>Apartado B</a>
       </li>

       <li>
             <a href='#apartado-c'>Apartado C</a>
       </li>
    </ul>

Las secciones

Para las secciones definiremos la siguiente estructura:

    <div class='section' id='apartado-a'>
       // Contenido de la sección A
    </div>

    <div class='section' id='apartado-b'>
       // Contenido de la sección B
    </div>

    <div class='section' id='apartado-c'>
       // Contenido de la sección C
    </div>

Es importante que el atributo 'id' de cada sección coincida con el que hemos puesto en los enlaces del menú.

Script

La llamada al plugin la haremos en nuestro fichero de funciones javascript de la siguiente manera:

    $(document).ready(function() {
       $('#nav').onePageNav();
    });

A llamar a la función debemos indicar el identificador que hemos definido en la etiqueta <ul> del menú.

Script avanzado

Si necesitamos personalizar el funcionamiento del plugin, podemos pasarle parámetros a la función:

    $(document).ready(function() {
       $('#nav').onePageNav({
          nombre_parámetro: valor_entero ,
          nombre_parámetro: 'valor_string' ,
          ...
          nombre_parámetro: valor
       });
    });

Todos los parámetros están explicados en el post.