the navigation system - webgui€¦the navigation system 2005 webgui users conference . page tree...

The Navigation System2005 WebGUI Users Conference

Page Tree

● Pages are all related to each other

● Hierarchical (parent/child) relationship

● Think of it like a family tree

Level 0

Level 1Level 2Level 2Level 2Level 2

Level 1Level 2

Think Like a Family Tree

Properties of our Family Tree

● Root● Ancestors● Self● Siblings● Descendants● Pedigree

The Root

● The starting point● Everything else

grows from here

Ancestors

●Pages higher than the current page in the tree.

You are here

Self

● The current level we are on is the self.

You are here

Siblings

● Pages at the same level as current URL

You are here

Descendants● Pages lower than

the current level in the page tree.

You are here

Pedigree

●When using a different start page, this option selects Ancestors, Siblings and Descendants of that page.

Navigation Properties

●Title of your navigation

●Menu Title of your navigation

●Url of your navigation: Url must be unique. The URL will be used when calling your navigation from an ^AssetProxy macro. For example:^AssetProxy(flexmenu_1002);

Navigation PropertiesPick where a navigationshould start choosing pages:via a specific URL, relative tothe current URL, or at a page relative to the root page.Based on the Start Point Type,

where the navigation will beginchoosing pages.

If the Start Point Type is set to relative to Current URL, how manylevels above the current URL the navigation should start.

Filters out pages that you do notwant in the navigation. Select allthat should be included.

Navigation DisplayChoose a template to use fordisplaying your navigation.

Should the menu include System Pagessuch as Trash, Clipboard, Page notfound, etc.? Select this option if youwant Admins or Content Managersto see System Pages.

Should the menus include pages whichare marked hidden?

Should the menu include pageswhich the current logged-in user does not have the privilege to view?

Creating a Tab Nav using <UL>

● Create tab-based navigation● Use an un-ordered list● Use style sheets for formatting

Get your page data

Note: Test Using a known working template. “horizontalMenu” template tested above.

Test Nav Config

“horizontalMenu” template tested above.Now we know we've got the right pages.

Build the Template

<tmpl_if displayTitle><h1><tmpl_var title></h1>

</tmpl_if><tmpl_if description>

<p><tmpl_var description></p></tmpl_if><tmpl_if session.var.adminOn>

<tmpl_var controls></tmpl_if>

<ul><tmpl_loop page_loop><li><a <tmpl_if

page.newWindow>target="_blank"</tmpl_if> href="<tmpl_var page.url>"><tmpl_var page.menuTitle></a>

</li></tmpl_loop>

</ul>

More Tab-like<style TYPE="text/css">#navlist{font-family: arial, helvetica;margin: 0;padding: 0 0 20px 10px;border-bottom: 1px solid #000;}

#navlist ul, #navlist li{margin: 0; padding: 0;display: inline;list-style-type: none;}

#navlist a:link, #navlist a:visited{float: left;line-height: 14px;font-weight: bold;margin: 0 10px 4px 10px;text-decoration: none;color: #999;}

#navlist a:hover{border-bottom: 4px solid #000;padding-bottom: 2px;background: transparent;color: #000;}

#navlist a:hover { color: #000; }</style>

<div id="navcontainer"><ul id=”navlist”>

<tmpl_loop page_loop><li><a <tmpl_if page.newWindow>target="_blank"</tmpl_if> href="<tmpl_var

page.url>"><tmpl_var page.menuTitle></a> </li></tmpl_loop>

</ul></div>

More Tab-like

(after saving changes from previous slide)

A Little Extra Magic

#navlist a:link#current, #navlist a:visited#current, #navlist a:hover{border-bottom: 4px solid #000;padding-bottom: 2px;background: transparent;color: #000;}

#navlist a:hover { color: #000; }</style>

<div id="navcontainer"><ul id=”navlist”>

<tmpl_loop page_loop><li><a <tmpl_if page.newWindow>target="_blank"</tmpl_if> <tmpl_if

page.isCurrent>id="current"</tmpl_if> href="<tmpl_var page.url>"><tmpl_var page.menuTitle></a>

</li></tmpl_loop>

</ul></div>

Wallah

(after saving changes from previous slide)

2 Level Vertical Nav Using UL

● Create tab-based navigation 2 levels deep● Use an un-ordered list● Use style sheets for formatting

Nav Config

Note: Test Using a know working template. “verticalMenu” template tested above.

Test Nav Config

Build the Template

<tmpl_if displayTitle><h1><tmpl_var title></h1></tmpl_if><tmpl_if description><p><tmpl_var description></p></tmpl_if><tmpl_if session.var.adminOn><tmpl_var controls></tmpl_if>

<ul><tmpl_loop page_loop><li><a <tmpl_if page.newWindow>target="_blank"</tmpl_if> href="<tmpl_var

page.url>"><tmpl_var page.menuTitle></a></li></tmpl_loop>

</ul>

Add Style<tmpl_if displayTitle><h1><tmpl_var title></h1></tmpl_if><tmpl_if description><p><tmpl_var description></p></tmpl_if><tmpl_if session.var.adminOn><tmpl_var controls></tmpl_if>

<style TYPE="text/css">#navcontainer { margin-left: 30px; }#navcontainer ul{margin: 0;padding: 0;list-style-type: none;font-family: verdana, arial, Helvetica, sans-serif;}#navcontainer li { margin: 0 0 1px 0; }#navcontainer a{display: block;padding: 5px 10px;width: 140px;color: #fff;background-color: #036;text-decoration: none;}#navcontainer a:hover{color: #fff;background-color: #69C;text-decoration: none;}#navcontainer ul .subNav a{display: block;width: 140px;color: #fff;background-color: #369;text-decoration: none;margin: 0;}#navcontainer ul .subNav a:hover{color: #fff;background-color: #69C;text-decoration: none;}</style><div id="navcontainer"><ul id="navlist">

<tmpl_loop page_loop><li><a <tmpl_if page.newWindow>target="_blank"</tmpl_if> href="<tmpl_var page.url>"><tmpl_var

page.menuTitle></a></li></tmpl_loop>

</ul></div>

Check Nav Depth<div id="navcontainer">

<ul id="navlist"><tmpl_loop page_loop>

<tmpl_if page.depthIs3><li>

<a <tmpl_if page.newWindow>target="_blank"</tmpl_if> href="<tmpl_var page.url>"><tmpl_var page.menuTitle></a>

</li><tmpl_else><li class="subNav">

<a <tmpl_if page.newWindow>target="_blank"</tmpl_if> href="<tmpl_var page.url>">&raquo; <tmpl_var page.menuTitle></a>

</li></tmpl_if>

</tmpl_loop></ul>

</div>

Wallah

Resources

● WebGUI Online Help● WebGUI Done Right● http://css.maxdesign.com.au (for many more

list nav examples)

Questions