Hier möchte ich kurz skizzieren, wie schnell man das Standard AutoNav Blockelement von concrete5 so erweitern kann, dass es im Einsatz z.B. als linke Unternavigation, über den Hover Effekt weitere Untermenüpunkte dynamisch auf und wieder zuklappt.
Vorweg, beim Versuch es ganz ohne Javascript zu bewältigen ohne Handlingseinbusen, bin ich gescheitert. Es geht zwar, aber nicht mit einem "transition-Effekt", zumindest nicht bei mir.
Augabenstellung:
Das Blockelement AutoNav soll verwendet werden, um eine linke Sub-Navigation zu implementieren, deren weiteren Knd-Seiten per hover Effekt auf und zuklappen können und zwar mit einer zu definierenden Verzögerung.
Voraussetzung:
Es existiert bereits die JQuery Einbettung und ein AutoNav Template, das die linke Seite als Menüblock darstellen kann.
Vorgehensweise:
1. Im Template die view.php Datei um ein paar Marker erweitern, die dann von Javascript verwendet werden können, um die Untermenublöcke ein- und auszublenden
Wichtig sind hier nur die id Einträge, man könnte natürlich auch mit den css Klassen arbeiten:
if (count($navItems) > 0) {
echo '<div class="widget mueller_links clearfix" style="margin-top:20px">';
echo '<ul class="muetop" id="muemain">'; //opens the top-level menu
foreach ($navItems as $ni) {
$subTitle = $ni->cObj->getAttribute('navigation_subtitle');
if ($ni->hasSubmenu) $idtxt = 'muemainitem'; else $idtxt = 'mueitem';
echo '<li class="' . $ni->classes . '" id="' . $idtxt . '">';
echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $ni->name . $subTitle . '</a>';
if ($ni->hasSubmenu) {
echo '<ul class="muesub" id="muedown">'; //opens a dropdown sub-menu
} else {
echo '</li>';
echo str_repeat('</ul></li>', $ni->subDepth);
}
}
echo '</ul>'; //closes the top-level menu
echo '</div>';
}
<?php }
2. Dann legt man zusätzlich ein js Datei an und bindet sie mit ein:
$(document).ready(function() {
$('#muemainitem:not(.nav-path-selected)').hover(function() {
$('#muedown',this).stop().slideDown("slow");
});
$('#muemainitem:not(.nav-path-selected), #muedown').mouseleave(function() {
$('#muedown',this).stop().slideUp("slow");
});
});
Diese macht eigentlich nicht anderes mit jQuery Funktionen, als den Untermenüblock aufzublenden, wenn die Maus über dem Vatermenü ist und es wieder zuzuklappen, wenn nicht.
3. Mit css Sylesheet Attributen kann man den Untermenü-Block des selektierten Vatermenüs offen halten:
.muesub {
display: none;
}
li.nav-path-selected ul.muesub {
display: block;
}
Statt das display Attribut zu schalten kann man auch mit dem height Attribut arbeiten, indem man es auf 0 oder 100% setzt.
Das Problem mit CSS4 und dem Mechanismus der "transition" war, dass diese nicht funktioniert, wenn die Höhe als 100% angegeben wird, eine Transition benötigt eine konkrete Zahl, aber die kann es in diesem Fall nicht geben, weil die Menü-Inhalte dynamisch sind.
Eigentlich nicht weiter kompliziert dank concrete5 Autoav und jQuery.