Menus

 

Prerequisites

(1) Complete the Hello World exercise and have your responsive design web site ready at http://localhost/dbnetrd. 

(2) Complete the Resource Files exercise.

Your developer tools are at: http://localhost/dbnetrd?ac=dev 

Your RD web site's physical folder is at: c:\inetpub\wwwroot\dbnetrd

Your theme file is at c:\inetpub\wwwroot\dbnetrd\res\demo\css\demo.css

(3) Complete the Page Types exercise.

 

Objectives

• Add a menu to the created header page of your "hello" page.
• Add an option to the menu.

 

Open the Header Page

Open the Forms Designer.

Press Alt-W or select Work Folder from the File menu. Check your Work Folder is set to your demo site.

Press Alt-O or select Open from the File Menu.

Double-click the "header" form (created in the Page Types exercise) in the list of Files.

 

Add a Top Menu

The NavBar is designed to hold menu or navigation elements that can be clicked when your body form is running.

Right-click the space on the row after the "Home" option and select NavBar> Add Menu Item.

Set the id of menu item to "h-mymenu".

Add the text that describes the menu - say "My Menu".

Leave the URL blank.

Assign an awesome font class.

The default Append Left will place the new menu after any existing options on the left of the Navbar, in this demo, after the "Home" option. You can also Append Right to place the menu at the right-hand end of the Navbar or Insert to pick where the new menu is to be located.

Click OK to add the menu to the Navbar.

 

Add a Menu Option

Right-click the "My Menu" option and select Menu Item> Add Menu Item.

Set the id of menu item to "h-hello".

Add the text that describes the menu - say "Hello".

Set the URL to your "hello" page - "demo-hello".

Pick an Awesome Font if required.

Click OK to add the menu option.

Repeat the exercise to add a second option "h-world", text "World" and URL for the "demo-world" page.

 

If you leave the URL blank then you may add a button event for your menu options in the Form Data Link. This may use logic to decide which page the option will display.

 

Save and Publish the Header

Press Alt-S to save your header page "header".

Press Alt-L to publish your form.

 

Form Data Link

Note that header and footer pages do not need to be linked in Form Data Link. All body pages must be linked. Header and footer forms that are linked to a body page will run as part of the body form.

Menu options as mentioned above may drive button click events in the Form Data Link.

Logic in the linked form events may hide or display menu options using the published list of Responsive Design Functions.

 

Test Point

In a new Chrome browser TAB navigate to http://localhost/dbnetrd?dbpage=demo-hello

Press CTRL+F5 to refresh the page.  You should see your page with your header and footer pages. Your menu options should move you between your pages.