HTML5 JS Animated (v.1). How to add new page and menu item

This tutorial will show you how to add new page and menu item in the JS Animated template. As the JS animated template is an HTML based one – all pages could be found in the html files from the “site” folder.  Open the template package and go to the “site” folder.

Anchor based pages

In case you see a single index.html file this may mean that all pages are stored in the single file. Open the index.html file with your HTML editor.

1. Locate the menu

First of all you should find the template main menu. It is usually created as an unordered list using the <ul> and <li> tags. You can use the search tool CTRL+F and search for the menu titles (e.g. Home, About Us etc. )

The menu can be as follows:

  <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>

As you can see each menu item has a link (the <a> tag):

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

and is linked not to the URL or file but to some anchor (page_1)

Use the search tool and search for the anchors (page_1, page_2 etc).

2. Locate the pages

You may find that the pages are created using the <li> tags. They can also be created by some other tags like <div> etc. In any case the page tags should have the assigned ID with the anchor like:

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

3. Add New Page

Copy the existing page starting with the <li id="page_#"> and ending with the </li> tags.

Paste it after any other page blocks. Then change the anchor. For example replace:

<li  id="page_1">

With

<li  id="page_8">

Then you can change the content in the newly created page.

4. Add new menu item

Go back to the menu at the top of the html file. Copy the existing menu item and create the new one. Don’t forget to change the anchor for the newly created menu item. The anchor should be same as the page block ID.

Feel free to check the detailed video tutorial below: