Three level menu navigation
The images below illustrate how to create three levels of menu navigation in Site Builder.
To create three levels of navigation you have to make sure that:
- the parent directory includes index.php page from the sub directory
- the sub directory includes its own index.php page
- the parent directory's index.php page is included in the top level
- any other regular pages you want to include go in the sub directory
See Create menus & sub menus (regular instance) for more information on creating menus.
On the website we see three left hand menu buttons; Lorem Ipsum 1, Lorem Ipsum 5 and Lorem Ipsum 2.
(Click for larger image)
In Site Builder we see the site structure has a top level section, a second section called Away with a sub section called Middle, and a third section called Give. The top level section contains the site's main index page.
(Click for larger image)
On the website, when we click on the Lorem Ipsum 1 menu button we see a content page with the title Lorem Ipsum 1. This is the entire site's main index page. It has the title Lorem Ipsum 1 and contains the site's calendar. When clicked the menu button is highlighted in claret and the menu text turns claret in color.
(Click for larger image)
In Site Builder, the site's main index page is stored in the top level, as indicated by the red arrow.
(Click for larger image)
Still in Site Builder, we see the sites main index page, it's title, and the actions you can take (view, edit, delete and move).
(Click for larger image)
On the website when we click on the menu button Lorem Ipsum 5 we see a content page with the title Lorem Ipsum 5. When clicked the menu button is highlighted in claret and the menu text turns claret in color.
(Click for larger image)
In Site Builder, we go the section Give to find the Lorem Ipsum 5 content page. Following the URL, we know that Lorem Ipsum 5 is in the section Give based on the URL https://builder.ucs.mun.ca/temp/mmp/give/.
The red arrow indicates that we are in the directory give, section Give.
(Click for larger image)
Note that directory give, section Give has an index page with the title Lorem Ipsum 5.
(Click for larger image)
On the website when we click on the Lorem Ipsum 2 menu button we see the Lorem Ispum 2 content page (it is an index page). When clicked the menu button is highlighted in claret and the menu text turns claret in color.
(Click for larger image)
In Site Builder we navigate to the away directory, Away section (the red arrow indicates your location) to find the Lorem Ipsum 2 index page based on the URL https://builder.ucs.mun.ca/temp/mmp/away/.
(Click for larger image)
On the website, below the Lorem Ipsum 2 menu button we see a menu button called Lorem Ipsum 3. The menu button is grey in color and the text is black.
(Click for larger image)
In Site Builder we navigate to the middle directory, Middle section (the red arrow indicates your location) to find the Lorem Ipsum 3 index page based on the URL https://builder.ucs.mun.ca/temp/mmp/away/middle/.
(Click for larger image)
On the website when we click on the Lorem Ipsum 3 menu button it is highlighted in claret and the menu text turns claret in color. We see a content page with the title Lorem Ipsum 3.
(Click for larger image)
On the website, below the Lorem Ipsum 3 menu button we see a menu button called Lorem Ipsum 4. The menu button is grey in color and the text is black.
(Click for larger image)
When we click on the menu button Lorem Ipsum 4 it is highlighted in claret and the menu text turns claret in color. We see a content page with the title Lorem Ipsum 4.
(Click for larger image)
In Site Builder we we navigate to the middle directory, Middle section (the red arrow indicates your location) to find the Lorem Ipsum 4 content page based on the URL https://builder.ucs.mun.ca/temp/mmp/away/middle/lorem_ipsum_4.php.
(Click for larger image)
In Site Builder we navigate to the menu structre. In the top level (the red arrow indicates your location) we see three index pages, 1) the sites main index page, Lorem Ipsum 1, index.php2) the index page for the section give, Lorem Ipsum 5, give/index.php and 3) the index page for the section away, Lorem Ipsum 2, away/index.php.
(Click for larger image)
In Site Builder when we click on the away directory, Away section we see one index page 1) the index page for the section middle, Lorem Ipsum 3, middle/index.php.
(Click for larger image)
In Site Builder when we click on the middle directory, Middle section we see one content page 1) the content page Lorem Ipsum 4, lorem_ipsum_4.php.
(Click for larger image)
In Site Builder note that the give directory, Give section has no menu items in it.
(Click for larger image)
