Screencast 2 – WebCenter PS3 Navigation Models and CSS Menus

Screencast 2 – WebCenter PS3 Navigation Models and CSS Menus

*View an updated version of the CSS navigation within the WebCenter ADF Bootstrap Theme

In our second installment of the WebCenter workbench we take a look at WebCenter PS3’s new Nagivation Model and how it is possible to create fly-out, multi-level drop down menus using it and CSS3 stylesheets. This allows WebCenter navigations to be developed using very common web design and development skills, but take advantage of many other WebCenter platform features.

Source Code
Complete Sample Page Template
ADF CSS Fragment
UL-based Navigation Model Code Snippet
JSTL Inclusion Text


  1. […] great post (and video) by John Brunswick here shows an example on how one can quickly create a new Page Template with “flyout-menus” […]

  2. […] contentStyle applied to each list in a shuttle CSS in ADF Faces Styling with ContentStyle helps us to directly address content within a component. Often times components have a DIV wrapper and we ultimately want to stlye a part of the inside of a component, opposed to a wrapper. Skinning Approach Coarse Grained & Fine Grained When skinning a WebCenter Portal instance we can look at it from coarse-grained and fine-grained standpoint – meaning that many large elements on the page like the background and the center of the page can use very basic styling techniques to impart a look and feel to particular corporate brand with very little effort. At the fine-grained level we can apply the styling to specific ADF components and controls within the page. A lot of value to be gained simply from the coarse-grained approach and then a small amount of tuning with the fine grained goes a long way to complete your overall look and feel that will be inline with your corporate brand. Hybrid Model Often times a hybrid model of styling works very well for portals. Taking the coarse-grained elements (page background, main portion of the body, etc) and using traditional CSS approaches with those, but then getting specific using the ADF skinning that we discussed previously, will work together to generate your overall portal appearance. Navigation via CSS An example of a hybrid approach would be using technology in WebCenter to generate a menu that uses unordered lists and list items, then applyies traditional CSS to them. Even though you’re benefiting from WebCenter’s navigation models, you’re not doing traditional ADF skinning – but instead using plain old CSS. As an example, take a look at E2.0 Workbench Podcast 2 – WebCenter PS3 Navigation Models and CSS Menus. […]