mod_navigation für flexnav

Hallo!

möchte Flexnav in Contao 3.1 einbauen. Leider fehlts mal wieder an PHP-Kenntnissen um das Template anzupassen, wie oft.

Hier die Ergänzungen im Layout:

eigene Headtags:

HTML-Code:

<script type="text/javascript" src="files/theme-ordner/js/jquery.flexnav.min.js"></script>

Aufruf in eigenem Javascript

HTML-Code:

<script> $(".flexnav").flexNav(); </script>

Template angepasst:

PHP-Code:

<ul class="flexnav" data-breakpoint="800"> <?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']; ?>><?php echo $item['link']; ?></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>

Problem: das modifizierte Template übergibt die Klassen class="flexnav" data-breakpoint="800" an jede ul, auch an die sub ul´s, was stört und auch so nicht gedacht ist, denke ich.

FRAGE

Ist es grundsätzlich möglich Flexnav mit Contao zu verwenden?
Kann man die Weitergabe der Klassen an die Sub UL´s (ich nenn das jetzt einfach mal so) übers Template verhindern?

Merci für eine Antwort.

keine ahnung ob es funktioniert, aber anstatt das nav-template anzupassen, könntest du ja einfach class und attribut per jQuery hinzufügen.

Code:

$("ul.level_1").addClass("flexnav"); $("ul.level_1").attr("data-breakpoint","800");$(".flexnav").flexNav();

Lösung

Also vorläufig klappts jetzt:

Contao 3.1.2

Layout:

Head-Tags:

Code:

<script type="text/javascript" src="files/theme-ordner/js/jquery.flexnav.min.js"></script>

eigenes Javascript:

Code:

<script> $("ul.level_1").addClass("flexnav"); $("ul.level_1").attr("data-breakpoint","800"); $(".flexnav").flexNav(); </script>

Template:

PHP-Code:

<ul class="<?php echo $this->level; ?>"> <?php foreach ($this->items as $item): ?> <?php if ($item['isActive']): ?> <li class="<?php echo $item['class']; ?>"><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 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>

Danke an alle!

Du könntest dein script noch verbessern, um evtl. konflikte mit zB. mootool zu vermeiden.

Code:

<script> (function($) { $(document).ready(function() { $("ul.level_1").addClass("flexnav"); $("ul.level_1").attr("data-breakpoint","800"); $(".flexnav").flexNav(); }); })(jQuery); </script>

Paste - copy - funktioniert. ;) Danke für die Anpassung.

Flicker beim laden der Seiten

Die Navigation wird kurzzeitig ohne flexnav Css angezeigt - woher kommt das? Kann man das abstellen? Ich habe jetzt schon versucht ein Delay mit reinzunehmen, aber das ist ja ja quatsch weil das dann auf jeder Unterseite wirkt.

Film zur Demonstration:

http://youtu.be/EVpIM6lV_6w

Wie immer, herzliches Dankeschön für eine Antwort!

?

Weiß da keiner was? Wonach müsst ich bei Google suchen? :eek:

Ist doch logisch ;)
Die CSS Klasse wird per Javascript hinzugefügt. dieses kann erst ausgeführt werden wenn der DOM geladen ist.

JS entfernen. Eignes nav_template anlegen. CSS Klasse dort einfügen und das Template bei dem entsprechenden Modul auswählen.

Zitat:

Zitat von Zero

Ist doch logisch ;)
Die CSS Klasse wird per Javascript hinzugefügt. dieses kann erst ausgeführt werden wenn der DOM geladen ist.

JS entfernen. Eignes nav_template anlegen. CSS Klasse dort einfügen und das Template bei dem entsprechenden Modul auswählen.

Naja - Es handelt sich bei Flexnav doch um eine JS-basierende Nav - wie funktioniert die, wenn ich das JS entferne?
Kann man die Scripte in Contao anders positionieren, um das Ladeverhalten zu optimieren?

Hallo,

Dieses Tutorial ist interessant.

Und das Skript ist in den Body-Tag (Lösung gegen the Flash of unstyled content)

Code:

<?php // Add the style sheet $GLOBALS['TL_CSS'][] = TL_FILES_URL . 'files/flexnav/flexnav.css||static'; ?> <script src="<?php echo TL_FILES_URL; ?>files/flexnav/jquery.flexnav.min.js"></script> <script> (function($) { $(document).ready(function() { $("ul.level_1").addClass("flexnav"); $("ul.level_1").attr("data-breakpoint","800"); $(".flexnav").flexNav(); }); })(jQuery); </script>

Natürlich können Sie auch, das Skript in den Body-Tag in dem Seitenlayout einfügen...

Flexnav - Navigation wird zuerst ohne CSS geladen

Nein, das funktioniert nicht. Genau das selbe Phänomen. Einmal mittels j_flexnav.html5 eingebunden, und einmal im Body in der fe_page.html5. Wird die flexnav.css zu spät geladen. Woran könnte es liegen? Das kann doch nicht sein, dass contao damit nicht zurecht kommt. Hat noch wer eine Idee?

Anstatt die Klassen mit jquery einzufügen, könnte man folgendes nav-template versuchen

HTML-Code:

<?php if($this->level==level_1): ?> <ul data-breakpoint="800" class="<?php echo $this->level; ?> flexnav"> <?php else: ?> <ul class="<?php echo $this->level; ?>"> <?php endif; ?> <?php foreach ($this->items as $item): ?> <?php if ($item['isActive']): ?> <li class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?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>

das script sieht dann so aus

HTML-Code:

<script> (function($) { $(document).ready(function() { $(".flexnav").flexNav(); }); })(jQuery); </script>

allerdings müsste man dann noch etwas das flexnavi.css anpassen zB:

HTML-Code:

.flexnav li a,.flexnav li span.active { position: relative; display: block; padding: .96em; z-index: 2; overflow: hidden; color: #222222; background: #a6a6a2; border-bottom: 1px solid rgba(0, 0, 0, 0.15); }

habe es nur kurz getestet, aber grundsätzlich passt es (am css müsste man noch etwas rumfummeln).
Achja, den menü-button für kleine displays kann man einfach per eigenem html-modul einfügen.
PS: Habe gerade gemerkt, dass es nicht mit dem layout-builder.css funktioniert (irgendwas ist ja immer)

Zitat:

Zitat von wulf

PS: Habe gerade gemerkt, dass es nicht mit dem layout-builder.css funktioniert (irgendwas ist ja immer)

Was (es?) funktioniert nicht? Was für ein Problem mit dem Layout-Builder gibt es?

Sobald ich das layout-builder.css einbinde, funktioniert das Dropdown-Menu nicht mehr.
Vermutlich einfach nur ein dummes CSS Problem (Dev-Tools zeigen nichts an).
So richtig überzeugend finde ich die Navigation eh nicht, selbst auf der offiziellen Demoseite kommt es mit Chrome zu Fehlern (Submenus bleiben teilweise einfach offen etc.)

Chrome

Ja, ich bin inzwischen auch davon abgekommen. Versuche es jetzt hiermit.

http://responsive-nav.com/

bisher ohne Erfolg, aber was nicht ist....

Danke trotzdem für die Beiträge.