HTML5 JS Animated (v.1). ¿Cómo agregar nueva página y elemento de menú?

Este tutorial le muestra cómo se puede agregar una nueva página y un elemento de menú en plantilla con animación JS. Plantillas con animación JS son plantillas basadas en HTML y por eso se puede encontrar todas las páginas en los ficheros html de la carpeta "site". Abra el paquete de la plantilla y encuentre la carpeta "site".

Páginas basadas en anchor

Si encuentra solamente un fichero index.html, esto puede significar que todas las páginas están guardadas en este fichero. Abra el fichero index.html por medio de su editor de HTML.

1. Encontrar el menú

En primer lugar hay que encontrar el menú principal de la plantilla. Por lo general el menú principal es creado como una lista desordenada con etiquetas <ul> y <li>. Puede utilizar la herramienta de búsqueda CTRL + F y buscar los títulos del menú (por ejemplo, Inicio, Sobre Nosotros, etc).

Puede encontrar un siguiente menú:

  <ul  id="menu">
  <li  id="nav1"><span></span><a  href="#!/page_1">About Us</a></li>
  <li  id="nav2"><span></span><a  href="#!/page_2">Projects</a></li>
  <li  id="nav3"><span></span><a  href="#!/page_3">Services</a>
  <ul  class="ul_1">
  <li><a  href="#!/page_more">Project Planning</a></li>
  <li><a  href="#!/page_more">Quality Control</a>
  <ul  class="ul_2">
  <li><a  href="#!/page_more">Pollit anim </a></li>
  <li><a  href="#!/page_more">Duis aute </a></li>
  </ul>
  </li>
  <li><a  href="#!/page_more">Programming</a></li>
  <li><a  href="#!/page_8">New Page Link</a></li>
  </ul>
  </li>
  <li  id="nav4"><span></span><a  href="#!/page_4">Equipment</a></li>
  <li  id="nav5"><span></span><a  href="#!/page_5">Virtual Tour</a></li>
  <li  id="nav6"><span></span><a  href="#!/page_6">Contacts</a></li>
  </ul>

Como se puede ver cada elemento del menú tiene un enlace (la etiqueta <a>):

a href="#!/page_1">About Us</a>

que no está vinculado a la URL o un fichero, pero a algún anchor (page_1).

Use la herramienta de búsqueda y encuentre anchors (page_1, page_2 etc).

2. Encontrar las páginas

Es posible que las páginas son creadas con las etiquetas <li>. También pueden ser creadas por medio de algunas otras etiquetas, como <div> etc. En cualquier caso, las etiquetas de página deben tener el ID asignado con anchor como:

<li  id="page_1">
  …
  </li>

3. Añadir página nueva

Copie la página actual desde la etiqueta <li id="page_#"> y hasta </li>.

Péguelo debajo de cualquier bloque de otra página. Cambie anchor. Por ejemplo, reemplace:

<li  id="page_1">

con

<li  id="page_8">

Ahora puede cambiar el contenido de la página recién creada.

4. Añadir nuevo elemento de menú

Regrese al menú en la parte superior del fichero html. Copie el elemento de menú existente y cree un elemento nuevo. No se olvíde de cambiar anchor del nuevo elemento de menú. El anchor debe ser el mismo que el ID del bloque de página.

Siéntase libre de revisar el video tutorial: