Apex 5 Universal Theme – Navigation Experiment #1

Task

The idea was to have a left sidebar menu where all the top level menu entries are always open. The reason is to optimize screen estate and avoid clicks when navigating to some sub menu.

Opening the second level menu entry

The following solution is a cheat. It does not really use a list with two different hierarchy levels. Instead it is using a normal side navigation menu. But the entries on the first level (top level entires) are enhanced with attributes, that will make some entries look more important, than other entries.

Here is the css to do so.


div.FlatHierachie-ItemMain{
font-weight:bolder;
font-size: 1.5em;
line-height: 1.5em;
text-shadow: 2px 2px 4px #000000;
}
div.FlatHierachie-Item {
font-weight:lighter;
font-size: 0.75em;
line-height: 1.5em;
}

This css will work only if the list template is changed.

Each entry for a top level menu point will get an additional class:

class="FlatHierachie-Item#A06#"

apex5_sidebar_expand

The following fields need to be changed:

  • List Template Current
  • List Template Current with Sublist Items
  • List Template Noncurrent
  • List Template Noncurrent with Sublist Items

The Sublist entries will stay as they were.

Additionally the Navigation list itself needs to be changed.

Each top level list entry will get an additional attribute number 06 set to “Main”.

apex5_sidebar_expand_navlist

All second level list entries will get there parent entry removed.
To remain the ordering of the list, it is advisable to RESEQUENCE the list entries first, before removing the parent information.

This is the most manual work to do. Also it is not so easy to get back to the old list, therefore we should first make a copy .

And this is how the result looks like:

apex5_sidebar_expand_after

Overview about other Experiments

Advertisements

One thought on “Apex 5 Universal Theme – Navigation Experiment #1

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