jQuery Superfish funktioniert nicht richtig...

Hallo, ich habe gerade unter Contao 3.0.0 die Superfish-extension installiert und alle Schritte beachtet die angegeben waren. So jetzt habe ich das Problem, das sich durch die Standardkonfiguration des Menüs optisch nicht ändert. Ich bin jetzt davon ausgegangen das ich einfach die CSS im Filesordner anpassen muss und fertig. Aber nichts!

Ich habe:

• im Layout Superfisch angekreuzt
• ein modul mit richtigem (horrizontalem) Template erstellt
• das Modul eingebunden
• unterseiten erstellt

Aber leider kann ich den Fehler nicht finden.
Hat da jemand schon erfahrung gesammelt?
Gruß Stefan

Bin gerade dabei das anzuprobieren. Also der Dropdown hat funktioniert, nur waren die Menü-Punkte inner Vertical untereinander, obwohl ich horizontal im Template gewählt hatte - kann aber auch sein, dass es am CSS lag (wohl sehr wahrscheinlich).

Achso, optisch tat sich bei mir afaik auch nix.

Werde aber erstmal noch ein selbstgestricktes CSS3-Menu vorziehen. Falls das meinen Anforderungen dann nicht entspricht, mache ich mit Superfish weiter.

Danke für die Antwort. Ja bei mir dropt noch gar nix. Sieht aus als wär das default Template geladen....
Ich werde mal weiterprobieren. Hat vllt jemand anders noch eine Lösung?
Gruß

Ich... habe einfach nur vergessen auch das css einzubinden. Ich dachte das wird über die Extension gesteuert. Somit hat sich mein Problem erledigt. Danke!

Kann das sein das die Javascript Dateien nicht eingebunden werden? Es "dropt" zwar, aber das war es auch. Vielleicht könnte das mal jemand gegenchecken?

Genau das selbe Problem habe ich grad...
CSS funktioniert aber der Effekt eben nicht. Ich hab im Layout auch andere Klasseneinstellungen probiert, aber nix! Gibt's da eine Lösung?
Gruß

Ich habe die JS-Dateien über das Layout eingebunden und die Einstellungen festgelegt.
Das "Enable Superfish" kann man sich allerdings auch direkt sparen.

Im Moment ist die Erweiterung nicht "out-of-the-box" nutzbar.

Ich kam mit dieser Erweiterung auch nicht klar... habe nun in Contao 3 folgendes Script benutzt:

http://www.toddmotto.com/html5-and-j...-drop-down-nav

Lässt sich superschnell in Contao einbauen. Kann es nur empfehlen :-)

LG,
Dirk

Hallo,

Zitat:

---

Zitat von Stefan Brem

• im Layout Superfisch angekreuzt
• ein modul mit richtigem (horrizontalem) Template erstellt
• das Modul eingebunden
• unterseiten erstellt

---

Und jQuery ?

Kannst du mir ein URL senden ?

Jap richtig. Habe alle Schritte erledigt. CSS Dropdownmenü funktioniert, nur die js Animation geht nicht. Meine Vermutung sind die klassenangaben im Backend. Wenn ich daheim bin werde ich am PC mal Screenshots machen.
Einen link habe ich noch nicht, da ich Local arbeite. Morgen kann ich das mal hochladen. Danke schon mal. Gruß Stefan

Also bei mir fehlte auch die Animation ... anscheinend bindet das Modul die benötigten JS-Dateien nicht richtig ein.

Hab es nun manuell eingebunden gemacht und es läuft.

Hallo liebe Leute,

ich habe da auch ein "kleines" Problem mit der Erweiterung.
Im Prinzip läuft ja alles, nur klappt das Menü nicht komplett aus, siehe Screenshot.

Anhang 9951

Habe ich bei der Einbindung etwas grundsätzliches vergessen? Gibt es dazu irgend wo ein Howto?
Ich habe das Menü schon in der Kopfzeile und in der Hauptspalte eingebunden, es ist immer das Gleiche.

Ist mir noch zu helfen?

Danke schon mal im Voraus,
Gustav, der ganz neu ist...

Hallo,

Es ist ein "Problem" mit .block

Code:

---

<nav class="mod_navigation block">

---

Du kannst ändern...

Code:

---

.block {
    overflow: hidden;
}

---

mit :

Code:

---

.block {
    overflow: visible;
}

---

Hallo Lionel,

das war's, vielen Dank für die Hilfe.

Gruß Gustav

mj1985

Ich habe die JS-Dateien über das Layout eingebunden und die Einstellungen festgelegt.
Das "Enable Superfish" kann man sich allerdings auch direkt sparen.

Im Moment ist die Erweiterung nicht "out-of-the-box" nutzbar.

hallo mj1985

kannst du vielleicht kurz beschreiben, wie du die js dateien einbindest? sind da die drei dateien
aus dem system/modules/superfish/assets/js Ordner ?

<script src="system/modules/superfish/assets/js/superfish.js"></script>
<script src="system/modules/superfish/assets/js/hoverIntent.js"></script>
<script src="system/modules/superfish/assets/js/supersubs.js"></script>

und was meinst du mit Einstellungen festlegen?
sind das die einstellungen im im layout bei superfish enable und was muss da rein?
bei mir geht eben auch die animation nicht, obwohl ich die js im head eingebunden habe...
www.manoelo.de/elo3
hab noch unter den scripten
<script>

$(document).ready(function(){
$("ul.sf-menu").superfish();
});

</script>
eingefügt zur initalisierung .... läuft soweit

grüße elo

Hallo,

@manoelo, @mj1985

Es gibt eine Änderung mit der Version 3.0.0 dass ich nicht gesehen habe...
Ich werde die Korrektur jetzt machen.

Sorry !

UP : Ok mit Superfish 2.1.0 stable build 9

Reicht wenn du

HTML-Code:

---

<script src="system/modules/superfish/assets/js/superfish.js"></script>

---

Einfügst und dann noch den Aufruf im Layout unter javascript:

Code:

---

// initialise Superfish
<script>

        $(document).ready(function(){
                $("ul.sf-menu").superfish();
        });

</script>

---

Das natürlich noch an deine Klassen/IDs anpassen.
Das "Enable Superfish" brauchst du nicht anhaken, es macht keinen Unterschied.

Ich habe Superfish und die Erweiterung nach mehreren Versuchen nicht mehr benutzt,
da ich nicht mein gewünschtes Resultat erzielen konnte.
Aktuell nutze ich ein simples Dropdown über jQuery.

Zitat:

---

Das "Enable Superfish" brauchst du nicht anhaken, es macht keinen Unterschied.

---

Es was das Problem aber jetzt es ist korrigiert.

Top Extension funktioniert super! Danke für den Bugfix. Gruß Stefan :D

Zitat:

---

Zitat von lionel

Hallo,

Es ist ein "Problem" mit .block

Code:

---

<nav class="mod_navigation block">

---

Du kannst ändern...

Code:

---

.block {
    overflow: hidden;
}

---

mit :

Code:

---

.block {
    overflow: visible;
}

---

---

Trotz dieser Änderung funktioniert es nicht:
Firefox, Chrome: Submenüs werden abgeschnitten.
IE7, IE8, IE9: Submenüs verschwinden bei MouseOut Level_1 und sind hinter dem Content
Beispiel: http://www.fitness-heuchelheim.de/index.php

Doch das funktioniert, hab es eben mit Firebug auf der Seite getestet.

Ich würde nicht unbedingt die Klasse .block ändern, da die ja an vielen Stellen vorkommt und evtl. ist es nicht gewollt das übergreifend für alle möglichen Elemente zu ändern - ist aber nur meine Vorgehensweise ;-)

Du hast doch dort die id namens "navDropdown" . Gib der doch overflow:visible;

Nachtrag
#header .inside{
z-index:999;
}
hilft falls das menü unter den Text im Content rutscht

LG
Bennie

Ich habe jetzt navDropdown overflow:visible gegeben. Jetzt funktioniert es, aber nicht im IE7 da sind die Submenüs immer noch hinter dem Content.

siehe mein Nachtrag - probier das mal bitte

Zitat:

---

Zitat von Bennie

siehe mein Nachtrag - probier das mal bitte

---

Habe ich, bringt aber nichts. Brint es eigentlich was einen z-index zusetzen ohne ein postion:absolute?

Nachtrag. Ich habe es!!

Ich habe den Container in dem sich die Navigation befindet auf position:relative und z-index:999 gesetzt. Jetzt funktioniert es im IE 7 ebenfalls. Allerdings habe ich dies mit .ie7 als extra Style angelegt, denn in den anderen Browser funktioniert es ja ohne dies. Also für diejenigen mit dem gleichen Problem:

Code:

---

#navcontainer {
overflow:visible;
}

.ie7 #containername (in dem sich der navcontainer befindet) {
position:relative;
z-index:999;
}

---

Nachtrag zur Erweiterung:
Der Entwickler sollte aber diese Fehler noch beheben. Es gibt viele die diese Erweiterung installieren auf Contao 3, und es kann nicht sein das man dann noch so viel nachbessern muss. Wenn dies nicht geändert werden kann, dann sollte man dies einfach in die Anleitung schreiben.

Ah ja stimmt, so ist es richtig. Tja der IE - die Schrift des Ausklappmenüs sieht auch etwas anders aus als im FF - ist da "opacity" im Spiel? Führt leider auch immer wieder zu solchen Effekten bei JS basierten Menüs.
Aber ich denke damit kann man leben - Ehrlich gesagt ist auch egal , Hauptsache die Seite ist benutzbar mit IE < 9 - alles andere ist Aufwand den man nur auf explizite Anfrage treiben sollte.

Noch zu Deinem Nachtrag:
Dieses Problem hat man aber sehr häufig auch mit anderen Menüs die man übernimmt und an Contao anpasst.
Es ist ja kein Fehler der Erweiterung im eigentlichen Sinne.
Das sind dann eher unsere CSS Kenntnisse die fehlen oder nicht angewendet werden. Ich stolpere auch immer mal wieder darüber, aber inzwischen kennt man halt die "Verdächtigen" ;-)

Zur Schriftanpassung und Optik komme ich später, denn erstmal muss die Funktion einwandfrei stehen :)

Also nochmals Vielen Dank !

Deine Aussage in dem anderen Thread, das Ding sei voller Fehler ist also widerlegt, wäre nett das dort zu ändern. Ansonsten - bitte gern - :)

Hallo,

also bei mir reagiert die Navi überhaupt nicht...

Wollte die horizontale Variante einsetzen.
Im Seitenlayout sind jQuery sowie 'enable Superfish' aktiviert.

Die nötigen css's sind dort auch eingebunden.

Allerdings verhält sich das Menü wie ein 'Bild', Keine Aktion/Reaktion bei Klick auf den Link (Im Seitenquelltext ist der Link korrekt vorhanden).
Achja, ich möchte das Menü für mobile Endgeräte verwenden und habe es auf einem Galaxy sowie über den Browser mittels toggle_view getestet.

Hat jemand spontan eine Idee, was ich da noch falsch mache?

Contao-Version: 3.0.1
Superfish-Version: 2.3.0

Viele Grüße
Mavnet

Hallo,

Sie müssen noch der Standard-Vorlage (nav_default) mit "nav_superfish_horizontal" ersetzen. (Modul Navigationsmenü)

Hallo,

auch das habe ich gemacht ....
Leider kein Ergebnis.

Sieht so aus, als ob es gar nicht richtig aktiv wäre....

Zitat:

---

Allerdings verhält sich das Menü wie ein 'Bild', Keine Aktion/Reaktion bei Klick auf den Link (Im Seitenquelltext ist der Link korrekt vorhanden).

---

Nur mit den CSS-Dateien Sie können das Menü benützen. Es bedeutet, dass jQuery und das Skript nicht erforderlich sind. Also das Problem ist anders...

Wenn Sie einen Link haben, ich könnte besser helfen. Per PN oder hier.

Sonst der Quellcode der Seite.

Hallo,

hier der Quelltext:

HTML-Code:

---


<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>xxx</title>
<base href="http://xxx.de/">
<meta name="robots" content="index,follow">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="generator" content="Contao Open Source CMS">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>#header{height:5%}#footer{height:5%}</style>
<link rel="stylesheet" href="system/modules/dlh_googlemaps/html/dlh_googlemaps.css">
<link rel="stylesheet" href="assets/css/54aaa4b52561.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="icon" type="image/vnd.microsoft.icon" href="http://xxx.de/favicon.ico" />
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://xxx.de/favicon.ico" />
<script src="system/modules/superfish/assets/js/superfish.js"></script>
<!--[if lt IE 9]><script src="assets/html5shiv/3.6.1/html5shiv.js"></script><![endif]-->
</head>
<body id="top" class="win chrome webkit ch26">

<div id="wrapper">

<header id="header">
<div class="inside">

<!-- indexer::stop -->
<nav class="mod_customnav block">

<a href="#skipNavigation67" class="invisible">Navigation überspringen</a>

<ul class="level_1 sf-menu">
<li class="active active first"><span class="active active first">Home</span></li>
<li><a href="Galerie.html" title="Galerie">Galerie</a></li>
<li class="last"><a href="Behandlungen.html" title="Behandlungen" class="last">Behandlungen</a></li>
</ul>

<a id="skipNavigation67" class="invisible">&nbsp;</a>

</nav>
<!-- indexer::continue -->
 
</div>
</header>

<div id="container">

<div id="main">
<div class="inside">

<div class="mod_article block" id="willkommen">

<div class="ce_text block">

<div>Willkommen bei xxx,</div>
<div>&nbsp;</div>
<div>Ihrem Nagelstudio </div>


<div class="ce_image willkommen_bild block">

<figure class="image_container">
<img src="files/xxx/images/mobile_logo.jpg" width="378" height="317" alt="">
</figure>

</div>

<!--[if lt IE 9]>

<div id="drei_bilder_ie">


<div id="bild1"></div>
<div id="bild2"></div>
<div id="bild3"></div>





</div>

<!--<![endif]-->
<div id="kenburns" class="slideshow">
               
       
</div>
<div id="kenburns2" class="slideshow">
               
       
</div>
<div id="kenburns3" class="slideshow">
               
       
</div>
</div>
 
</div>
 
</div>

</div>

</div>

<script src="assets/jquery/ui/1.9.1/jquery-ui.min.js"></script>
<script>
(function($) {
  $(document).ready(function() {
    $(document).accordion({
      // Put custom options here
      autoHeight: false,
      header:'div.toggler'
    });
    var activate = function(tog) {
      var tgs = $('div.toggler');
      tgs.removeClass('active');
      tog.addClass('active');
      tgs.next('div.accordion').attr('aria-hidden', 'true');
      tog.next('div.accordion').attr('aria-hidden', 'false');
    }
    $('div.toggler').focus(function(e) {
      $('div.toggler').attr('tabindex', 0);
      $(this).attr('tabindex', -1);
    }).blur(function() {
      $(this).attr('tabindex', 0);
    }).click(function() {
      activate($(this));
    }).keypress(function(event) {
      if (event.keyCode == 13) activate($(this));
    });
  });
})(jQuery);
</script>

<script src="assets/jquery/colorbox/1.3.20/js/colorbox.min.js"></script>
<script>
(function($) {
  $(document).ready(function() {
    $('a[data-lightbox]').map(function() {
      $(this).colorbox({
        // Put custom options here
        loop:false,
        rel:$(this).attr('data-lightbox')
      });
    });
  });
})(jQuery);
</script>

<script src="assets/jquery/mediaelement/2.9.5/js/mediaelement-and-player.min.js"></script>
<script>
(function($) {
  $(document).ready(function() {
    $('video,audio').mediaelementplayer({
      // Put custom options here
      pluginPath:'/assets/jquery/mediaelement/2.9.5/',
      flashName:'legacy/flashmediaelement.swf',
      silverlightName:'legacy/silverlightmediaelement.xap'
    });
  });
})(jQuery);
</script>

<script src="system/modules/superfish/assets/js/superfish.js"></script>
<script src="system/modules/superfish/assets/js/supersubs.js"></script>
<script>
                    (function($) {
                        $("ul.sf-menu").supersubs({
                                minWidth: 12,
                                maxWidth: 27,
                                extraWidth: 1
                            }).superfish({
hoverClass: 'sfHover',
delay: 200,
speed: 'normal',
speedOut: 'fast' });
                        })(jQuery);
                </script>

<script>

        jQuery(document).ready(function() {
                jQuery('ul.sf-menu').superfish();
        });

</script>

<script src="assets/contao/js/scheduler.js?t=86400" id="cron"></script>

</body>
</html>














---

Hallo,

Ich sehe ein Problem im head-Tag. Dieser Code muss nicht da sein.

HTML-Code:

---

<script src="system/modules/superfish/assets/js/superfish.js"></script>

---

Auch im body-Tag, muss diesen Code nicht da sein :

HTML-Code:

---

<script>

        jQuery(document).ready(function() {
                jQuery('ul.sf-menu').superfish();
        });

</script>

---

Haben Sie diesen Code zu dem Seitenlayout hinzugefügt ?

Die Erweiterung zeigt nur diesen Code an :

HTML-Code:

---

<script src="system/modules/superfish/assets/js/superfish.js"></script>
<script src="system/modules/superfish/assets/js/supersubs.js"></script>
<script>
                    (function($) {
                        $("ul.sf-menu").supersubs({
                                minWidth: 12,
                                maxWidth: 27,
                                extraWidth: 1
                            }).superfish({
hoverClass: 'sfHover',
delay: 200,
speed: 'normal',
speedOut: 'fast' });
                        })(jQuery);
                </script>

---

Das Skript kann nicht richtig funktionieren, wenn es zweimal geladen ist.

Hallo,

ja, diese Codes habe ich manuell hinzugefügt, weil ich den Eindruck / die Vermutung habe, dass die benötigten *.js Dateien nicht korrekt geladen werden.

Auch wenn ich das manuell hinzufüge, funktioniert das Superfish-Menü nicht.
Nur als Hinweis: Ich habe es nicht in einer normalen Browser Version ausprobiert, sondern "nur" für mobile Endgeräte.

Hallo,

Zitat:

---

Zitat von mavnet

Ja, diese Codes habe ich manuell hinzugefügt, weil ich den Eindruck / die Vermutung habe, dass die benötigten *.js Dateien nicht korrekt geladen werden.

---

In diesem Fall, bitte löschen weil die Dateien korrekt geladen sind.

Zitat:

---

Zitat von mavnet

Nur als Hinweis: Ich habe es nicht in einer normalen Browser Version ausprobiert, sondern "nur" für mobile Endgeräte.

---

Ok... Es wäre super, wenn Sie auf einem Computer testen können, um zu sehen, ob es ein Problem mit der Erweiterung oder Superfish mit einem Handy ist.

Die Anpassung des Codes für Handys ist relativ neu mit Superfish...

Zitat:

---

Superfish is dedicated to keeping dropdown/flyout menus accessible across browsers great and small, in addition to adding support for newer touch devices (running Android, iOS, Windows, etc).

---

Ref. : https://github.com/joeldbirch/superfish

Hi,

unter normalen Voraussetzungen, also nicht mobile funktioniert alles perfekt.

Viele Grüße

Zitat:

---

Zitat von dirksche

Ich kam mit dieser Erweiterung auch nicht klar... habe nun in Contao 3 folgendes Script benutzt:

http://www.toddmotto.com/html5-and-j...-drop-down-nav

Lässt sich superschnell in Contao einbauen. Kann es nur empfehlen :-)

LG,
Dirk

---

Wie baut man das denn genau ein?

Und weißt Du, ob das Menü auch ganz vertikal funktioniert, also:
NAV 1
-- Subnav 1.1
-- Subnav 1.2
NAV 2
-- Subnav 2.1
-- Subnav 2.2