MODX Accordion

[Jo]

Akkordeon Menü unter MODx Revo mit Wayfinder & jQuery UI
Quelle: jQuery UI Accordion

Link MODx Demo Seite

Wayfinder Aufruf

Code Auswählen Erweitern

[[!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

Code Auswählen Erweitern

<li><a class="menuitem submenuheader" id="active-submenuheader" href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>


accHere

Code Auswählen Erweitern

<li><a id="active-menu" href="[[+wf.link]]">[[+wf.linktext]]</a></li>

accInner

Code Auswählen Erweitern

<ul class="submenu">
[[+wf.wrapper]]
</ul>

accInnerRow

Code Auswählen Erweitern

<li><a href="[[+wf.link]]">[[+wf.linktext]]</a></li>

accJS
animated: slide oder bounceslide
event: click oder mouseover

Code Auswählen Erweitern

<script type="text/javascript">
    $(function() {
    $( "#accordion" ).accordion({ header: '.submenuheader',
                                  fillSpace: false,
                                  autoHeight: false,
                                  animated: 'slide',
                                  event: 'click',
                                  navigation: true
                                  });
    });
</script>

accOuter

Code Auswählen Erweitern

<div class="accordion-menu">
  <ul id="accordion">
   [[+wf.wrapper]]
  </ul>
</div>

accParentRow

Code Auswählen Erweitern

<li><a class="menuitem submenuheader" href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

accRow

Code Auswählen Erweitern

<li><a class="menuitem" href="[[+wf.link]]">[[+wf.linktext]]</a></li>

accCSS

Code Auswählen Erweitern

<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>

:-[