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

and
• 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:

    
  
    
  About Us
    
  Projects
    
  Services
    
  
    
  Project Planning
    
  Quality Control
    
  
    
  Pollit anim 
    
  Duis aute 
    
    
    
  Programming
    
  New Page Link
    
    
    
  Equipment
    
  Virtual Tour
    
  Contacts
    

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

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

  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

• tags. They can also be created by some other tags like
  etc. In any case the page tags should have the assigned ID with the anchor like:

  
    …
    

   

  3. Add New Page

  Copy the existing page starting with the

• and ending with the
tags.

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

With

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:

JS Animated. How to add new page and menu item