Explanation:
Using the class UI_HTML_Tree_Menu you can create a nested list of links.
By applying CSS and JavaScript to the list, advanced tree menus can be realized.
The tree is to be fueled by a structure using ADT_Tree_Menu_List or by OPML, as in this case.
$fileName = "menu.opml";
$builder = new UI_HTML_Tree_Menu();
$code = $builder->buildMenuFromOpmlFile( $fileName, 'cmTreeMenu' );
By applying CSS and JavaScript to the list, advanced tree menus can be realized.
The tree is to be fueled by a structure using ADT_Tree_Menu_List or by OPML, as in this case.
This is the used OPML file containing data of all links within the tree.
<?xml version="1.0" encoding="ISO-8859-1"?>
<opml version="2.0">
<body>
<outline type="link" text="Webseite" url="./?id=siteIndex">
<outline type="link" text="Referenzen" url="./?id=siteReferenceIndex">
<outline type="link" text="Portale" url="./?id=siteReferencePortalIndex">
<outline type="link" text="Teilo" url="./?id=siteReferencePortalTeilo"/>
</outline>
</outline>
<outline type="link" text="Leistungen" url="./?id=serviceIndex">
<outline type="link" text="Architektur" url="./?id=serviceArchitecture"/>
<outline type="link" text="Beratung" url="./?id=serviceConsulting"/>
<outline type="link" text="Entwicklung" url="./?id=serviceEngineering"/>
</outline>
</outline>
<outline type="link" text="Forum" url="./?id=forumIndex">
<outline type="link" text="Thread 1" url="./?id=forumThread1"/>
<outline type="link" text="Thread 2" url="./?id=forumThread2"/>
<outline type="link" text="Thread 3" url="./?id=forumThread3"/>
</outline>
<outline type="link" text="Blog" url="./?id=blog"/>
</body>
</opml>
By default a vertical nested list would appear. But using this CSS
.cmTreeMenu {
clear: both;
}
.cmTreeMenu a {
color: darkred;
}
.cmTreeMenu > ul {
background-image: url(mainmenu_bg.png);
background-repeat: no-repeat;
width: 565px;
height: 36px;
list-style: none;
padding-left: 20px;
padding-top: 1px;
}
.cmTreeMenu li.parent>a {
font-weight: bold;
}
.cmTreeMenu li.level-1 {
float: left;
position: static;
list-style: none;
font-weight: bold;
border-right: 1px solid #DDD;
}
.cmTreeMenu li.level-1 > span,
.cmTreeMenu li.level-1 > a {
display: block;
height: 24px;
padding-top: 6px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
}
.cmTreeMenu li.level-1 ul {
z-index: 100;
min-width: 120px;
position: absolute;
background-color: #555555;
list-style: none;
border-bottom: 0px;
margin-left: 0px;
margin-top: 0px;
border-width: 1px 0px 0px 0px;
border-style: solid;
border-color: #555555;
padding-bottom: 8px;
-moz-border-radius-bottomright: 0.7em;
-moz-border-radius-bottomleft: 0.7em;
}
.cmTreeMenu li.level-1 ul li {
width: 120px;
position: relative;
}
.cmTreeMenu li.level-1 ul li.level-2 {
display: block;
font-weight: normal;
font-size: 11px;
background-color: #555555;
/* border-top: 0px;*/
}
.cmTreeMenu li.level-1 ul li span,
.cmTreeMenu li.level-1 ul li a {
display: block;
padding: 4px 10px 4px 10px;
color: #FFF;
text-decoration: none;
}
.cmTreeMenu li.level-1 ul li.level-2 span:hover,
.cmTreeMenu li.level-1 ul li.level-2 a:hover {
background-color: #999;
}
.cmTreeMenu li.level-1 ul li.level-2 ul {
position: absolute;
top: -8px;
left: 120px;
display: block;
font-weight: normal;
font-size: 11px;
background-color: #555555;
padding-top: 8px;
padding-bottom: 8px;
-moz-border-radius: 0.7em;
}
.cmTreeMenu li.level-1 ul li.level-2 ul li a {
display: block;
padding: 4px 10px 4px 10px;
color: white;
text-decoration: none;
}
.cmTreeMenu li.level-1 ul li.level-2 ul li a:hover {
background-color: #999;
}
the nested list will be displayed like this:
- level 1 as horizontal link list
- level 2 as vertical sub link list shown when mouse enters level 1 link
- level 3+ as horizontal sub link list shown when mouse enters level 2+ link
- levels 1+ are displayer above the content below just like an application menu
In this demo the levels of the nested link list are displayed as application menu like tree.
While the styling is set by CSS, the nested levels are invisible.
To show these nested list levels mouse interaction is enabled using this JavaScript:$(document).ready(
function(){
$(".cmTreeMenu li").hover(
function(){
$(this).children("ul").show();
},
function(){
$(this).children("ul").hide();
}
);
$(".cmTreeMenu>ul ul").hide();
}
);
It is just using jQuery to show nested list levels if the mouse enters the related parent level link and hide it if the mouse leaves.
You can use a different script, of course.
If your CSS is not hiding list levels you don't need to use any JavaScript.
While the styling is set by CSS, the nested levels are invisible.
To show these nested list levels mouse interaction is enabled using this JavaScript:
You can use a different script, of course.
If your CSS is not hiding list levels you don't need to use any JavaScript.