JS Animated. How to create new page and submenu for it

In this tutorial you will learn how to how to create a new menu item and page in JS Animated template(s).

In this particular tutorial we will show you how to create an “unanchored” page.

1. Connect to your server using FTP client or any file manager of your choice.

2. Open index.html file using a text editor.

3. Create/add new menu item. To do it, add the following code:

   	<li>
   	<a href="test.html">test</a>
   	</li>
   	

4. Now we need to create a new page. In our case it is test.html.

5. Add and create new test.html file on your server. Then open it using any text editor.

6. Copy the Header and Footer sections from index.html file into the test.html file.

7. Add the content section to your test.html file.

8. Our new menu item (test) should include a class active on test.html page.

9. Remove the active class from the “home” menu item and place it for the “test” menu item.

10. You should have the following menu item as a result on test.html page:

    	<li class="active">
    	<a href="test.html">test</a>
    	</li>
    	

11. In order to be able to move to another “anchor” page from our “unanchored” page, we need to add index.html value to each menu item.

    For example, change:

    	<li>
    	<a href="#about">About us</a>
    	</li>
    	

    To:

    	<li>
    	<a href="index.html#about">About us</a>
    	</li>
    	

12. We are done with our new test.html page:

    

13. Upload the changes to the server and reload your site to see the changes.

Thank you for reading this video tutorial. Good luck!

Feel free to check the detailed video tutorial below: