Tutorial: jQuery Dropdown Menü mit Superfish

30. Januar 2009 - jQuery, Tutorials, Webdesign - 57 Kommentare

Tutorial: jQuery Dropdown Menü mit Superfish

Das für mich beste Skript, um dynamische Dropdown-Menüs zu erzeugen, ist das jQuery-Plugin von Joel Birch. Durch zahlreiche Parameter können wir uns das Multi-Level-Menü mit Leichtigkeit in Aussehen und Funktion unseren Anforderungen anpassen. Die Einbindung ist keineswegs schwer.

Auch auf diesem Blog habe ich das Superfish Dropdown-Menü von Joel Birch erfolgreich im Einsatz. Das Menü ist beliebig erweiterbar, es können also unendlich viele Unterebenen dargestellt werden.

IE Problems?
Superfish jQuery Menu IE z-index Bug (English)

Einbindung von Superfish in eine Website:

  • Herunterladen des Skriptes – Superfish
  • Einbinden des Stylesheets und des Javascript-Aufrufes in den Head-Bereich der Website
  • Aufrufen der Superfish-Funktion im Head-Bereich der Website
<link rel='stylesheet' type='text/css' media='screen' href='superfish.css' />
<script type='text/javascript' src='superfish.js'></script>

Bemerkung:
Im Head-Bereich unserer Website binden wir das Stylesheet ein und rufen das Superfish-Javascript auf. Bitte beachten! Der Pfad muss möglicherweise angepasst werden. In obigem Beispiel gehen wir davon aus, dass das Website-Dokument, das Stylesheet und das Javascript auf einer Ordnerebene liegen.

<script type='text/javascript'>
    $(document).ready(function() {
        $('ul.sf-menu').superfish();
    });
</script>

Bemerkung:
Ebenso im Head-Bereich unseres Dokuments rufen wir nun die Superfish-Funktion mittels Javascript auf. Hierbei wird gesagt, dass das Superfish-Menü auf eine ungeordnete Liste ul mit der Klasse .sf-menu angewendet werden soll.

Anpassen der Menü-Parameter:

Wie schon angesprochen, lässt uns Joel Birch bei dem Aufruf der Superfish-Funktion zahlreiche Optionen die Funktionsweise des Dropdown-Menüs zu beeinflussen.

Folgende Parameter stehen uns zur Verfügung:

$.fn.superfish.defaults = {
    hoverClass:    'sfHover',          // the class applied to hovered list items
    pathClass:     'overideThisToUse', // the class you have applied to list items that lead to the current page
    pathLevels:    1,                  // the number of levels of submenus that remain open or are restored using pathClass
    delay:         800,                // the delay in milliseconds that the mouse can remain outside a submenu without it closing
    animation:     {opacity:'show'},   // an object equivalent to first parameter of jQuery’s .animate() method
    speed:         'normal',           // speed of the animation. Equivalent to second parameter of jQuery’s .animate() method
    autoArrows:    true,               // if true, arrow mark-up generated automatically = cleaner source code at expense of initialisation performance
    dropShadows:   true,               // completely disable drop shadows by setting this to false
    disableHI:     false,              // set to true to disable hoverIntent detection
    onInit:        function(){},       // callback function fires once Superfish is initialised – 'this' is the containing ul
    onBeforeShow:  function(){},       // callback function fires just before reveal animation begins – 'this' is the ul about to open
    onShow:        function(){},       // callback function fires once reveal animation completed – 'this' is the opened ul
    onHide:        function(){}        // callback function fires after a sub-menu has closed – 'this' is the ul that just closed
};

Der Aufruf der Superfish-Funktion im Head-Bereich lässt sich nun beispielsweise wie folgt erweitern:

<script type='text/javascript'> 

    $(document).ready(function() {
        $('ul.sf-menu').superfish({
            delay:       1000,                            // one second delay on mouseout
            animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation
            speed:       'fast',                          // faster animation speed
            autoArrows:  false,                           // disable generation of arrow mark-up
            dropShadows: false                            // disable drop shadows
        });
    }); 

</script>

Bemerkung:
Mit diesen Parametern bestimmen wir also, dass das Dropdown eine Sekunde nach Mouseout ausgeblendet, eine leichte Einblendung über Transparenz und ein Slide-Down-Effekt mit schneller Geschwindigkeit haben soll. Außerdem werden keine Pfeile (wenn Unterpunkte vorhanden) angezeigt und kein Menüschatten erzeugt. Ihr seht bereits, was alles mit diesem Skript möglich ist.

Verschiedene Arten des Superfish-Menüs:

Neben den Optionen für Animationen und Geschwindigkeiten gibt es verschiedene Arten des Dropdown-Menüs.

1. Basic Style – horizontales Menü mit Dropdowns:

horizontale Menüleiste mit Dropdowns

horizontale Menüleiste mit Dropdowns

Wie der Name schon sagt, ist der Basic Style die einfachste Form des Superfish-Menüs.

2. Vertical Style – vertikales Menü mit Dropdowns zur Seite:

vertikales Menü mit Dropdowns zur Seite

vertikales Menü mit Dropdowns zur Seite

Um ein vertikales Menü anzuzeigen, brauchen wir lediglich ein zusätzliches Stylesheet einbinden und der ungeordneten Liste ul unseres Menüs mit der Klassen .sf-menu eine weitere Klasse .sf-vertical hinzufügen:

<link rel='stylesheet' type='text/css' media='screen' href='superfish.css' />
<link rel='stylesheet' type='text/css' media='screen' href='superfish-vertical.css' />
<ul id='menu' class='sf-menu sf-vertical'>
    <li><a href='#'>Menu Item</a>
        <ul>
            <li><a href='#'>Submenu Item</a></li>
            <li><a href='#'>Submenu Item</a></li>
            <li><a href='#'>Submenu Item</a></li>
        </ul>
    </li>
    <li><a href='#'>Menu Item</a></li>
    <li><a href='#'>Menu Item</a></li>
</ul>

3. Nav-bar Style – doppelte Menüleiste mit Dropdowns:

doppelte Menüleiste mit Dropdowns

doppelte Menüleiste mit Dropdowns

Der Nav-bar Style ist ebenfalls sehr interessant. Er bietet eine doppelte Menüleiste, bei der ab der dritten Ebene Dropdowns angezeigt werden. Ebenfalls wird der Pfad zur aktuellen Seite im Menü wiedergegeben.

Auch hier muss nur das entsprechende zusätzliche Stylesheet eingebunden werden und die weitere Klasse .sf-navbar an die Liste weitergegeben werden.

<link rel='stylesheet' type='text/css' media='screen' href='superfish.css' />
<link rel='stylesheet' type='text/css' media='screen' href='superfish-navbar.css' />
<ul id='menu' class='sf-menu sf-navbar'>
    <li><a href='#'>Menu Item</a>
        <ul>
            <li><a href='#'>Submenu Item</a></li>
            <li><a href='#'>Submenu Item</a></li>

            <li><a href='#'>Submenu Item</a></li>
        </ul>
    </li>
    <li><a href='#'>Menu Item</a></li>
    <li><a href='#'>Menu Item</a></li>
</ul>

4. with Supersubs – Dropdown-Menü mit extralangen Unterpunkten:

Dropdown-Menü mit extralangen Unterpunkten

Dropdown-Menü mit extralangen Unterpunkten

Die Option Supersubs bietet die Möglichkeit dynamisch auf besonders lange Unterpunkte zu reagieren, um Zeilenumbrüche im Menü zu vermeiden.

Um Supersubs einzubinden, müssen wir ein zusätzliches Javascript integrieren und den Aufruf der Superfish-Funktion etwas erweitern.

<script type='text/javascript' src='superfish.js'></script>
<script type='text/javascript' src='supersubs.js'></script>
<script type='text/javascript'> 

    $(document).ready(function(){
        $('ul.sf-menu').supersubs({
            minWidth:    12,   // minimum width of sub-menus in em units
            maxWidth:    27,   // maximum width of sub-menus in em units
            extraWidth:  1     // extra width can ensure lines don't sometimes turn over
                               // due to slight rounding differences and font-family
        }).superfish();  // call supersubs first, then superfish, so that subs are
                         // not display:none when measuring. Call before initialising
                         // containing tabs for same reason.
    }); 

</script>

Formatierung mit CSS:

Blau ist hübsch, aber nicht jedermanns Sache und nicht immer zum Rest der Website passend. Die Anpassung des Aussehens über CSS ist übersichtlich gestaltet und kann in folgenden Dateien vorgenommen werden:

  • superfish.css
  • superfish-vertical.css (bei Vertical Stlye)
  • superfish-navbar.css (bei Nav-bar Stlye)

Support:

Sollte man Probleme mit der Einbindung und Anwendung von Superfish haben, kann man sich in die jQuery Mailing List eintragen und sein Anliegen dort kundtun.

Sowie Joel etwas Zeit hat, hilft er persönlich weiter, ansonsten tummeln sich dort auch sonstige schlaue jQuery-Köpfe.

Ich selbst hatte letzte Woche ein Problem mit der Einbindung von Superfish in WordPress. Innerhalb eines Tages war das Problem nach einigem Hin- und Her-Gemaile (tolles Wort!) gelöst.

A big big thanks to Joel for awesome support!

Fazit:

Das Superfish jQuery-Dropdown-Menü bringt eine unheimliche Vielfalt an Features mit sich. Wenn man sich auch nur ein wenig mit Einbindung von Skripten und XHTML/CSS auskennt, ist die Anwenung dieses Plugins überhaupt kein Problem und bietet einen beachtlichen Mehrwert für eine Website, ein Template oder WordPress-Theme.

Relevante Links:

Schlagwörter: , ,

Autor

Moin, ich bin Simon und ehemaliger Betreiber dieses Blogs.

RSS abonnieren

und so weiter...

Kommentare

  • Simon [webdemar] - am 30. Januar 2009 - Antworten

    Sch***e, ist der Post lang geworden. Ich hoffe dennoch, dass er nachvollziehbar ist :-|

  • thomas - am 18. Februar 2009 - Antworten

    Hallo Simon

    Ich habe das Superfish Menü im Einsatz und bin auch recht zufrieden damit.
    Aber leider geht es nicht im IE6, wenn genau unter dem Text vom Menüpunkt ein Link ist, so wie auf der Seite(http://www.vulkana-wellness.at).
    Ich habe schon alles mögliche mit dem Z-Index versucht, aber kein Erfolg.
    Hast du eine Lösung?

    Danke
    Thomas

    • Simon [webdemar] - am 20. Februar 2009 - Antworten

      @thomas:
      Habe gesehen, dass Du #menuoben z-index 2 gesetzt hast. Das ist gut. Jetzt muss Du nur noch die darunterliegenden Container-divs #left, #right und #farright mit z-index 1 versehen. Versuch das mal. Das könnte klappen. Sag bescheid ;-)

  • Stephen - am 18. Februar 2009 - Antworten

    das tutorial ist wirklich wunderbar und auch verständlich.
    ich habe aber auch probleme beim eindbinden in wordpress. ich hoffe, dass du dazu bald etwas schreibst, wie du es gesagt hast. dafür wäre ich dir sehr dankbar!

    have a nice day

  • Claas Schaefer - am 8. März 2009 - Antworten

    Hi Simon!

    Erst einmal vielen Dank für das tolle Tutorial!

    Leider bekomme ich mit dem aktuellen IE immer einen JS-Fehler angezeigt. In FF3 läuft alles ohne Mucken.

    Hast Du eine Idee, woran es bei mir liegen könnte?

    • Simon [webdemar] - am 10. März 2009 - Antworten

      @Claas:
      Moin Claas. Sorry für die späte Antwort. Das Problem, das Du beschreibst hatte ich auch mal in einem Kundenprojekt. Ich habe dann den Aufruf der Superfish-Funktion mit folgenden Zeilen ersetzt.

      
	 $(document).ready(function(){
        $("ul.sf-menu").find('li.current_page_item,li.current_page_parent,li.current_page_ancestor,li.current-cat')
    		.addClass('current')
				.parents('li')
				.addClass('current')
				.end()
			.end()
    });

      Danach lief es bei mir auch im IE. Ich bin allerdings wahrlich kein JS-Experte. Aber, wenn ich mich recht erinnere, störte sich der IE an dem Aufruf der Funktion superfish(). Wenn dies nicht hilft, müsstest Du die Frage mal in der Mailing-List stellen.

      Viel Glück :-)

  • Claas Schaefer - am 24. Mai 2009 - Antworten

    Okay, ich teste es morgen und melde mich dann!

    Vielen Dank schon mal!

  • Kurt - am 26. Mai 2009 - Antworten

    Hallo,

    Wie kann ich den aktuellen Menüpunkt hervorheben?

    Normalerweise mach ich es mit:
    #current {color:#0000CC;background-color:#999999; }

    Wie funktioniert das mit Superfish?

    • Simon [webdemar] - am 27. Mai 2009 - Antworten

      Hallo Kurt,
      in dem Abschnitt ‘Anpassen der Menü-Parameter’ findest Du auch den Punkt pathClass. Dieser belegt alle betroffenden li-Tags mit der von Dir angegebenen Klasse. Es muss allerdings (nicht wie bei Dir eine ID) eine Klasse (.current) sein. Beim Aufruf des Superfish-Plugins für einfach pathClass: current hinzu. Die Listenpunkte kannst Du dann ja über CSS anprechen.

  • Claas / Schweinegrippe - am 2. August 2009 - Antworten

    Jo hat geklappt :)

    THX nochmal!

  • Webstandard-Team - am 5. August 2009 - Antworten

    Wirklich ein klasse Tutorial, danke!

  • RTG - am 1. September 2009 - Antworten

    Hallo Simon und Alle die IE6 kompatibel sein müssen.
    Für ein Projekt wird YAML eingesetzt und superfish.
    Ich habe nach langem Suchen herausgefunden, dass beim Aufruf von supersubs
    $(“#submenu”).supersubs({
    minWidth: 14, // minimum width of sub-menus in em units
    maxWidth: 14, // maximum width of sub-menus in em units
    extraWidth: 0 // extra width can ensure lines don’t sometimes turn over
    // due to slight rounding differences and font-family
    }).superfish({
    pathClass: ‘active’,
    disableHI: false,
    delay: 50, // one second delay on mouseout
    animation: {opacity:’show’,height:’show’}, // fade-in and slide-down animation
    speed: ‘slow’, // faster animation speed
    autoArrows: false, // disable generation of arrow mark-up
    dropShadows: false // disable drop shadows
    });
    der IE 6 immer mit 2 Fehlern aussteigt.
    1.Ungültiges Argument
    2.Syntax Error.
    Das Problem tritt auf wenn ein CSS Klasse ul li{} wie im YAML core 3.1 in der Datei nav_vlist.css den float aktiv setzt:
    .vlist li {
    float:left; /* LTR */
    width: 100%;
    margin:0;
    padding: 0;
    }
    Jetzt habe ich das Problem, das der float schon da sein muss und ich auf die supersubs nicht verzichten möchte.
    Vielleicht hatte jemand schon mal das Problem? Und vielleicht auch die Lösung?

  • palasmic - am 9. September 2009 - Antworten

    hallo!
    habe nun superfish als horizontale navigation eingesetzt und bin eigentlich sehr zufrieden: doch wie kriege ich es hin, dass die zweite horizontale menü-ebene aufgeklappt bleibt und beim mouse-over über andere nav-punkte wieder verschwindet?
    erste problem konnte ich lösen. doch beim mouseover bleibt die alte zweite leiste stehen und verschwindet nicht..
    http://www.edvart.de/kunden/airleben

    wäre sehr dankbar für tips!

  • palasmic - am 9. September 2009 - Antworten

    achja, ihr seht das problem nur bei flugerlebnis/rundflüge. der rest ist noch nicht verlinkt..

  • palasmic - am 10. September 2009 - Antworten

    hab das problem gefunden – ich depp hatte jquery auskommentiert..

  • Robert - am 14. September 2009 - Antworten

    Hallo Simon

    Kannst du mir helfen? Ich habe das Superfish-Modul installiert. Funktioniert wunderbar, bis auf das, wenn ich einen Menüpunkt im aufgeklappten Menü auswähle erscheinen meine Flash-Bilder nicht mehr, oben im Head-Bereich. Was stimmt da nicht? Ich habe einen Artikel im normalem Menü und den gleichen im Aufklappmenü ausgewählt. Und im Aufklappmenü zeigt er mir diesen Artikel zwar an aber eben ohne meine Bilder, die mit Flash dargestellt werden.
    Hier die Seite http://getraenke-hecht.de/neues-template.html

    Danke für deine Mühe!

    Gruß Robert

    • Simon [webdemar] - am 16. September 2009 - Antworten

      Hi Robert,

      da kann ich Dir leider auch nichts zu sagen. Kann auf den ersten Blick nicht erkennen, warum Dein Flash ab und zu verschwindet. Würde Dir empfehlen, diese Frage mal in der Mailing-List zu stellen. Da ist das Thema Flash auch oft dabei.

  • Suse - am 30. September 2009 - Antworten

    Hallo Simon,
    finde superfish sehr gut.. möchte jetzt aber mehrere vertikale superfish-menüs in einem Template haben, links untereinander, aber es funktioniert nicht. Auch wenn ich auf Erweiterungen-Module-Neu-Superfish gehe und für das 2.Menü ein neues superfish anlege wird dann auf der website nur noch das 2.Menü angezeigt, der Rest ist komplett weg und es kommt die Nachricht: Fatal error: Cannot redeclare hasvalue() (previously declared in /www/htdocs/w00baa07/joomla/modules/mod_superfishmenu/helper.php:214) in /www/htdocs/w00baa07/joomla/modules/mod_superfishmenu/helper.php on line 214..

    Kann man also 2 Superfish Menüs in einem Template haben?
    Gruß Suse

  • mirgl - am 26. Oktober 2009 - Antworten

    Hallo Simon,

    ich bin/war bis vor Kurzem eigentlich ziemlich großer Superfish-Fan, allerdings habe ich jetzt gemerkt, dass das Drop-Down-Menü in der aktuellen IE8 Version “zuckt”, sich also nach dem Ausklappen um einen Pixel nach rechts bewegt, was ich (und mein Kunde) für einen ziemlich unschönen Effekt halte. Kennt zufällig hier jemand eine saubere Lösung des Problems?

  • Alex - am 29. November 2009 - Antworten

    Hallo zusammen!

    Danke für die super Anleitung.
    Mich wundert nur, dass nie die Frage auftauch wie man Schriftgröße und Schriftart und Schriftfarbe ändert.
    Habe schon das ganze Internet abgesucht, aber wahrscheinlich mit den falschen Suchbegriffen……
    Bin für einen kleinen Schupfer sehr dankbar! :-)

  • Reto - am 16. Dezember 2009 - Antworten

    Hallo zusammen!
    Danke für die super Anleitung.
    Ich habe auch das Superfish Menü im Einsatz und bin auch recht zufrieden damit.
    Nur, wie kann ich auch main tab highlighten (active menu indikator) auch wenn man nur das sub categorien geklickt hat …wäre schön aus usability sicht!!
    hab versucht änderung vorzunehmen..hats nicht funktioniert ;-(
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active , .sf-menu:active{
    oder
    .sf-menu .current_page_item a:hover {color: #fff;}

    Hast du eine Lösung?
    zlights@gmail.com

    Danke
    Reto

  • iwd - am 7. Januar 2010 - Antworten

    Simon, ich finde das Tutorial sehr gut.
    Danke für Deine Arbeit!

    Und nun:
    derzeit baue ich an einem neuem Template für einen Kunden. Ich habe mich damals für das Superfish Menü entschieden. Es leistet auch seine zweckmäßigen Dienste, jedoch gibt es im IE6 folgendes Dilema:

    Beim Hovern der Buttons stürtzt der IE6 Browser ab.
    Liegt es am javascript?
    Was könnte ich da tun?

    Lieben Gruss

  • Sandra - am 20. Januar 2010 - Antworten

    hallo zusammen,
    ich hab das superfishmenu mit den supersubs im einsatz. allerdings bekomme ich im IE keine pfeilchen angezeigt ;o(
    FF, Opera, Safari laufen alle ohne probleme und mit pfeilchen.
    kann mir jemand weiter helfen?

    LG Sandra

  • Claas / Miniwaschmaschine - am 6. Februar 2010 - Antworten

    @ iwd

    Hatte ein ähnliches Problem, aber das nur an einem bestimmten Rechner. Schon mal auf einem anderen Arbeitsplatz mit dem IE 6 probiert?

  • caropo - am 8. Februar 2010 - Antworten

    Hallöchen!
    ich versuche gerade ein dropdown menü zu erstellen, das auch nach dem Klick noch geöffnet bleibt, solange bis ich einen anderen Menüpunkt auswähle. HAbt ihr eine Idee, wie ich das machen könnte?

  • jesper - am 18. Februar 2010 - Antworten

    Hallo,

    genau das selbe versuche ich auch verzweifelt seit einigen Tagen. Hat da mittlerweile jemand eine Lösung gefunden?

  • Stefan Riedels Blog - am 18. Februar 2010 - Antworten

    Moin,
    ich bin gerade dabei das superfish Menu in eine Applikation von mir in eine vorhandene Liste einzubauen, also die Menu Liste steht nicht alleine da, sondern wird in eine andere ungeordnete Liste eingefügt. Leider wird das Menu dabei sehr merkwürdig abgeschnitten, siehe hier: http://riedel-st.de/wp-content/uploads/2010/02/komisches-menu-300×63.png. Konnte dieses Problem schon mal jemand beobachten? BTW: Dieses Phenomän tritt in jedem Browser auf, also nicht nur bei dem aus Redmond…

  • Sandra - am 18. Februar 2010 - Antworten

    schaut mir aus, als ob der container, in dem das menu drinne ist eine feste höhe hat >> dadurch wird das superfish abgeschnitten. probier mal die höhe aufzuheben bzw. mit z-index ….

    Hat jemand eine Idee was ich mit meinen Preilchen im IE machen kann??? Die werden einfach nicht angezeigt ;o(

  • traumatik - am 1. März 2010 - Antworten

    ich möchte genau das gegenteil: keine pfeilchen.
    wenn ich die standard pfeil bilder auskommentiere, kommen solche aus reinem text (>>). ich habe keine ahnung wo die herkommen!
    jemand einen tipp?

    • traumatik - am 1. März 2010 - Antworten

      habe die lösung nach stunden doch noch gefunden:
      im superfish.js gibt’s den parameter autoArrows: true (Zeile 91).
      diesen auf false setzen, wenn man keine Pfeile will.

  • rudi - am 16. März 2010 - Antworten

    lieber simon,
    erstmals danke fürs tutorial.
    kennst du oder vielleicht sonst jemand eine möglichkeit das superfish menü nach oben zu klappen.

  • palasmic - am 16. März 2010 - Antworten

    hat jemand erfahrung mit hinterlegten (schrift)grafiken statt der realen schrift? ich habe die entsprechenden bilder als hintergrund untergebracht, doch sobald ich den text über negativen text-indent rausschiebe funktioniert das dropdown-menü nicht mehr (der mauszeiger braucht anscheinend realen text).
    tipps für mich?

  • Flaep - am 17. März 2010 - Antworten

    ist es mit der Superfish-Navigation auch möglich, eine horizontale Multileveldropdown-Naviagtion zu erstellen, in welcher die Dropdowns immer (bzw. ab der 2. Dropdownebene) nebeneinander auf selber höhe erscheinen und nicht auf der Höhe des ausgewählten Links? Dabei müssten die Dropdownboxen natürlich alle die selbe höhe haben, egal, wieviel Links darin platziert sind.

    Ich möchte eine solche Navigation über einem Headerbild erscheinen lassen und finde leider keine geeignete Lösung. Hier ein Beispiel:
    http://www.spiegeldesign.ch/horizontal_navigation.gif

    Gruss & Danke für eure Hilfe

  • BerndJM - am 1. April 2010 - Antworten

    Hi,
    ich habe den superfish grade bei einem Intranet-Projekt zum ersten Mal im Einsatz und bin recht begeistert davon, wenn da nicht eine Vorgabe wäre:
    Beim Klick auf einen Hauptmenüpunkt soll sofort das – per Hover erschienene – Untermenü verschwinden, auch wenn die Maus noch “hovert”. (Hintergrund: die Hauptmenüpunkte haben bereits eine eigene Funktionalität).
    Hat da jemand vielleicht eine Idde, wie man mit dem “Click” das “MouseOut” erreichen kann … oder so ähnlich ?

    Grüßle vom Bernd

  • Astrid - am 16. April 2010 - Antworten

    Hallo,
    das Menü funktiniert bei mir, aber wie kann ich die transparenz der aufgeklappten menüs einstellen? Ich finde das nicht

    • Simon [webdemar] - am 16. April 2010 - Antworten

      Dafür müsstest Du dem Untermenü .sf-menu ul ein halbtransparentes PNG-Hintergrundbild oder über CSS (opacity) zuordnen.

      • Astrid - am 12. Mai 2010 - Antworten

        Danke, das hat geklappt :)

  • francicor - am 5. Mai 2010 - Antworten

    Habe ein Problem, welches hier und auch schon an anderen Orten gepostet wurde – nur bringen mich die Antworten nicht weiter.
    Das Problem:
    Habe auf der angegeben (http://cos-33.sercon.ch/) Webseite Superfish als Menu-Modul eingesetzt. Funktioniert eigentlich alles ganz gut, ausser das der aktive Menupunkt nicht als aktiv angezeigt wird. Habe wirklich versucht – die Vorschläge/Lösungen die hier und in anderen Foren aufgezeigt wurden, umzusetzen. Leider hat bis jetzt nichts funktioniert. Bin froh um jede Hilfe, vielleicht übersehe ich einfach etwas.

    Grüsse von Franci

  • Volker - am 14. Mai 2010 - Antworten

    Hallo,
    ich nutze superfish, es funktioniert tadellos. Aber es scheint einen Konflikt mit Lightbox 2 (http://www.huddletogether.com/projects/lightbox2) zu geben. Sobald ich von Lightbox die prototype.js einbinde, klappt das Menü nicht mehr auf. Testet einfach mal die Einbindung des JS:

    Hat jemand ähnliche Erfahrungen, oder besser noch eine Lösung?

    Gruß Volker

  • Franz - am 30. Mai 2010 - Antworten

    Besten Dank für das umfangreiche Tutorial!

  • Anne - am 21. Juni 2010 - Antworten

    Hallo, ich nutze das Superfish-Menu auf mehreren verschiedenen Seiten und hatte weder mit der Installation, Einrichtung, CSS noch mit der Funktionsweise bisher Probleme, klappt alles wunderbar. Auch über einem Flash wird es angezeigt, dank der Flash-Eigenschaft “opacity”.

    Nur eine kleine Frage: der validator.w3.org gibt mir einen Fehler aus, bei allen meinen Seiten mit dem Sf-Menu: Er meckert über den tag innerhalb des sf-menu, Begründung “rel” ist kein zu “li” gehörendes Attribut. Muss ich damit leben, oder gibt es dafür auch eine Lösung?

    Freue mich über Tipps…

    Vielen Dank und viele Grüße

    • Anne - am 21. Juni 2010 - Antworten

      …. also, ich nochmal… die Tagklammern sind wohl weggeneriert worden: Zum besseren Verständnis der bemeckerte Tag ist “Spitze Klammer auf” “li” “rel=….” usw usw “Spitze Klammer zu”

  • Ulrich - am 2. September 2010 - Antworten

    Toll, so ein Menü habe ich schon lange gesucht.

    Auf example.html kann ich auch problemlos das Menü gestalten, auch die Farben und Ränder habe ich geändert. Nur. Ist auch die Schriftart und -größe verstellbar? Bei mir erscheint es in Times New Roman 12 (schätze ich), will aber gerne Verdana 10.

    Ist das möglich?

    Danke vorab & Gruß. Tolle Seitte!!!! :-)

    • Sandra - am 2. September 2010 - Antworten

      Das kannst du doch über dein CSS steuern.

  • Robert - am 2. September 2010 - Antworten

    Hallo Webdemar,

    sehr gut nachvollziehbares Tutorial. Habe superfish in Joomla! eingesetzt und alles so heinbekommen, wie ich es wollte. Ein Problem hab ich aber noch, und zwar sollen die aktiven Links rot sein. gelöst hab ich das so:

    .sf-menu .active a {
    color: #AA0404;
    background-position: -10px -100px;
    }

    Das funktioniert auch, Problem ist jetzt, dass wenn ein Link im Submenü aktiv ist, alle andere Links des Submenüs auch rot sind, weil sie den CSS Code erben. Ich hab unter dem obigen CSS Code nochmals dies definiert:

    .sf-menu li a {
    color: #979797;
    }
    .sf-menu li li a {
    color: #979797;
    }

    Wird im Firebug zwar angezeigt, aber ist durchgestrichen. Das .active setzt sich irgendwie durch. Was kann ich tun damit damit nur der aktive Link der Submenüs rot wird und die anderen Links grau bleiben?

    Grüße
    Robert

    • Sandra - am 3. September 2010 - Antworten

      Hi Robert,

      wer hat denn bei dir das .active die a oder die li ?

      Du kannst es mal so probieren.

      .sf-menu a.active {
      color: #AA0404;
      }

      oder so:

      .sf-menu li.active a {
      color: #979797;
      }
      .sf-menu li.active li a {
      color: #979797;
      }

      LG Sandra

  • Robert - am 3. September 2010 - Antworten

    Hi Sandra,

    das a bekommt die Klasse active. Also die Klasse active bekommt schon das richtige a, bloß die Vererbung ist das Problem. Die (ungewünscht roten) a’s der Submenüs haben nur geerbt die Eigenschaften von active geerbt, sie selber sind natürlich nicht active.

    Für die a’s hab ich doch extra dies hier definiert:

    .sf-menu li a {
    color: #979797;
    }

    Grüße
    Robert

  • Sandra - am 3. September 2010 - Antworten

    Hi Robert,

    lösch mal dein

    .sf-menu li a {}

    und probier mal so
    .sf-menu a.active {
    color: #AA0404;
    }

    wenn das nicht funkzt, kannst dus auch so untergliedern in

    .sf-menu ul li a.active {
    color: red;
    }

    .sf-menu ul li ul li a.active {
    color: blue;
    }

    und wenn das auch nicht funkzt, postest vielleicht mal deinen code… ;o)

    LG Sandra

  • Sandra - am 3. September 2010 - Antworten

    mh… das mit dem bildchen klappt irgendwie net ;o(
    hinterlegt hab ichs bei Gravatar, aber es erscheint keins…

  • Marc - am 26. Oktober 2010 - Antworten

    Hi!
    Wie bringe ich es hin, dass die Menufarben in der 2ten Ebene dieselbe Farbe erhalten wie jeweils ein Menu in der 1. Ebene?
    => Menu 1 Ebene 1 (Farbe rot) ==> Menu 1 Ebene 2 (Farbe rot vererbt)
    => Menu 2 Ebene 2 (Farbe grün) ==> Menu 2 Ebene 2 (Farbe grün) vererbt

    Besten Dank!

  • Nettl - am 22. November 2010 - Antworten

    Hi,
    sehr schönes und interaktives Menü.
    Leider habe ich ein Problem mit den Select- Boxen im IE6 (das Untermenü lässt sich nicht über den Boxen anzeigen). Das Problem lässt sich im IE6 nicht beheben, da Formularelemente über dem Div in der Hierarchie der HTML-Elemente steht. IFrame ist keine Lösung.
    Gibt es dafür schon einen Ansatz, um dieses Problem zu umgehen?

    Vielen Dank

  • jordano - am 3. März 2011 - Antworten

    folgende Frage.
    Ich möchte die Submenüs beim “vertical menü superfisch” sichtbar haben, wenn sie schon angecklickt sind. Unüblicherweise verschwinden die SubMenüs wenn man auf sie gecklickt hat. wo kann ich die einstellungen anpassen?
    MLg Iordan

  • Dirk - am 28. März 2011 - Antworten

    Habt Ihr schon mal das Menü unter dem Internet Explorer 9 probiert? Das Script supersubs.js schein dort nicht zu funktionieren, längere Menüeinträge werden immer in der gleichen breite dargestellt.
    Gruß

Trackbacks

Deine Meinung