Navigation modifizieren

**Mr. Burns** · 22.04.2010, 17:24

Hallo,
ist es möglich eine solche Navigation:
Suckerfish
so zu bearbeiten, dass sie nicht direkt aufklappt sondern "sanft" ausfährt?
Könnte man so etwas mit jQuery realisieren? Kann mir jemand dazu Tipps geben?
Grüße!

**MacKP** · 22.04.2010, 17:29

Hallo Mr. Burns,
schau dich doch eher mal nach Mootools um. Da TL das schon benutzt wäre das Praktischer ;-)

Hier mal nen Link den ich auf die Schnelle gefunden habe -> http://greengeckodesign.com/menumatic

Viele Grüße

**Mr. Burns** · 22.04.2010, 17:38

Super, danke schonmal.
Leider hab ich mit dieser Variante noch gar keine Erfahrungen. Naja ich hab die Lightbox aktiviert bekommen ...

Also ich hab ja die Navigation nach der Anleitung die ich oben verlinkt habe aufgebaut.
Von deiner verlinkten Anleitung brauche ich jetzt quasi nur aus dem html-Teil den javascript in mein Seitenlayout zu kopieren.
Nur was mach ich dann mit dem Javasrict-Teil unten?

***xchs*** · 22.04.2010, 17:49

Zitat von Mr. Burns

Nur was mach ich dann mit dem Javasrict-Teil unten?

Den könntest Du z.B. im Seitenlayout im Abschnitt "Eigener JavaScript-Code" einfügen (oder alternativ ein eigenes Template machen)

**Mr. Burns** · 22.04.2010, 18:37

Ich hab mal ein paar Sachen ausprobiert, aber ich bekomm die Navi nicht zum laufen.
Also ich habe die Datei hochgeladen:
/plugins/mootools/src/MenuMatic_0.68.3.js

Dann habe ich im Seitenlayout im Feld <head> die drei Zeilen eingebunden, die die Javasripts-Dateien reinladen. Anschließend im Feld Javascript den guten Code:

Code:

	<script type="text/javascript" >
		window.addEvent('domready', function() {			
			var myMenu = new MenuMatic();
		});		
	</script>

eingebunden. Was muss man auf jeden Fall noch beachten?

**MacKP** · 22.04.2010, 19:12

Hallo Mr. Bruns,
da das JS und CSS so angelegt ist, das die Erste ul so aussieht: <ul id="nav">
musst du noch ein wenig Handarbeit machen. Entweder das CSS und JS anpassen, oder das Navitemplate so umbauen, das die erste Ebne diese ID erhält.

Als Kurztipp:
if level=1
echo id="nav"
else
nix
ende
Viele Grüße

**Mr. Burns** · 22.04.2010, 19:38

Ok, das ist mein sicheres Ende!

Also ich verstehe schon was du meinst, die js ist auf die html und css Datei MenuMatic angepasst und kann mit meinen css meiner Suckerfish nichts anfangen. Aber das umzuschreiben wäre wahnsinn für meine Kenntnisse

Die zweite Variante würde ich also vorziehen, ist aber ich nicht einfach, schließlich beginnt in meiner navi.css alles mit .mod_navigation, da kann ich ja schlecht einfach #nav daraus machen ... Kannst mir das noch ein bisschen genauer erklären?

**MacKP** · 22.04.2010, 21:20

Hallo Mr. Burns,
hier hab ich mal etwas mehr als Theorie geschrieben:
https://community.contao.org/de/show...ll=1#post56936

So musst du das eigentlich nur an die Passende Stelle bringen (in das ul-Tag) und dann ne id setzen ;-)

Viele Grüße

---
OK OK
Ich versuchs mal:

nav_default.tpl

Code:

<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; ?>"><span class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['link']; ?></span><?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>

Geändert ist nur die 1. Zeile.

Hoffe das klappt jetzt sofort *g*

Viele Grüße

---
Edit:
Ich hab mal nen mini-Tut daraus gemacht -> https://community.contao.org/de/show...0633#post60633