Akkordeon Menü unter MODx Revo mit Wayfinder & jQuery UI
Quelle: jQuery UI Accordion (http://jqueryui.com/demos/accordion/)
Link MODx Demo Seite (http://www.jolichter.de/demos/accordion.html)
Wayfinder Aufruf
[[!Wayfinder? &startId=`0`
&level=`2`
&outerTpl=`accOuter`
&parentRowTpl=`accParentRow`
&activeParentRowTpl=`accActiveParentRow`
&innerTpl=`accInner`
&rowTpl=`accRow`
&innerRowTpl=`accInnerRow`
&cssTpl=`accCSS`
&jsTpl=`accJS`
&hereTpl=`accHere`]]
CHUNKS
accActiveParentRow
<li><a class="menuitem submenuheader" id="active-submenuheader" href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
accHere
<li><a id="active-menu" href="[[+wf.link]]">[[+wf.linktext]]</a></li>
accInner
<ul class="submenu">
[[+wf.wrapper]]
</ul>
accInnerRow
<li><a href="[[+wf.link]]">[[+wf.linktext]]</a></li>
accJS
animated: slide oder bounceslide
event: click oder mouseover
<script type="text/javascript">
$(function() {
$( "#accordion" ).accordion({ header: '.submenuheader',
fillSpace: false,
autoHeight: false,
animated: 'slide',
event: 'click',
navigation: true
});
});
</script>
accOuter
<div class="accordion-menu">
<ul id="accordion">
[[+wf.wrapper]]
</ul>
</div>
accParentRow
<li><a class="menuitem submenuheader" href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
accRow
<li><a class="menuitem" href="[[+wf.link]]">[[+wf.linktext]]</a></li>
accCSS
<style type="text/css">
.accordion-menu {
margin-left: 0px;
width:200px;
font:11px "Verdana";
}
.accordion-menu a.menuitem{
background:#330000;
font:bold 11px "Verdana";
color:#fff;
text-decoration:none;
display:block;
width:auto;
padding:3px 0 3px 5px;
border-top:1px solid #fff;
outline:none;
border-radius:3px;
}
.accordion-menu li{
list-style-type:none;
}
.accordion-menu a.menuitem:visited, .accordion-menu .menuitem:active{
}
.accordion-menu a.menuitem:hover{
background:#123;
}
.accordion-menu ul.submenu{
width:auto;
list-style-type:none;
}
.accordion-menu ul.submenu li{
text-indent:5px;
background:#d3d3d3;
display:block;
width:auto;
border-radius:3px;
}
.accordion-menu ul.submenu li a{
text-indent:5px;
background:#d3d3d3;
display:block;
width:auto;
color:#123;
padding:3px 0 3px 5px;
border-top:1px solid #fff;
text-decoration:none;
border-radius:3px;
}
.accordion-menu ul.submenu li a:hover{
background:#fff;
}
#active-submenuheader{
background:#123;
color:#fff;
font:bold 11px "Verdana";
display:block;
width:auto;
padding:3px 0 3px 5px;
border-top:1px solid #fff;
}
#active-menu{
background:#fff;
font:bold 11px "Verdana";
}
</style>
:-[