Flyout or Menu Dropdown in Portal 8 themes

Question

I was wondering if anyone has been successful in creating and using a flyout or drop-down menu navigation for WebSphere Portal Server v8?

We are using a custom theme. What we would like to do is keep the main pages across the top navigation bar and have it so that when you hover/click over that page/tab a menu (flyout or drop-down) displays the sub pages and their sub pages and so on. Any suggestions and pointers are welcome. Thanks in advance.

Answer 1

This example generate ul-li two level menu, of course you can generate more levels and you need make insertions of your html and javascript if you need. Put this JSP to your theme and make include to head.jsp for example or somewhere else.

Take a look on this string "your.main.page.unique.name" , change it to your top page unique name. Also there is function isHiddenPage, if you want hide pages from menu, just set property to page hide.from.menu=true

Ok, dude, let me know if you need clarification

<%@page import="com.ibm.portal.model.*"%>
<%@page import="com.ibm.portal.navigation.*"%>
<%@page import="com.ibm.portal.identification.*"%>
<%@page import="com.ibm.portal.content.ContentNodeType"%>
<%@page import="java.util.*"%>
<%@page import="java.io.*"%>
<%@page import="com.ibm.portal.ModelException"%>
<%@page import="com.ibm.portal.ObjectNotFoundException"%>



<%!

public NavigationNode getNodeByName(NavigationModel nm, NavigationNode rootNode, String nodeUniqueName) throws ModelException {
    Iterator iter = nm.getChildren(rootNode);
    while(iter.hasNext()){
        NavigationNode node = (NavigationNode) iter.next();
        String uniqueName = node.getContentNode().getObjectID().getUniqueName();
        if (uniqueName!= null && uniqueName.equals(nodeUniqueName)) 
            return node;
    }
    return null;

}

public List<NavigationNode> getChildrenNodes(NavigationModel nm, NavigationNode parentNode) throws ModelException{
    List<NavigationNode> children = new ArrayList<NavigationNode>();
    Iterator iter = nm.getChildren(parentNode);
    while(iter.hasNext()){
        NavigationNode node = (NavigationNode) iter.next();
        children.add(node);
    }
    return children;
}

public String getId(Identification identification, NavigationNode node) throws com.ibm.portal.serialize.SerializationException{
    return identification.serialize( ( ( com.ibm.portal.Identifiable ) node ).getObjectID());
}

public boolean isHiddenPage(NavigationNode node){
    if (node instanceof com.ibm.portal.MetaDataProvider) {
        com.ibm.portal.MetaData iMetaData=((com.ibm.portal.MetaDataProvider) node).getMetaData();
        Object url=iMetaData.getValue("hide.from.menu");
        return (url != null && url.toString().equals("true"));
    }
    return false;
}

%>

<%
javax.naming.Context ctx = new javax.naming.InitialContext();
NavigationModelHome nmh = (NavigationModelHome) ctx.lookup("portal:service/model/NavigationModel");;
NavigationModel nm = nmh.getNavigationModelProvider().getNavigationModel(request, response);
NavigationSelectionModelHome nsmh = (NavigationSelectionModelHome) ctx.lookup("portal:service/model/NavigationSelectionModel");
NavigationSelectionModel nsmodel = nsmh.getNavigationSelectionModelProvider().getNavigationSelectionModel(request, response);

NavigationNode rootNode = (NavigationNode) nm.getRoot();
Identification identification = (Identification) ctx.lookup( "portal:service/Identification" );
try{
    if (rootNode != null && nm.hasChildren(rootNode)) {
        NavigationNode myRootNode = getNodeByName(nm, rootNode, "your.main.page.unique.name");
            %>
            <ul>    
            <%
                for (NavigationNode firstLevelPage: getChildrenNodes(nm, myRootNode )){

                String title = firstLevelPage.getTitle(getLocale(pageContext));
                String id = getId(identification, firstLevelPage);
                boolean isNodeSelected = nsmodel.isNodeSelected(firstLevelPage); // if node selected you can apply css class to selected menu item 
                boolean isHidden = isHiddenPage(firstLevelPage); // if node is hidden from menu just continue loop
                %>

                    <li>
                    <portal-navigation:urlGeneration contentNode="<%=id%>">
                           <a class="trigger" href="<% wpsURL.write(out);%>" ><c:out value="<%=title%>"/></a>  
                    </portal-navigation:urlGeneration>

                        <%if (getChildrenNodes(nm,firstLevelPage ).size() > 0){%>

                                    <ul>

                                        <% 
                                            for (NavigationNode secondLevelPage: getChildrenNodes(nm,firstLevelPage )){
                                            String childTitle = secondLevelPage.getTitle(getLocale(pageContext));
                                            String childId = getId(identification, secondLevelPage);
                                            %>

                                                <portal-navigation:urlGeneration contentNode="<%=childId%>">
                                                <li><a href="<% wpsURL.write(out);%>" ><c:out value="<%=childTitle%>"/></a></li>  
                                                </portal-navigation:urlGeneration>

                                        <%}%>   

                                    </ul>                               

                        <%} %>
                    </li>

            <%}%>
        </ul>           
<%          
    }

    }
}catch(ModelException e){
    e.printStackTrace();
}

%>                      

PS. maybe I wrong with brackets, check it

Answer 2

Example of theme that I've done

1) Simple dropdown

2) Multilevel dropdown

I use ul and li to make the dropdown and you can update the topnav.jsp. Couldn't paste the code here as it's not displaying correctly.

Good luck