Anzeige
Tutorialbeschreibung

jQuery - Menüs mit Superfish - Teil 01

jQuery - Menüs mit Superfish - Teil 01

jQuery wird sehr oft für den Aufbau von Menüs verwendet. Kein Wunder, schließlich gibt es mittlerweile unzählige Menü-Plug-ins. Eines davon ist Superfish. Dieses Plug-in ermöglicht es jedem, ein sogenanntes Superfish-Dropdown-Menü in seine Webseite zu integrieren.

... übrigens findest du die komplette Serie hier: Photoshop-Workshop-DVD - Webdesign - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Dropdown-Menüs auf Basis reinen JavaScripts zu erstellen, ist zunächst einmal kein Problem. Will man allerdings ein Ergebnis erzielen, wie es beispielsweise auf der Seite http://users.tpg.com.au/j_birch/plugins/superfish/#examples zu sehen ist, gehört schon einiges an Know-how dazu.

Bilder



Was aber zeichnet solche Superfish-basierten Menüs eigentlich aus?

  • Sie sind über die Tastatur steuerbar.
  • Es gibt zahlreiche Parameter, über die sich das Menü anpassen lässt.
  • Schatten lassen sich hinzufügen.
  • Die Art und Weise der Animation der einzelnen Menüpunkte kann explizit festgelegt werden.
Das Superfish-Plug-in können Sie von der Seite http://users.tpg.com.au/j_birch/plugins/superfish/#download herunterladen. Im einfachsten Fall genügen bereits die beiden Dateien superfish.css und superfish.js. In der superfish.css sind die Formatierungen enthalten. Die eigentliche Superfish-Funktionalität steht hingegen in der superfish.js.

Menüs, die über Superfish animiert werden sollen, werden – wie Sie das von normalen HTML-Menüs her kennen – in Form einer Liste aufgebaut. Ein typisches Menü könnte also folgendermaßen aussehen:
[Beispiel anzeigen]
<ul class="sf-menu">
   <li class="current"> <a href="#a">menu item</a>
     <ul>
       <li> <a href="#aa">menu item that is quite long</a> </li>
       <li class="current"> <a href="#ab">menu item</a>
         <ul>
           <li class="current"><a href="#">menu item</a></li>
           <li><a href="#aba">menu item</a></li>
           <li><a href="#abd">menu item</a></li>
         </ul>
       </li>
       <li> <a href="#">menu item</a>
         <ul>
           <li><a href="#">menu item</a></li>
           <li><a href="#">menu item</a></li>
           <li><a href="#">menu item</a></li>
         </ul>
       </li>
     </ul>
   </li>
   <li> <a href="#">menu item</a> </li>
   <li> <a href="#">menu item</a>
     <ul>
       <li> <a href="#">menu item</a>
         <ul>
           <li><a href="#">short</a></li>
           <li><a href="#">short</a></li>
           <li><a href="#">short</a></li>
         </ul>
       </li>
       <li> <a href="#">menu item</a>
         <ul>
           <li><a href="#">menu item</a></li>
           <li><a href="#">menu item</a></li>
           <li><a href="#">menu item</a></li>
         </ul>
       </li>
       <li> <a href="#">menu item</a>
         <ul>
           <li><a href="#">menu item</a></li>
           <li><a href="#">menu item</a></li>
           <li><a href="#">menu item</a></li>
         </ul>
       </li>
       <li> <a href="#">menu item</a>
         <ul>
           <li><a href="#">menu item</a></li>
           <li><a href="#">menu item</a></li>
         </ul>
       </li>
       <li> <a href="#">menu item</a>
         <ul>
           <li><a href="#">menu item</a></li>
           <li><a href="#">menu item</a></li>
         </ul>
       </li>
     </ul>
   </li>
   <li> <a href="#">menu item</a> </li>
 </ul>

Ruft man dieses "Menü" im Browser auf, ist von einem Menü freilich noch nichts zu sehen. Vielmehr wird lediglich eine ganz normale Liste angezeigt.

Bilder



Um aus dieser Liste ein Superfish-Menü zu machen, binden Sie die beiden bereits vorgestellten Dateien superfish.css und superfish.js ein. (Zuvor muss auch noch jQuery integriert werden, wobei hier die minimale Version genügt).
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" />
<script type="text/javascript" src="superfish.js"></script>

 
Was jetzt noch fehlt, ist die eigentliche Funktionalität. Diese wird dem Menü folgendermaßen zugewiesen:
<script type="text/javascript">
/* <![CDATA[ */
   $(document).ready(function() { 
   $('ul.sf-menu').superfish();
           }); 
/* ]]> */
</script>  

Wichtig ist hier, dass über  $('ul.sf-menu') angegeben wird, auf welche Klasse sich die Angaben beziehen. Geben Sie dabei die Klasse an, die Sie dem einleitenden ul-Element des Menüs zugewiesen haben. Mehr ist zunächst einmal nicht nötig. Ein anschließender Blick in den Browser zeigt, dass das Menü bereits in diesem Zustand durchaus brauchbar ist.
[Beispiel anzeigen]

Bilder



 
Sollten bei Ihnen keine Pfeile angezeigt werden, müssen Sie sich die entsprechende Grafik (es ist in der Tat nur eine) zunächst von der Seite http://users.tpg.com.au/j_birch/plugins/superfish/images/arrows-ffffff.png herunterladen. Öffnen Sie anschließend die superfish.css und suchen Sie darin nach folgendem Bereich:
.sf-sub-indicator {
    position:    absolute;
     display:      block;
     right:        .75em;
     top:          1.05em; /* IE6 only */
     width:        10px;
     height:       10px;
     text-indent: -999em;
     overflow:     hidden;
     background:   url('arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
 }

Interessant ist hier die background-Eigenschaft. Passen Sie den Wert von url entsprechend an. Geben Sie also den Pfad zu der zuvor heruntergeladenen Pfeilgrafik an. Im aktuellen Beispiel wird davon ausgegangen, dass die Grafik im gleichen Verzeichnis wie die CSS-Datei liegt.

Bislang wurde die einfachste Variante des Superfish-Menüs verwendet. Es geht aber noch deutlich komfortabler. Denn das Menü lässt sich durch zahlreiche Parameter den eigenen Wünschen entsprechend anpassen. Hier zunächst ein typisches Beispiel, wie ein Parametereinsatz aussehen kann:
[Beispiel anzeigen]
<script type="text/javascript">  
 /* <![CDATA[ */
           $(document).ready(function() { 
               $('ul.sf-menu').superfish({ 
                   delay:       3000,                           
                   animation:   {opacity:'show',height:'show'},     
                   speed:       'fast',                                                                              
               }); 
           });  
 /* ]]> */
 </script>  

 
Die Definition der Parameter geschieht immer auf die gleiche Weise. Hinter dem eigentlichen Parameter folgt ein Doppelpunkt, an den sich der entsprechende Parameterwert anschließt. Beachten Sie, dass die einzelnen Parameter durch Kommata voneinander getrennt werden müssen. Unter anderem stehen die folgenden Parameter zur Verfügung:
  • hoverClass – Die Klasse, die beim Hover-Ereignis angewendet werden soll.
  • pathClass – Die Klasse, die für die aktuelle gewählte Seite angezeigt wird.
  • delay – Anzahl der Millisekunden, die eine Maus außerhalb eines Menüpunkts verweilen darf, bevor dieses geschlossen wird.
  • animation – Entspricht der jQuery-Methode animation().
  • speed – Hierüber legt man die Geschwindigkeit der Animation fest.
  • dropShadows – Um den Schatten zu deaktivieren, setzt man false ein.
  • disableHI – Setzt man diesen Wert auf true, wird die hoverIntent-Erkennung deaktiviert. (Dieses hoverIntent ist ein Plug-in für jQuery, das auch bereits im Rahmen des jQuery-Tutorials jQuery – Ein Menü mit nmcDropDown erstellen auf PSD-Tutorials.de vorgestellt wurde.
Bislang wurde das Menü horizontal angezeigt. Das ist so aber natürlich nicht immer gewünscht. Oftmals braucht man nämlich ein vertikales Menü. Auch so etwas ist mit Superfish sehr einfach möglich.
[Beispiel anzeigen]

Bilder



 
Laden Sie sich dazu die Datei superfish-vertical.css von der Seite http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish-vertical.css herunter. Wichtig ist, dass diese parallel zur superfish.css, aber nach dieser eingebunden wird.
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" /> 
 <link rel="stylesheet" type="text/css" media="screen" href="superfish-vertical.css" /> 
 <script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript" src="superfish.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
   $(document).ready(function() { 
   $('ul.sf-menu').superfish(); 
   }); 
/* ]]> */
</script>

Und auch am Menü selbst muss man Hand anlegen. Denn dort muss dem einleitenden ul-Element eine zusätzliche CSS-Klasse zugewiesen werden. Ändern Sie den Eintrag innerhalb des einleitenden ul-Elements in sf-menu sf-vertical um. Insgesamt sollte das äußere ul-Element dann folgendermaßen aussehen:
<ul id="menu" class="sf-menu sf-vertical">
 …
</ul>

 
Diese Variante hat den Vorteil, dass Sie auf einer Seite mehrere Superfish-Menüs anordnen können. Dabei spielt es dann auch keine Rolle, ob diese Menüs vertikal oder horizontal angezeigt werden sollen. Denn alle vertikalen Menüs kennzeichnet man mit <ul class="sf-menu sf-vertical">, während man die horizontalen Menüs wie gewohnt mit <ul class="sf-menu"> auszeichnet.
[Beispiel anzeigen]

Bilder



Fazit

Superfish ist ein erstklassiges Menü-Plug-in für jQuery. Die in diesem Tutorial gezeigten Aspekte zeigen übrigens noch lange nicht das volle Spektrum der Fähigkeiten dieses Plug-ins. Was Superfish noch leisten kann, erfahren Sie im nächsten Tutorial.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von _blue_
  • 12.06.2014 - 19:34

Mir ist es ein Rätsel, wie man die Pfeile einbindet. Ich kann das .sf-sub-indicator in der superfish.css nirgends finden.

Portrait von websmurf
  • 18.05.2010 - 13:57

Gut beschriebener Einstieg in das SF-Menü. Bin mal gespannt auf Teil 2.

Portrait von Dissolution
  • 16.05.2010 - 13:31

Das Tutorial an sich finde ich recht gut, weniger toll hingegen die vermehrte Verwendung von Skripts an allen Ecken und Enden. Gerade wo doch auf der einen Seite Barrierefreiheit so groß geschrieben wird, andererseits viele Skripte alles andere als barrierefrei eingesetzt werden. Für ein solches Menü brauche ich wahrlich kein Javaskript, da tut's CSS auch noch locker. Aber gut, ich kann mir das erlauben, denn meine BesucherInnen nutzen zum Großteil Skriptblocker und verzichten lieber auf visuelle Effekte die zu Ungunsten der Sicherheit ausfallen (können).

x
×
×