Ich kämpfe auch manchmal mit Autonavs :-)

Einer der Gründe für die schlechte "stylebarkeit" ist, dass die Classes und IDs, welche das c5-autonav verwendet, teils abweichen von den "üblichen" navs.

Jordan Lev hat hier ein tolles Nav-Template geschrieben, in dem sich die Definitionen mittels PHP-Code ändern lassen, um in einer vorhandenen CSS zu funktionieren. Hier der Link mit Anleitung:

http://c5blog.jordanlev.com/blog/2011/12/customizing-the-autonav-template/

Mahlzeit Wombat,

vielen Dank für den Link. Ich schaue mir die Anleitung mal an und werde berichten, ob es geklappt hat :)

Grüße

Also um für "Suchende" hier kurz abzukürzen:

Es gibt drei Möglichkeiten, ein c5-Nav in eine bestehende CSS-Optik einzufügen:


1. concrete5-autonav "zerlegen" und die classes und id's an diejenigen anpassen, welche im vorhandenen CSS benutzt werden

2. das template von JordanLev verwenden um diese Aufgabe etwas einfacher zu bewältigen

3. Die Klassen und IDs des vorhandenen CSS Stylings denjenigen der c5-autonav anzupassen

Dies alles ist nur möglich, wenn das CSS die gleiche Art und Weise benutzt, die Navigation zu bauen, wie das c5-autonav das macht, und zwar mit unordererd lists (ul li /li /ul). Wenn das CSS für eine völlig andere Bauweise (z.B. ol /ol) gemacht ist, muss man es quasi neu schreiben.

Hier findet Ihr z.B. ein CSS-Skelett für ein Dropdown-Menü auf Basis des C5-autonavs: autonav dropdown css, welches ihr dann durch übernahme der gewünschten Styles recht leicht umsetzen könnt.

Viel Spaß :)

Testen, probieren, viel lesen und tüfteln ... trotz dem Template von Jordanlev bin ich mit meinem Auto-Nav noch zu keinem Ergebnis gekommen :-(

Es ist einfach schwierig, wenn man nicht weiß, wo man anfangen soll. Zumindest habe ich es geschafft, dass das Hauptmenü so aussieht wie gewünscht - aber ein DropDown wird beim Mouseover nicht angezeigt.

Und schon entstehen die Fragen:
Liegt das an meinen Einstellungen Auto-Nav?
Wie wird das navi.js über das neue Auto-Nav Template aufgerufen?
Muss ich noch weitere Definitionen im Jordanlev Template vornehmen?

So sieht das geünschte Navi CSS aus:


Das Jordanlev Template habe ich lediglich um die oe_menu im html Markup ergänzt:
[php]foreach ($navItems as $ni) {
$classes = array();

if ($ni->isCurrent) {
//class for the page currently being viewed
$classes[] = 'nav-selected';
}

if ($ni->inPath) {
//class for parent items of the page currently being viewed
$classes[] = 'nav-path-selected';
}

/*
if ($ni->isFirst) {
//class for the first item in each menu section (first top-level item, and first item of each dropdown sub-menu)
$classes[] = 'nav-first';
}
*/

/*
if ($ni->isLast) {
//class for the last item in each menu section (last top-level item, and last item of each dropdown sub-menu)
$classes[] = 'nav-last';
}
*/


if ($ni->hasSubmenu) {
//class for items that have dropdown sub-menus
$classes[] = 'nav-dropdown';
}


/*
if (!empty($ni->attrClass)) {
//class that can be set by end-user via the 'nav_item_class' custom page attribute
$classes[] = $ni->attrClass;
}
*/

/*
if ($ni->isHome) {
//home page
$classes[] = 'nav-home';
}
*/

/*
//unique class for every single menu item
$classes[] = 'nav-item-' . $ni->cID;
*/

//Put all classes together into one space-separated string
$ni->classes = implode(" ", $classes);
}

/******************************************************************************
* DESIGNERS: CUSTOMIZE THE HTML STARTING HERE...
*/

echo '<ul class="oe_menu">'; //opens the top-level menu

foreach ($navItems as $ni) {

echo '<li class="' . $ni->classes . '">'; //opens a nav item

if ($ni->isEnabled) {
echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $ni->name . '</a>';
} else {
echo '<span class="' . $ni->classes . '">' . $ni->name . '</span>';
}

if ($ni->hasSubmenu) {
echo '<ul>'; //opens a dropdown sub-menu
} else {
echo '</li>'; //closes a nav item
echo str_repeat('</ul></li>', $ni->subDepth); //closes dropdown sub-menu(s) and their top-level nav item(s)
}
}

echo '</ul>'; //closes the top-level menu[/php]

Ich steh auf dem Schlauch und bin so langsam mit meinen Ideen am Ende ... :huh: ---> Es fehlt einfach eine Anleitung für "Noobs" :D

Vielleicht hat mir ja jemand einen Tipp!

Danke schon mal.

Grüße
nulpe

Ok, wenn Du schon die oberste Ebene hast, ist ja korrekt ge "htmlt", jetzt liegt natürlich die Frage nahe, ob das JS funktioniert, wenn es hier ein eigenes Script ist (nav.js), dann muss dies in header.php eingefügt sein, bestenfalls direkt bei den CSS-Referenzen und die .js - Dateien sollten natürlich an der richtigen Stelle im Verzeichnis liegen (normal: /themes/deintheme/js ) und entsprechend mit PHP-Referenz aufgerufen werden.

Das einzige "Problem" sind hier die c5-Typischen Benennungen von Klassen und IDs.

Mit diesem CSS-Block ( http://www.concrete5.org/documentation/how-tos/designers/how-to-make-an-easy-dropdown-menu/ ) kann man eigentlich auch ganz gut umgehen, wenn man mal ausgeknobelt hat, welcher Tag was ist, dann muss man eig. nur via copy&paste die richtigen zeilen an die richtige stelle fügen.

Benutzt Du Firebug für Firefox oder die Entwickler-Tools von GoogleChrome? Da solltest Du sehen, welche Klassen, Javascripts etc. wann aufgerufen werden und wo eventuell Fehler bestehen.

Viel Glück :)

Guten Morgen Wombat,

vielen Dank für deine Rückmeldung! Es freut mich zu lesen, dass ich richtig ge"htmlt" habe :-)

Es gibt eine .js - habe gestern Nachmittag auch vermutet, dass ich diese irgendwo falsch eingebunden habe. Anhand einer Anleitung von Remo Laubacher Anleitung Laubacher habe ich mich weiter an der Implementierung der Navi sowie .js gearbeitet, mit dem Ergebnis, dass in der Edit Bar die Menüpunkte nicht mehr sichtbar waren und die Navi trotzdem nicht funktioniert hat :-)

Jetzt gehe ich deinem Vorschlag nach, die js in die header.php einzubauen - da ist nur meine Frage: wie wird das .js von der Navi aufgerufen (wo baue ich diesen Befehl ein)? ... ich werde mich mal daran machen :-)

nochmals Danke und ich gebe Rückmeldung, ob es geklappt hat :-)

Schönen Tag & Grüße

Guten Morgen,

ich habe mit "Navigationsproblem" gelöst und zwar gemäß dem Motto: "viele Wege führen nach ..." :-)

Den begonnenen Weg habe ich verlassen und folgenden eingeschlagen: Nimm die Anleitung von Remo Laubacher (s.o.) implementiere das sooperfish Menü und baue es um, so dass das Ergebnis deinen angestrebten Menüvorstellungen entspricht - und siehe da es hat geklappt. Einziger Knackpunkt war herauszufinden, dass ich dem Main <ul> in der view.php sowohl die entsprechende id als auch class zu geben :-)

Now it works :-)

Danke nochmals für eure (Wombats) Unterstützung.

Grüße
nulpe

Hervorragend!

Du meinst dieses Tutorial hier:
Remo Laubacher Superfish Tutorial

Dann mal schön verlinken damits für weitere Hilfesuchende gefunden wird :-)