Site navigation
When the site is generated each page will contain a main menu, sub menu and crumb trail (unless the sub menu and/or crumb trail are disabled in the site.conf).
The generated menus can be tweaked using CSS and/or Javascript and allow for some of standard navigational layouts. All examples below refer to the following directory structure.
A directory must always contain a file called default.
All items, except the default files, can be prefixed with 3 digits and an underscore, e.g. 010_ to specify order in menus. All menu items are sorted alphabetically, so the 3 digit prefix and underscore allows items to be sorted as the user wants.
Example site(directory) structure
| Level 1 | Level 2 | Level 3 | Level 4 |
|---|---|---|---|
| Directory 1 | |||
| default | |||
| Directory 2 | |||
| default | |||
| File 2.1 | |||
| File 2.2 | |||
| Directory 3 | |||
| default | |||
| Directory 3.1 | |||
| default | |||
| File 3.1.1 | |||
| Directory 3.1.2 | |||
| default | |||
| File 3.1.2.1 | |||
| Directory 3.1.3 | |||
| default | |||
| File 3.1.3.1 |
Main menu
The main menu consists of all directories found in level 1 and all items found in level 2. For each page the appropriate section and menu item is indicated by a class attribute.
The main menu that would be generated page File 2.1 in the example above would be as follows.
1 <div id="mainmenu"> 2 <ul> 3 <li class="section"><a href="/directory_1/">Directory 1</a></li> 4 <li class="section_selected"><a href="/directory_2/">Directory 2</a> 5 <ul> 6 <li><a class="item_selected" href="/directory_2/file_2.1">File 2.1</a></li> 7 <li><a href="/directory_2/file_2.2">File 2.2</a></li> 8 </ul> 9 </li> 10 <li class="section"><a href="/directory_3/">Directory 3</a> 11 <ul> 12 <li><a href="/directory_3/directory_3.1/">Directory 3.1</a></li> 13 </ul> 14 </li> 15 </ul> 16 </div>
Notice the href attribute for the Directory links, they assume that the default index file on the web server is called default. See Web server setup http://pagegen.phnd.net/user-manual/web-server-setup for more information.
Please note that class attribute of the <li> tag on line 4 is section_selected whilst for the other items at this level it is section. Similarly on line 6 the class attribute is item_selected. The section_selected class will always be set on the appropriate tag, whilst the item_selected will only be set if the page is in either level 1 or 2 (see example above).
Sub menu
The sub menu lists items from level 1, but only listing the contents of the directories required to display the current item.
The sub menu that would be generated for page File 3.1.2.1 in the example above would be as follows.
1 <ul id="submenu"> 2 <li> 3 <a href="/directory_3/">Directory 3</a> 4 <ul> 5 <li> 6 <a href="/directory_3/directory_3.1/">Directory 3.1</a> 7 <ul> 8 <li> 9 <a href="/directory_3/directory_3.1/file_3.1.1">File 3.1.1</a> 10 </li> 11 <li> 12 <a href="/directory_3/directory_3.1/directory_3.1.2/">Directory 3.1.2</a> 13 <ul> 14 <li> 15 <a class="item_selected" href="/directory_3/directory_3.1/directory_3.1.2/file_3.1.2.1">File 3.1.2.1</a> 16 </li> 17 </ul> 18 </li> 19 <li> 20 <a href="/directory_3/directory_3.1/directory_3.1.3/">Directory 3.1.3</a> 21 </li> 22 </ul> 23 </li> 24 </ul> 25 </li> 26 </ul>
Please note that on line 15 the <a> tag class attribute is item_selected and that Directory 3.1.3 has not been expanded.
Crumb trail
The crumb trail lists the "directory path" to the current item. The crumb trail to File 2.2 would be as follows.
1 <div id="crumbtrail"> 2 <a href="/">Home</a> > 3 <a href="/directory_2/">Directory 2</a> > 4 <a href="/directory_2/file_2.2">File 2.2</a> 5 </div>
