Implement a single level of navigation

Implement a single level of navigation

+
Search Tips | Advanced Search

The examples in this topic show the tags used to implement a single level of navigation in the portal themes. WebSphere Portal provides a JSP that serves as an example for single level navigation: topNav.jspf. Like this JSP, any JSP you use for navigation should be included in the appropriate position in the parent JSP, typically Default.jsp.
The following example shows the visual navigation elements as they might be rendered in the browser. The currently selected node, Today's News, has a different background color than the other nodes for this navigation level. This gives the user a clear indication of the page that has been selected.

The following steps show how to build a single layer of navigation using the portal JSP tags. You can add new markup or insert existing HTML markup into this structure to complete the navigation.
Create the structured outline for the navigation level.
The following shows the high level JSP tag structure for a navigation level.

The complete navigation structure is contained in the <portal-logic:if/> tag, which ensures that the navigation is available and is rendered for one of the appropriate screens.
The navigation shift section contains the markup for icons used to scroll through the navigation for this level.
The markup for a navigation node is coded once and placed in a loop that renders links for all nodes for the given navigation level.
The <portal-navigation:navigation/> tag in this example specifies that all level 3 nodes for the selected parent (level 2) node are to be rendered.
<%-- Start of navigation level x --%>
<c-rt:if test = "${themePolicy.renderTopNavigation}">
<portal-logic:if navigationAvailable="yes" screen="Home,LoggedIn,LoggedOut,ErrorNotAuthorized">

  
  <portal-navigation:navigation stopLevel="3">                           
     <portal-navigation:navigationLoop>                                  
                                                           
       <%-- selected navigation node markup --%>           
          <%-- show page contextual menu markup --%>       
       <%-- unselected navigation node markup --%>         
                                                           
     </portal-navigation:navigationLoop>                                 
  </portal-navigation:navigation>                                        

</portal-logic:if>
</c-rt:if>
<%-- End of navigation level x --%>
Create the markup for a single navigation link.
You should already have determined how links to navigation nodes should be rendered in the portal. Many portals use repeatable table structures to implement the navigation as tabs. You could also allow the navigation to be rendered as a drop-down box to conserve space. The entire markup must be placed inside of the navigation loop. The link markup is iterated for each node in the navigation level. Conditional logic is used to determine which node is rendered as the selected node.
The following example shows the markup for a single navigation link when the node is not selected by the user.

The <portal-logic:if/> tag evaluates whether the node for the current iteration of the loop is the selected node. The content of this tag is rendered if the node is not selected.
This example uses a list item (</li>) in an unordered list to render the menu. The wpsUnSelectedPage style class is intended for HTML elements that contain the link to the navigation node.
The anchor tag uses the <portal-navigation:navigationURL/> to get the URL for the node and <portal-fmt:title/> to get the locale-specific title of the node. The wpsUnSelectedPageLink style class is intended for the link to the navigation node.
<portal-logic:if nodeInSelectionPath="no">
    <li class="wpsUnSelectedPage">
      <a href="<portal-navigation:navigationUrl type='link' />">
<portal-fmt:title/></a>
    </li>
  </portal-logic:if>
Create the markup for the selected navigation node.
You can provide visual aids to distinguish the selected node from the unselected nodes, indicating to users where they are in the portal structure. Like the unselected node, the entire markup must be placed inside of the navigation loop.
The following example shows the markup for a single navigation link when the node is selected by the user.

The contents of the <portal-logic:if/> tag are rendered if the node is selected.
The wpsSelectedPage style class is used to distinguish the appearance for the selected node.
There is also markup for the page contextual menu that is rendered if the node is selected.
<portal-logic:if nodeInSelectionPath="yes">
    <li class="wpsSelectedPage">
      <a href="<portal-navigation:navigationUrl type='launch' />">
        <portal-fmt:title/>
      </a>
      <c-rt:if test = "${themePolicy.renderContextMenus}">
      <% boolean isNodeSelected = wpsSelectionModel.isNodeSelected(wpsNavNode); 
    if(isNodeSelected){%>    
      <a class="menuLink" href="javascript:void(0);" onclick="javascript:showMenu_<%=pageOidStr%>(); return false;" >
        <img id='menu_<%=pageOidStr%>' class="menuLink" src='<portal-logic:urlFindInTheme file="images/topNav/menu_selected.gif"/>'
          onmouseout='this.src="<portal-logic:urlFindInTheme file="images/topNav/menu_selected.gif"/>"'
      onmouseover='this.src="<portal-logic:urlFindInTheme file="images/topNav/menu_selected_hover.gif"/>"'
     
      />
    </a>
              <%-- Show icon for closing transient pages markup --%>                
    <%}%>
    </c-rt:if>    
    </li>
  </portal-logic:if>
Including the JavaScript to render the page contextual menu. The script that creates the menu for JSP included with WebSphere Portal, topNav.jspf, is created inside the head.jspf. The following example shows the markup for a page contextual menu:

You must include the AsynchronousContextMenu.js so the method showAsynchContextMenu can be called from head.jspf.
Each menu must have a unique name. The example uses the page’s object ID string to define the method’s name.
<script type="text/javascript" src="<portal-logic:urlFindInTheme file='js/AsynchronousContextMenu.js' />"></script>
<script type="text/javascript"> function showMenu_<%=pageOidStr%>()
{
  return showAsynchContextMenu("menu_<%=pageOidStr%>", '<portal-navigation:url theme="pageContextMenu"></portal-navigation:url>', <%=!isRTL%>, "main-menu-border", "main-menu", "main-menu-item", "main-menu-item-selected" );
}
</script>
Update the links for external URL launching.
Some node types include external URLs. To prevent launching a remote Web site into the portal browser window, you can add conditional coding to the link that forces a new window to open when the node is an external URL. Use the target attribute of the link to launch a new window, or use JavaScript as describe in this step.
Add a JavaScript function to the page header.
The following JavaScript should be added to the Head.jspf in the /themes/html. Do not use a theme-specific copy of Head.jspf (for example, /themes/html/theme_name). The tags in this file are dependent on its location in the root HTML.
<%-- Javascript for opening external URLs in a new browser window --%>

<script language="javascript" type="text/javascript">
 function NewWindow(strUrl)    
{
    window.open(strUrl, "_blank"); 
}    
</script>
Determine whether the current node is external.
The following example shows how to create a boolean variable, externalUrl, to determine whether a new browser window should be launched. This variable must be declared inside the navigation loop so that it is evaluated for each node. The wpsNavNode scripting variable represents the navigation node. If the content type of the node is an external URL, it's value is set to true.
The methods shown below are part of an internal API which are not available for public use, except when used exactly as described in this example.
<%
// if content type is an external URL, String to open a new window boolean externalUrl = false;
   if (com.ibm.portal.content.ContentNodeType.EXTERNALURL.equals(wpsNavNode.getContentNode().getContentNodeType()))
   {
     externalUrl = true;
   }
%>
Add conditional coding to the link to invoke the JavaScript if the node is external.
The following example shows the updated link to the navigation node.

If the node is an external URL, the target value will be _blank and will open a new window when clicked.
If the node is not an external URL, the target value will be _self and will open into the same window when clicked.
The style class indicates that this is for an unselected node. Portal navigation is not available for an external URL, so the selected node does not need this attribute.
<li class="wpsUnSelectedPlace" nowrap height="100%">
      <a class="wpsUnSelectedPlaceLink" 
         href='<portal-navigation:navigationUrl type="link" />' 
         <% if (externalUrl){ %> onClick="NewWindow(this.href);return(false)" <% } %>   >
       <portal-fmt:title/>
  </a>
</li>
Parent topic
Work with portal navigation

Related tasks

Migrating themes
Adding support for top-level navigation