Version vom 3. Oktober 2010, 18:17 Uhr

Mootools Aufklappmenü MenuMatic in Contao benutzen

Da es immer viele Probleme mit Menüs gibt und sich viele Bewegende Menüs wünschen habe ich mal MenuMatic ( http://greengeckodesign.com/menumatic ) in Typolight eingebaut. Auf der Seite sind auch 2 Beispiele.

Voraussetzung:

Mootools 1.2 (also TL ab 2.8) Grundlegende Erfahrung mit TYPOlight und Seitenstruktur gute CSS-Kentnisse um es genau anpassen zu können für die Grundfunktion so wie es ist keine JavaScript-Kentnisse

Dazu ist eigenltich nicht viel nötig.

Von der Seite ( http://greengeckodesign.com/menumatic ) ganz unten die Dateien herunterladen. Da sind 2 Beispiele drinn:

• horizontal
• vertical

Vorgehen:

1. Die benötigten CSS-Dateien importieren (entweder aus dem Ordner horizontal ode vertical, je nach Bedarf). Das CSS für den IE6 dann auch passend mit conditional Comment versehen. Die JS-Datei hochladen (z.B. in den Ordner js). Diese Datei muss lesbar für alle sein.

2. Ein neues Navigation Template erstellen mit diesem Inhalt (nav_MenuMatic.tpl):

<ul <?php if ($this->level == 'level_1'): ?>id="nav"<?php endif; ?> class="vlist <?php echo $this->level; ?>">
    <?php foreach ($this->items as $item): ?>
    <?php if ($item['isActive']): ?>
    <li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><em><?php echo $item['link']; ?></em></a><?php echo $item['subitems']; ?></li>
    <?php else: ?>
    <li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
    <?php endif; ?>
    <?php endforeach; ?>
    </ul>

Anpassungen (2 Stück):

• Das erste <ul> bekommt die ID 'nav' (darüber kann dann mit JavaScript das Menü angesprochen werden)
• Hier sind auch die aktiven Navi Punkte verlinkt und nicht mit einem span sondern mit em umschlossen. So werden die Beispiele nicht mehr davon beeinflusst und man kann es trotzdem gut mit CSS ansprechen.

3. Ein neues Navigationsmodul (genaueres kann hier nachgelesen werden zu dem Modul -> http://de.contaowiki.org/ModulNavigation) :

• Startlevel 0
• Stoplevel 0
• Referenzseite (keine bzw. Startpunkt oder was man möchte)
• Navigationstemplate: (das von uns gerade erstellte) nav_MenuMatic.tpl

4. Neues Seitenlayout:

• Navigationsmodul von gerade da hin packen wo man es haben möchte
• Eigener JavaScript-Code:

<!-- Load the MenuMatic Class -->
 
<script src="js/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>
 
<!-- Create a MenuMatic Instance -->
<script type="text/javascript" >
window.addEvent('domready', function() {
var myMenu = new MenuMatic();
});
</script>

(Damit initialisiert man das Menü und kann noch Parameter übergeben. Genaueres ist auf der oben verlinkten Seite zu finden)

Cave: für das vertikale Menü muss dieser JS-Code ergänzt werden an dieser Stelle:

var myMenu = new MenuMatic({ orientation:'vertical' });

CSS-Dateien auswählen:

• style.css (nur Beispiellayout, also nicht benutzen, wenn man ein eigenes hat!)
• MenuMatic.css (hier ist alles für die Navi, mit Suckerfish als Grundlage. Hier muss man dann selber die gewünschten Anpassungen vornehemn)
• MenuMatic-ie6.css (erklährt sich glaube ich von selber *g* - muss eventuell nach eigenen Bedürfnissen angepasst werden)

Soviel zu dem kleinen Tutorial. Natürlich muss das ganze Individuell angepasst werden. Aber das Beispiel Layout dürfte so nun jeder zum laufen bekommen ;-)

Link zum Thread im Forum: Forum-Diskusionsthread

--MacKP 13:34, 20. Jun. 2010 (UTC)