APEX 5 Universal Theme – Analyzing and Modifing Navigation Menus

Preparation

I’m currently analyzing a lot of the navigation menu possibilities of the universal theme. The goal is to find ways to enhance the current navigation possibilities in various way. I’m not a webdesigner. I do understand a fair bit of HTML5 and CSS3, but I’m far from an expert there. But this is why I like Apex. In general we do not need to have an extensive design wisdom. My personal strength is on the database level. However I feel that especially with APEX5 it becomes even more useful to understand CSS.

Information gathering

Unfortunatly there is not much information available from oracle. Patrick Wolf made a nice list of Apex Blog entries. However most of them do show only how apex 5 behaves normally. Not like you can break out of the norm. Fortunatly the list gets longer and longer, so you might want to recheck it from time to time.

One should be used to analyze the html code using tools like code inspector and firebug.

Or you can “read” the css and js files. I did this a few times, just to see if I can find some more hidden options or reusable css classes.

John Synder blogged about the different widgets that are used in the page designer: http://hardlikesoftware.com/weblog/2015/04/29/apex-5-0-page-designer-meet-the-widgets/

How to test drive new layout settings

There are a couple of things I regularily do when experimenting with layouts, especially with the menu.

Since I’m usually not the only developer in a project, I do not want to confuse or disturb the others. Therefore some reasonable precautions seem necessary.

  1. Copy the whole application into the same workspace
  2. When playing around with the theme roller, create a new style and save that.

If you have static files set up, then you can directy use the result from the theme roller in the application copy and later in the original application. If not, then you can download and store the resulting css manually and reference it.

Experiments

#1 Trying to keep the first two menu hierachy levels open

The goal was to reduce the number of clicks for the users. One idea was to keep the first two levels in the menu hierarchy always open.

Different approaches tried :

  1. set the autocollapsible option for the navigation tree to false
    ==> No success so far
    The autocollapsible option is a default option for the tree widget. Not sure if I correctly used that, but changing it to false seemed to have no effect.
  2. use the class a-TreeView–noCollapse
    ==> No success so far
    This class should be considered during tree initialisation and by the expand/collapse events. I could add the class using a modified list template for the top level list entries, but that was not working.
  3. make second level hierachy entries look like top level entries
    ==> Seems possible with large changes to the list template and by adding some additional attributes.
  4. make all second level entries to top level entries and add an attribute to change the look like second level entries
    ==> this is the only one I sucessfully implemented. Not my favourite solution, but only 2 hours of work.
    Here is a blog entry to show the steps how to do it.

#2 Trying to create a “Windows Startmenu” like navigation

The idea is to have a menu on the left hand side, where the sub menu entries open simliar to the windows start menu (if you still remember that you metro users!). One problem is to have the sub menus overlap the normal page body. This is solved for the top menu bar widget, but not so easily done with the side bar tree widget.

Different approaches possible:

  1. Use the top menu logic for the side.
    ==> This is tricky, but I got some mediocre “in between” results.
    So far the additional work to do is more time than I wanted to spent. So I stopped the experiment. Might want to come back to that one day.
  2. Using Twitter Bootstrap directly to circumvent the whole apex internal logic.
    ==> This is definitly possible. I did the same with a Topbar Menu in Apex 4.2 . I think there is even a plugin from Dan McGhan that does it. However with the new apex 5 possibilities, this is not my preferred way.

#3 Decreasing the size of the sidebar menu

In one project we already used a tree based menu. After migration to Apex5 and Universal Theme, this menu was way larger than before. Here is how to decrease the line height for the side menu: https://svenweller.wordpress.com/2015/09/24/apex-5-universal-theme-navigation-experiment-3/

#4 Coloring the Menu

The idea is to enhance the side bar menu by having different regions colored differently. This works but I discovered a few quirks during the process of doing so.

This is the result

apex5_sidebar_colored_after

And here is how to do it: https://svenweller.wordpress.com/2015/11/05/apex-5-universal-theme-navigation-experiment-4/

 

Advertisements

6 thoughts on “APEX 5 Universal Theme – Analyzing and Modifing Navigation Menus

  1. Hi, I’m trying to create a wider nav menu b/c my titles are being cut off but can’t figure out how to do so. Do you know how to widen the actual entire nav menu bar? Also, any way to be able to click anywhere on the nav region to open a menu instead of just the little carrot? Thank you!

    • Hi mznewbie,

      You can set the size of the navigation menu using the Theme Roller. Click the “Show all” options button. Then navigate to Layout/Navigation tree. There is a slider to change from the default 200px to the value you want.

      Theme Roller then creates the needed Css for you. For example if you decrease it to 160px then it will put something like

      {“customCSS”:””,”vars”:{“@Nav-Exp”:”160px”}}

      into the Theme Roller JSON configuration.

      Regards
      Sven

  2. Thanks, Sven. I already have Nav Tree maxed out at 220 and Left Size Column maxed at 280. Is there any way to manually widen it since some of my button titles are pretty long and they’re being truncated?

    Also, do you have code to allow me to click anywhere on a button in the left-hand navigation menu to expand it? It defaults to only allowing me to click on the little carrot “V” and that is annoying b/c it is very small. I’d like to be able to just click anywhere on the button to expand or collapse the content. (Not sure how to copy and paste an image in here to show you what I’m talking about.)

    Thank you for the quick response! Much appreciated. Have a great day!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s