Today I have published a new release of phpwcms. There are a lot of fixes implemented. But also 2 new replacement tags where added. These tags helps to create list based CSS styled navigation menus. One represents the top site structure level, the other one returns a list with the currect level. CSS is a very powerful technique. One cool new thing is to use CSS styled HTML lists. This produces very smart rollover menus (based on the used CSS settings) without any JavaScript onMouseOver code. The need of a modern webbrowser is the only limitation.
One user asked for a standard menu solution: the horizontal navbar — most on top of the page. I remembered some interesting examples of HTML list based menu bars (
Listamatic,
A List Apart) — for horizontal and vertical usage. This navbar returns a list with the top level of a website, optional including website start (home).
The {
NAV_LIST_TOP} replacement tag uses predefined settings. To change the layout you have to adjust the CSS information of page's template on which the navigation list should be presented. The predefined class is "list_top". To use your own class name you have to use the customizable replacement tag.
The {
NAV_LIST_TOP:NameOfTheWebSiteIndex:ClassName} replacement tag is used for customized list creation. To change the layout you have to adjust the CSS information of page's template on which the navigation list should be presented. Visit source code of the rendered page to see how the used classes are named for active list and links. Sample: {
NAV_LIST_TOP: : } = no index, default class name.
This is a vertical navbar — often used for child categories. This replacement tag lists the current level of a website, optional including a link to the parent level.
The {
NAV_LIST_CURRENT} replacement tag uses predefined settings. To change the layout you have to adjust the CSS information of page's template on which the navigation list should be presented. The predefined class is "list_level". To use your own class name you have to use the customizable replacement tag
This is the customizable version of the current level replacement tag: show-index can be set to 0 or 1. If it is set to 0 the index-name will not returned. You can name the index-name as you like. This links back to the parent level. You can use your own class name with this replacement tag.