wrf_jQueryDHTMLNavi

[yodatortenboxer]

Hallo,

hier ist noch ein äleres Modul von mir, das für meine Seite und mehrere Kunden umgesetzt wurde.

Es handelt sich um eine DHTML-Navigation auf jQuery Basis.
Die Vorlage hierzu ist: http://users.tpg.com.au/j_birch/plugins ... h/#sample1

Einstellbar sind drei Navigationsarten.
- Horizontal
- Vertikal
- Navbar

Die Konfiguration erfolgt über Administration => Mandanten => Mandant => Mandanteneinstellungen

Allgemeine Einstellungen für die idcat des Navibaumes und der max. Tiefe:

Code: Alles auswählen

'navigation', 'idcat-dhtml', '1'
'navigation', 'idcat-dhtml-maxlevel', '10'

Für die Navigationsarten sind folgende einstellungen möglich:

Code: Alles auswählen

'mwrfJqNav', 'JqNavArt', 'h' <= h für horizontal, v für vertikal, nb für navbar
'mwrfJqNav', 'JqAniFade', 'true' <= Fadeanimation
'mwrfJqNav', 'JqAniSlide', 'true' <= Slideanimation
'mwrfJqNav', 'JqAniDelay', '500' <= Verzögerung bei Mouseover
'mwrfJqNav', 'JqAniSpeed', 'normal' <= Animationsgeschwindigkeit
'mwrfJqNav', 'JqAniDropShadow', 'true' <= Schatten
'mwrfJqNav', 'JqAniAutoArrows', 'true' <= Pfeile anzeigen
'mwrfJqNav', 'JqAniMinWidth', 8 <= minimale Breite der Untermenüs in em 
'mwrfJqNav', 'JqAniMaxWidth', 20 <= maximale Breite der Untermenüs in em 

Ein Beispiel in anwendung ist unter anderem hier:
http://www.werbeagentur-usedom.de
http://conmods.ralf-fleischer.de/cms/fr ... =44&lang=1

Das Modul inkl. dazugehörigen Dateien ist hier in der Dateianlage hinterlegt.

Installation:
Die Dateien in das dementsprechende Verzeichnis des Mandanten kopieren (css, js, images).
Modul aus dem Ordner modul inportieren.
Modul ins Template einbinden und dann über die Mandanteneinstellungen konfigurieren.

Schöne Grüße von Usedom
Ralf

[20082009]

Hi,
endlich Superfish als Modul. Klasse!!!

Wie bleibt der ausgewählte Menüpunkt als aktiv gekennzeichnet?

Gruß

[yodatortenboxer]

Hallo,

endlich Superfish als Modul. Klasse!!!

Kein Problem. Ich hatte es schon paar Jahre

Der Aktiv-Pfad müsste glaub ich, so aus dem Kopf, per CSS die li

class="active"

sein.

Gruß Ralf

[20082009]

HI,
danke.

[20082009]

Hallo,
ich habe dein Modul hier im Einsatz:
http://www.aabach-papier.ch/cms/front_c ... p?idcat=35

Darunter ist ein weiteres JQuery Plugin.

Damit beide überhaupt funktionieren, musste ich in der superfish.js den non conflict "fetzen" einbauen.
Beide JQuerys funktionieren jetzt. Allerdings spricht dein Modul weder auf die Mandanteneinstellungn, noch auf die Standardeinstellungen im Modul selbst mehr an. Hast du ne Idee was ich machen kann?

Würge mir hier schon zig Stunden einen ab.

Ich möchte die Unternavipunkte breiter und schmäler haben..... mehr nicht.

Würde mich über Hilfe sehr freuen.

DANKE!!!

[stefkey]

Hallo,

bin über die dhtml-navi hier gelandet. Ich habe dein Modul als alternative für die vpnavigation eingebaut weil ich hier die Navigationstiefe einstellen kann. Es sollen nämlich nur die ersten beiden Ebenen ausgegeben werden. Die vpnavigation kann das nur per css (weitere Ebenen einfach ausblenden), jedoch ist das nicht barrierefrei.
DANKE zuerst einmal für die Veröffentlichung!

Folgendes Problemchen:
Die 2. Ebene soll eingeblendet bleiben sobald ein Punkt daraus geklickt wurde. Es müsste doch per CSS möglich sein, ich finde mich aber nicht zurecht... Ich habe es mit

Code: Alles auswählen

}
.sf-menu li:active {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}

probiert, jedoch ohne Erfolg. Kannst du mir ein Tip geben wie ich das realisieren kann?



EDIT:
hmmm, wenn ich im Browser Javascript deaktiviere kann ich mit top:0 etwas verändern. Müsste ich vielleicht auch die Javascript Datei etwas anpassen?
ohje... da komm ich ja weniger mit zurecht. Kannst du mir sagen wo ich suchen muss?

[yodatortenboxer]

Hallo stefkey,

Die 2. Ebene soll eingeblendet bleiben sobald ein Punkt daraus geklickt wurde. Es müsste doch per CSS möglich sein, ich finde mich aber nicht zurecht...

Installier dir einmal Firebug im Firefox.
Damit kannst du wunderbar im CSS herumprobieren.
Im Quelltext findest du ja die kompletten Listenelemente. Beispiel:

Code: Alles auswählen

<ul id="MenuBar1" class="sf-menu">
    <li id="idcat_9" class="passiv">
      <a class="MenuBarItemSubmenu" href="">Angebote</a>
      <ul>
            <li id="idcat_49" class="passiv">
                  <a href="">Visitenkarten</a>
            </li>
            <li id="idcat_54" class="passiv">
                  <a href="">Flyerdruck</a>
            </li>
      </ul>...

Die Liste wird also komplett ausgegeben und nur per Javascript im CSS verändert.

Im Firebug findet man dann bei der Liste der zweiten Ebene zum Beispiel folgende CSS:

Code: Alles auswählen

element.style {
    display: none;
    float: none;
    visibility: hidden;
    width: 9.08333em;
}
.sf-menu ul {
    position: absolute;
    top: -999em;
    width: 10em;
}

Hier wird also die zweite ebene auf nicht sichtbar und durch top -999em nach oben aus der Ansicht verschoben.
Stell ich bei mir das oben stehende CSS per Firebug wie folgt um:

Code: Alles auswählen

element.style {
    float: none;
    width: 9.08333em;
}
.sf-menu ul {
    position: absolute;
    top: 20em;
    width: 10em;
}

habe ich die zweite Ebene sichtbar.

Soviel zur Theorie.
Die "element.style" sind per Javascript hintzugefügt und die .sf-menu ul steht in der CSS-Datei.
Eine Anpassung kann also nun verschiedene wege haben.
Man könnte zusätzliche ID in den ul vergeben und dann per CSS diese formatieren.
Man könnte das Javascript anpassen und damit das CSS anpassen.
Man könnte zusätzlich per Javascript das CSS anpassen.

Gruß Ralf

[MakD42]

Hallo auch von mir,

sehr schönes Modul - im FF! Im IE 9 (8+7) ist das Menü immer auf der linken Seite am Rand.
Hat jemand eine Idee wie ich das umstellen kann!

[yodatortenboxer]

Hallo,

Im IE 9 (8+7) ist das Menü immer auf der linken Seite am Rand.

Hast du da vieleicht zufällig einen Link zum nachschauen?
Aktuell würde ich auf CSS-Fehler/Einstellungen tippen.

Gruß Ralf

[MakD42]

Hallo Ralf,

ja einen Link habe ich. (seite ist noch öffentlich zugänglich)
http://www.maulbronner-kammerchor.de/cm ... ?idart=274

[yodatortenboxer]

Hallo,

der IE verarbeitet deinen CSS-Aufbau anders als der FF und das Problem kommt von deinen CSS-Definitionen.
Da wirst du wohl an den CSS einige anpassungen für den IE machen müssten.
Welche das genau sin, kann ich dir so leider nicht sagen.
Durch die IE interpretation kommt die Navi scheinbar nicht mit deinem body width zurecht.
Gebe ich zum Beispiel deinem div pfad noch ein position relativ mit, ist das untermenü nicht mehr links am original body rahmen, sondern am linken Layoutrahmen.
Nun müsste man hier halt immer weiter probieren, da durch das position relativ alle Untermenüs links am Layout sind.
Dies kann aber nun dadurch kommen, das ich die Veränderungen nur über das Webdev vom IE probiert habe, und superfish die Posotionen über Javascript dann nicht noch einmal ausließt.

Ich würde also das CSS anpassen und probieren und dann weiter anpassen.

Das es zentriert im IE und FF geht siehst du an meiner Seite.
Hier habe ich das selbe Script hinterlegt, nur der Layoutaufbau ist komplett anders.
Du zentrierst sehr viel über "auto" wobei ich bei mir alles per definition fest gelegt habe.

Gruß Ralf

[Spider IT]

Datei superfish.css Zeile 29+

Code: Alles auswählen

left: 0;

ersetzen durch

Code: Alles auswählen

margin-left: 0;

(oder entfernen).
Das sollte helfen denke ich, denn für den IE ist left bei position: absolute; immer der linke Bildschirmrand, während margin-left eine Verschiebung ab der aktuellen Position im umgebenden Bereich ist.

Gruß
René

[MakD42]

Hallo SpiderIT

hab herzlichen Dank - das wars schon!

Grüße aus Marburg

[MakD42]

Hallo René,

tolles Modul. Meine Frage - wie kann ich geschützte Seiten ausblenden? Zur zeit werden alle Seiten angezeigt - auch die, welche erste nach einem LogIn zu sehen sein sollten.
Freue mich auf deine Ausführungen.

[yodatortenboxer]

Hallo MakD 42,

Hallo René,

tolles Modul. Meine Frage - wie kann ich geschützte Seiten ausblenden?

Danke erst einmal fürs bedanken

Da muss dementsprechend noch die Datenbankabfrage an die aktuelle Contenidoversion angepasst werden.
Zeile 114:

Code: Alles auswählen

        $sql = "SELECT
                     A.idcat,
                     A.level,
                     B.parentid,
                     C.name
                   FROM
                     ".$cfg["tab"]["cat_tree"]." AS A,
                     ".$cfg["tab"]["cat"]." AS B,
                     ".$cfg["tab"]["cat_lang"]." AS C
                   WHERE
                     A.idcat     = B.idcat   AND
                     B.idcat     = C.idcat   AND
                     B.idclient  = '$client' AND
                     C.idlang    = '$lang'   AND
                     C.visible   = '1'       AND
                     A.level     <=  $Level  AND             
                     B.parentid  = '$cat'
                  ORDER BY
                     A.idtree";

Hier müsste noch das Feld public abgefragt werden.
Also ein

Code: Alles auswählen

C.public    = '1'       AND

Damit würde es ausgeblendet werden.
Nun muss man aber bestimmt noch abfragen unter welchen Benutzer es wieder nach dem Login eingeblendet werden soll.

Gruß Ralf