Part 1: Running Time: 02m 21s

 

This video shows you how to add a nested drop down menu. Part 1 concentrates on adding child pages to a main navigation page.

 

NB Click on  in the bottom right of the video to view fullscreen.

 

About this video

This video assumes you are already logged into the Sketchanet editor. If you don't know how to do this, you can find out how here. 

 

Part 1 of this tutorial shows you how to add child pages to a main navigation page.

 

There are two ways to achieve this.  By cloning a page or starting a new page from scratch.

 

Cloning a page

This is the simplest method and useful if you want your child pages to have the same design structure as the parent page.  In the Pages Manager, click on the page you wish to copy.  The option to clone appears.  Hit then and your new clone page will appear at the very bottom of the pages list.  Give it  a name and remember to hit  save.

 

Alternatively, scroll to the bottom of the page list in the manager and hit the blue "Add Page" button.  The option to clone an existing page or start from scratch is offered.  In this case, select an existing page to clone.

 

Starting a page from scratch

Scroll to the bottom of the page list in the manager and hit the blue "Add Page" button. The option to clone an existing page or start from scratch is offered.  In this case, select "From Scratch".

 

Nesting your child pages

Once you have created your child page(s), the next step is to nest them under the parent page you want the dropdown to appear from in the main navigation.  To do this, in the pages manager, click and hold the child page and drag it underneath and to the right of the parent page.  Once it is in position, remember to hit save.

 

Part 2: Running Time: 01m 30s

 

This video shows you how to add a nested drop down menu.  Part 2 Demonstrates the menu settings you require.

NB Click on  in the bottom right of the video to view fullscreen.

 

 

 

About this video

Once you have created your child page click into the menu cell and then click the menu settings tab.  Edit the menu setting and click the 'Style  further sub-levels' button.  In this instance, change the  direction to 'Vertical' and the dropdown setting to 'Floating'.  This means that when you hover over the main tab in the navigation, the dropdown menu will appear below as a vertical list.  Of course, you are free to change the settings to, for example, create a horizontal menu that is always visible.

 

Part 3: Running Time: 01m 40s

 

This video shows you how to add a nested drop down menu.  Part 3 Demonstrates how to style your drop down menu.

NB Click on  in the bottom right of the video to view fullscreen.

 

 

 

 

About this video

After creating your drop down menu you may need to style it.  Click into the menu cell and then click the 'Menu settings' tab.  With the correct menu setting selected, click 'Edit this shared menu setting'.  Click on the 'Level 2' level you created in part 2 of this tutorial.  Then click 'Edit' where a host of options are available such as changing the font, font size and adding padding etc.