Waagrechte/Horizontale jQuery NavBar Superfish Navigation
Hallo allerseits!
Nachdem ich im .org-Forum schon ein Howto erstellt habe, dachte ich mir, ich uebersetze es 'Mal fuer evtl. Aufarbeitungen seitens der deutschsprachigen TL-Gemeinde, da mir diese viel aktiver scheint. :)
Nochmals einen herzlichen Dank an alle, die TL zu dem gemacht haben, was wir heute sehen und benutzen duerfen.
Da ich mein TL auf Englisch habe, werde ich auch die englischen BE-Navigationspunkte verwenden. Des Weiteren, fuehle ich mich verpflichtet mich fuer das Fehlen der Umlaute zu entschuldigen, die sind naemlich von meiner Tastatur verschwunden (bis auf ein paar Ausnahmen) :o. Also...
---snipp---
Im Folgenden wird Joel Birch's jQuery Superfish-Menu von hier in TYPOlight eingebaut, und zwar in der "nav-bar"- Variante.
1. Vom obigen Link herunterladen, evtl. wird noch eine aktuelle Version von jQuery benoetigt, falls sie im Superfish-Archiv fehlen sollte.
2. Ein neues Template erstellen vom typ nav_default.tpl und mit dem folgenden Quelltext ersetzen:
Code:
<?php
echo PHP_EOL . '<ul class="sf-menu sf-navbar ' . $this->level .'">' . PHP_EOL;
foreach ($this->items as $item) {
//check for variables
if ($item['class']) {
if (strstr($item['class'], 'trail')) { //begin: Is part of trail?
$navItemClass = ' class="' . $item['class'] . ' current" ';
}else{ // is not part of trail
$navItemClass = ' class="' . $item['class'] . '" ';
}//end part of trail check
$navItemClassCurrent = ' class="' . $item['class'] . ' current" ';
} else { unset($navItemClass); }
if ($item['pageTitle'] != "") {
$navItemTitle = ' title="' . $item['pageTitle'] . '" ';
}else {
$navItemTitle = ' title="' . $item['title'] . '" ';
}
if ($item['accesskey']) {
$navAccessKey = ' accesskey="' . $item['accesskey'] . '" ';
}
if ($item['nofollow']) {
$navNoFollow = ' rel="nofollow" ';
}
//output
if ($item['isActive']) {
echo '<li ' . $navItemClassCurrent .'>'
.'<a ' . $navItemClassCurrent .'>' . $item['link'] . '</a>'
. $item['subitems']
. PHP_EOL
. '</li>'
. PHP_EOL;
} else {
echo '<li ' . $navItemClass . '>'
.'<a '
. $navItemClass
.'href="' . $item['href'] . '" '
. $navItemTitle
. $navAccessKey
. $navTabIndex
. 'onclick="this.blur();"' . $item['target']
. '">'
. $item['link']
. '</a>'
. $item['subitems']
. PHP_EOL
. '</li>'
. PHP_EOL;
}
}
echo "</ul>";
?>
(Ah, wie erfrischend, HTML in PHP...)
3. Ein neues Modul vom Typ "Navigation menu" erstellen und mit der obigen Vorlage verknuepfen.
4. Wie im englischen Forum erwaehnt, scheine ich (etwas) zu minderbemittelt zu sein um die Superfish- und Navbar- CSS-Dateien mittels Haken in das Page-Layout einzubinden, also folgendes am Ende (vom Layout) einfuegen (hierbei "/path/to/your/" mit Euren eigentlichen Pfadangaben ersetzen, echte Spezialisten benützen hierbei relative Pfade.
Code:
<link rel="stylesheet" type="text/css" media="screen" href="/path/to/your/css/superfish.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/path/to/your/css/superfish-navbar.css" />
<script type="text/javascript" src="/path/to/your/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/path/to/your/js/superfish.js"></script>
<script type="text/javascript" src="/path/to/your/js/hoverIntent.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("ul.sf-menu").superfish({
pathClass: 'current' ,
autoArrows: false,
pathLevels: 1,
dropShadows: false
});
});
</script>
Es soll moeglich sein das <script> in ein anderes Template einzubauen, wer weiss wo und wie, darf dies gerne tun.
5. Die zwei CSS-Dateien, die mit dem Menue mitgeliefert werden, jeweils anpassen wie es Euch beliebt und evtl. hier anderen zur Verfuegung stellen.
6. Einen Dankesbrief an Joel Birch und die jQuery-Gemeinde verfassen! Die Liste befindet sich hier: http://groups.google.com/group/jquery-en/ .
7. Euren den TYPOlight-Entwicklern-gewidmeten Altar abstauben, mindestens zwei Personen von hier aussuchen und einen weiteren Dankesbrief verfassen!
8. (Optional) Wenn dieses Tutorial hilfreich war, bei der Website-Einweihungsfeier zu meinen Ehren einen Trinkspruch aussprechen.
9. F/OSS untertuetzen, wo Ihr nur koennt.
Ich bedanke mich recht herzlich fuer Ihre Aufmerksamkeit und wuensche viel Spass mit der Navi! :)
:cool:
"overflow:visible" Menü reagiert nicht mehr
Zitat:
Zitat von
kretschi
hallo MacKP,
das wars - vielen dank für die hilfe. vielleicht sollte man das in das tutorial einfügen.
ich habe es so gelöst, dass ich dem modul die id fishmenu gegeben habe.
damit sollte eine weitere .mod_navigation das overflow:hidden behalten.
Code:
.mod_navigation#fishnavi
{
overflow:visible;
}
Also bei mir haut das nicht hin.
Wenn ich overflow:visible stelle ist das Menü tot.
Es reagiert übehaupt nicht mehr.
Genau so ist es auch bei fsmenu.
Ich habe typolight 2.8.1 in einer Xammp Testumgebung laufen.
Testbrowser Firefox
Grüße
Muerto
2.8.2 + jquery NavBar = Lightbox funktioniert nicht mehr?
Hallo zusammen,
zuerst: Danke für die Ausführungen...
Ich habe die Navigation wie oben beschrieben in einer 2.8.2-Installation integriert.
Die Navigation funktioniert wunderbar.
Nun habe ich allerdings das Problem, dass die Lightbox nicht mehr funktioniert...
Hat jemand eine Idee?
Gruß
Wilder Waidla
Kurioses Problem bei der Klassenvergabe
Hey,
erstmal danke für das Tut. In Summe hat es mich schon fast zum Ziel gebracht nur habe ich gerade folgendes kurioses Problem:
Situation:
Ich habe eine Navigation mit 5 Punkten wobei der dritte Punkt Unterpunkte hat:
+-- Seite 1
+-- Seite 2
+-- Seite 3 (class="test-class") ->
|---- Seite 3.1
|---- Seite 3.2
|---- Seite 3.3
+-- Seite 4
+-- Seite 5
Außerdem gebe ich der Seite 3 in der Seitenstruktur eine Klasse (test-class), um diesem Punkt ein eigenes Styling zu geben und eine weitere JS-Aktion(MouseEnter) auszuführen.
Das läuft auch alles super ABER:
Gehe ich auf Seite 4 wird (neben dem Nav-Element der Seite 3) dem Navigationspunkt der Seite 4 die Klasse der 3ten Seite zugewiesen und es führt unglücklicherweise die Gleiche JS-Aktion bei MouseEnter aus. Sieht dann so aus:
+-- Seite 1
+-- Seite 2
+-- Seite 3 (class="test-class") ->
|---- Seite 3.1
|---- Seite 3.2
|---- Seite 3.3
+-- Seite 4 (class="test-class")
+-- Seite 5
Auf allen anderen Seiten bekommt auch nur die Seite 3 die Klasse "test-class" zugewiesen. Egal ist auch ob ich Seite 4 mal invisible stelle. Dann bekommt eben Seite 5 die Klasse zugewiesen.
Hat jemand eine Idee woran es liegen kann?
Die Seite ist noch lokal, deshalb kann ich leider keinen Link posten.
Danke
