Dialogs Framework Basic Concepts

Dialogs Templates: Navigation Menus

Updated: 21 Apr 2023

Navigation - v.8

In Dialogs v.8, the old Nav Menus system has been removed in favor of using List Templates for navigation buildings. The List Template method allows for much more flexibility, often needed with complex modern website designs.

Navigation List Template

Create a list template for the 'Pages' list, have it select only 'green' pages in the current page group.

List Header:

<ul>

Item Format:

<li><a href="$row[item_name]">$row[menu_display]</a></li>

List Footer:

</ul>

Table name:

KD_page

Where:

item_active=1 AND show_in_menu=1 AND page_group_item_id=<? $this->db_page_row[page_group_item_id] ?>

Sort:

list_sort

However, this will lump all the pages in one <ul> list. To get a tree effect of nested <ul> lists you must modify the 'Where' and 'Item Format' fields.

Item Format:

$html .= '<li><a href="' . $row[item_name] . '">' . $row[menu_display] . '</a>';
if($row[has_child] == 'Y') {
    $html .= $this->Show_List('list_test_nav_5.',array('view_where'=>"item_active=1 AND show_in_menu=1 AND page_group_item_id=" . $this->db_page_row[page_group_item_id] . " AND position_level=" . ($row[position_level] + 1)));
}
$html .= '</li>';

Where:

item_active=1 AND show_in_menu=1 AND page_group_item_id=<? $this->db_page_row[page_group_item_id] ?> AND position_level=0

For examples of complex navigation built with list templates in v.8, take a look at the following:

list_C_nav_primary - a recursive list template, which calls itself to build sub-nav.
list_KD_nav_sidebar - builds the left side navigation in the admin control panel, and calls the sub-list template list_KD_nav_sidebar_sub.

Navigation Custom Function

Create a function in cust_functions.inc.php Call that function from the page template. This is the most technical but the most flexible. The function will have to have an appropriate SQL SELECT query and return HTML so the page template can echo it.

Navigation - v.7

There are three ways to do a navigation menu in Dialogs. v.7.

Solution #1 Nav Menus

Create a Nav Menu (under 'Design'). Two important variables will be used:

$open_container is set to whatever you put in the field labeled 'Class if open'. You may refer to it in the other fields but it usually only goes in 'Open Container Format' like this:

<ul class="$open_container">

$current_page: is set to whatever you put in the field labeled 'Class if current page'. You may refer to it in the other fields but it usually goes in the Item Format like this:

<li class="$current_page"><a href...

So if you put 'current' in the 'Class if current page' field then the HTML generated will be:

<li class="current"><a href...

for the current page so it may be styled differently.

The 'Name' field used here will be needed in the page template to display the menu like this:

<?php echo show_nav($this,'My_New_Nav_Menu_Name'); ?>

Solution #2 List Template

Create a list template for the 'Pages' list, have it select only 'green' pages in the current page group.

List Header:

<ul>

Item Format:

<li><a href="$row[item_name]">$row[menu_display]</a></li>

List Footer:

</ul>

Table name:

KD_page

Where:

item_active=1 AND show_in_menu=1 AND page_group_item_id=<? $this->db_page_row[page_group_item_id] ?>

Sort:

list_sort

However, this will lump all the pages in one <ul> list. To get a tree effect of nested <ul> lists you must modify the 'Where' and 'Item Format' fields.

Item Format:

$html .= '<li><a href="' . $row[item_name] . '">' . $row[menu_display] . '</a>';
if($row[has_child] == 'Y') {
    $html .= $this->Show_List('list_test_nav_5.',array('view_where'=>"item_active=1 AND show_in_menu=1 AND page_group_item_id=" . $this->db_page_row[page_group_item_id] . " AND position_level=" . ($row[position_level] + 1)));
}
$html .= '</li>';

Where:

item_active=1 AND show_in_menu=1 AND page_group_item_id=<? $this->db_page_row[page_group_item_id] ?> AND position_level=0

Solution #3 Write a function

Next: Page Templates, CSS files, Page and List Automation Scripts (File-based components)

« Back to Dialogs Framework Concepts