Bite sized tutorials

Daily tutorials

1. Editing Text

2. Borders and Images

3. Moving and Resizing

4. Applying Mouseovers

5. Adding Flash

6. Templates

7. Backgrounds

8. Global Styles

9. Navigation

10. Forms

Button guide

Day 9 - Navigation Links and Drop downs

Currently the navigation menu in the Pixx website has just two links one for the Home page and one for the Gallery Page. In this tutorial we will show you how to add links to new pages. As the navigation is set in the template, you will need to open the template file for this tutorial.

Step 1 - Copying the existing navigation

As we want to keep the navigation the same, the easiest way to create a new link this example is to copy and paste and existing one. Highlight the Gallery text box and click on the copy icon in the toolbar. Next click the paste button next to it. An exact copy of the gallery text element has been created. Drag this along the navigation bar to the position you want.

Step 2 - Changing the link

We do not want this link going to the gallery page, so we need to edit the text. Highlight the new element and click on the 'T' icon next to the left of it. Click in the text and click on the link button to see the link menu. Change where the link is being directed to by clicking on the browse button next and selecting 'contact us' from the directory. Click 'select link' then click 'apply'. Highlight the text and type in 'Contact Us', click apply again.

Step 3 - Adding a drop down box

Drop down boxes are useful for adding additional navigation links. These will only show when the user moves their mouse over the original one. Highlight the contact us text element and click on the dropdown box icon. The new element that appears will behave in exactly the same way as a standard container, except that it will disappear when this or the contact us element is now selected. To see it again, click on the contact us link, then you will be able to access it. Click in the new element and create a new text element. Type some text into this element. Now click save. View the live page to see the drop down effect in action.

Summary

In this tutorial you learned how navigation bars are constructed within Webmanager, you also added a drop down effect to the navigation menu to expand it.

This Tutorial is Day 9 in a Series of 10 Tutorials designed to teach you the features of Webmanager. You can progress through these tutorials at your own pace. If you would like to advance to day 10 tutorial click here to progress.
http://www.webwam.co.uk/support/daily/forms
If you would like to learn more about working with navigation. Visit our bitesize Tutorials:
http://www.webwam.co.uk/support/bitesized/index