Tutorialbeschreibung

jQuery - Menüs mit Superfish - Teil 02

jQuery - Menüs mit Superfish - Teil 02

Im ersten Superfish-Tutorial wurden die Basisfunktionen des jQuery-Plug-ins Superfish vorgestellt. Mit denen muss man sich aber nicht zufriedengeben. Denn Superfish ermöglicht noch einiges mehr. So kann man beispielsweise explizit auf sehr lange Menüeinträge reagieren, um so unerwünschte Zeilenumbrüche zu vermeiden. Ebenso kann man aber auch Menüs anlegen, die eine doppelte Menüleiste haben. Genau um solche Verfeinerungen von Superfish-Menüs geht es in diesem Tutorial. Zum Abschluss erfahren Sie dann noch, welche Dateien relevant sind, wenn es um optische Anpassungen der auf Superfish basierenden Menüs geht.


Wie sich mit Superfish Menüs aufbauen lassen, wurde im ersten Teil dieser (kleinen) Tutorialserie gezeigt. Die zur Verfügung stehenden Möglichkeiten sind damit allerdings längst noch nicht ausgeschöpft. Denn mit Superfish lassen sich auch extralange Menüpunkte abfangen. Und noch etwas ist machbar: doppelte Menüleisten. Wie sich diese beiden Dinge umsetzen lassen, wird in diesem Tutorial beschrieben.


Doppelte Menüleisten

Gerade bei umfangreichen Menüs, die sich aus sehr vielen Einträgen zusammensetzen, können doppelte Menüleisten durchaus sinnvoll sein. Superfish bietet mit dem sogenannten Nav-bar-Style eine interessante Option, mit der sich solche Menüleisten aufbauen lassen. Bei diesem Nav-bar-Style wird die dritte Ebene eines Menüs automatisch als Dropdown angezeigt. Zusätzlich geben solche Menüs explizit den Pfad zur aktuellen Seite innerhalb des Menüs an. (Dazu muss man lediglich die entsprechende Klasse setzen).
[Beispiel anzeigen]

Bilder


Um ein solches Menü umzusetzen, muss man zunächst eine entsprechende Liste aufbauen. Diese unterscheidet sich auf den ersten Blick nicht weiter von einer herkömmlichen Menüliste.
<ul class="sf-menu sf-navbar">

   <li> <a class="sf-with-ul" href="#">long menu item<span class="sf-sub-indicator"> &#187;</span></a>
     <ul>
       <li><a href="#">subitem 1a</a></li>
       <li><a href="#">subitem 1b</a></li>
       <li><a href="#">subitem 1c</a></li>
       <li><a href="#">subitem 1d</a></li>
     </ul>
   </li>
   <li class="current"> <a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> &#187;</span></a>
     <ul>
       <li> <a class="sf-with-ul" href="#">subitem 2a<span class="sf-sub-indicator"> &#187;</span></a>
         <ul>
           <li><a href="#">menu item</a></li>
           <li><a href="#aba">menu item</a></li>
           <li><a href="#abb">menu item</a></li>
           <li><a href="#abc">menu item</a></li>
           <li><a href="#abd">menu item</a></li>
         </ul>
       </li>
      
      ...
     
 </ul>

Interessant ist hier die dritte Menüebene. Bei der handelt es sich um die dem li-Element untergeordneten ul-Elemente. Die innerhalb dieser untergeordneten ul-Elemente enthaltenen li-Elemente sind es, die als Dropdown-Einträge angezeigt werden. Um den gewünschten Effekt zu erzielen, muss neben der bereits bekannten superfish.css die superfish-navbar.css eingebunden werden. Diese Datei können Sie sich von der Seite http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish-navbar.css herunterladen. Insgesamt sollte der CSS-Bereich dann folgendermaßen aussehen:
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="superfish-navbar.css" />

 
Zusätzlich muss dem einleitenden ul-Element die Klasse sf-navbar zugewiesen werden.
<ul class="sf-menu sf-navbar">

Was jetzt noch fehlt, ist die eigentliche Skriptfunktionalität. Um diese nutzen zu können, müssen die entsprechenden Dateien eingebunden und anschließend die gewünschten Funktionen aufgerufen werden.
<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({ 
            pathClass:  'current' 
        });
    }); 
/* ]]> */
</script>

Über pathClass wird die CSS-Klasse angegeben, die innerhalb des Menüs den Weg zeigt, der zur aktuellen Seiten geführt hat. Ansonsten enthält der Skript-Bereich keine weiteren Überraschungen.

 

Menüs mit extrabreiten Einträgen

Was passiert eigentlich mit solchen Menüeinträgen, die besonders lang sind? Im folgenden Beispiel ist ein solcher Eintrag enthalten.
  <ul>
       <li><a href="#aa">Ein sehr, sehr, sehr langer Menüeintrag</a></li>
       <li class="current"><a href="#ab">menu item</a></li>
         <ul>
 ...

 
Werfen Sie hierzu einen Blick auf die folgende Abbildung:
[Beispiel anzeigen]

Bilder


Es ist zu erkennen, dass der Menüeintrag automatisch umbrochen wird. Gewollt ist das natürlich nicht immer. Wie aber kann man dafür sorgen, dass es keinen automatischen Umbruch gibt?  Superfish stellt hierfür die Datei supersub.js zur Verfügung. (Beachten Sie, dass sich diese Erweiterung momentan noch im Beta-Stadium befindet. Probleme bereitet sie beim Einbinden allerdings nicht). Laden Sie sich die Datei supersub.js von der Seite http://users.tpg.com.au/j_birch/plugins/supersubs/js/supersubs.js herunter und binden Sie diese wie gewohnt in Ihre Webseite ein. Insgesamt sollte der head-Bereich dann folgende Aufrufe enthalten:
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" /> 
 <script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript" src="superfish.js"></script>
 <script type="text/javascript" src="supersubs.js"></script>

 
Das Menü selbst könnte – hier nur auszugsweise dargestellt – folgendermaßen definiert werden:
<ul id="menu" class="sf-menu"> 
   <li class="current"> <a href="#a">menu item</a>
     <ul>
       <li> <a href="#aa">Ein sehr, sehr, sehr langer Menüeintrag</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>
 …

In diesem Beispiel wurde lediglich ein langer Menüeintrag eingefügt. Den gleichen Effekt erzielen Sie natürlich auch, wenn das Menü mehrere solcher überlangen Einträge enthält. Was jetzt noch fehlt, ist das eigentliche Superfish-Skript.
<script type="text/javascript"> 
  /* <![CDATA[ */
     $(document).ready(function(){ 
         $("ul.sf-menu").supersubs({ 
             minWidth:    12,   
             maxWidth:    27,   
             extraWidth:  1     
                               
         }).superfish();                                              
     });  
 /* ]]> */
 </script>

 
Ruft man jetzt die gleiche Seite im Browser auf, ergibt sich ein völlig anderes Bild. Denn nun sieht das Ganze folgendermaßen aus:
[Beispiel anzeigen]

Bilder


Der lange Menüeintrag wird nicht mehr automatisch umbrochen. Um das zu erreichen, muss man allerdings nicht nur die supersub.js einbinden. Zusätzlich sind drei weitere Angaben nötig.
  • minWidth – Hierüber legt man die Mindestbreite der Untermenüs fest. Der angegebene Wert wird dabei als EM interpretiert.
  • maxWidth – Die maximale Breite der Untermenüs bestimmt man damit. Auch hier gilt, dass der Wert als EM interpretiert wird. Testen Sie, ob die angegebene Maximalbreite tatsächlich für alle langen Menüeinträge ausreicht. Denn überschreitet die Länge eines Eintrags den hier angegebenen Wert, wird dieser trotz eingebundenem supersub.js umbrochen.
  • extraWidth – Hierüber sollen mögliche Rundungsdifferenzen ausgeglichen werden. Überprüfen Sie selbst, ob sich durch die üblicherweise verwendeten Werte 1 und 0 irgendwelche Unterschiede in den einzelnen Browsern bemerkbar machen.

Damit das Skript überhaupt funktioniert, muss zunächst supersubs() aufgerufen werden. Erst danach darf der Aufruf von superfish() erfolgen.


Weitere (optische) Anpassungen

Die Superfish-Menüs werden optisch prinzipiell über drei CSS-Dateien gesteuert:
  • superfish.css – Das ist die normale CSS-Datei, die immer eingebunden wird.
  • superfish-vertical.css – Hierbei handelt es sich um die CSS-Datei für vertikale Superfish-Menüs.
  • superfish-navbar.css – Das ist die CSS-Datei, die für die in diesem Tutorial bereits vorgestellten doppelten Menüleisten verwendet wird.
Diese Dateien sind logisch aufgebaut und vergleichsweise gut kommentiert. Anpassungen sind somit jederzeit möglich. Nichts ändern sollte man übrigens an den Klassennamen. Denn wenn man später beispielsweise ein anderes Plug-in integrieren möchte, das auf Superfish aufsetzt, könnte das zu Problemen führen. Daher lässt man üblicherweise Klassennamen unverändert.


Fazit

Superfish gehört sicherlich nicht zu den jQuery-Plug-ins, die die meisten Optionen zu bieten haben. Dennoch weiß das Plug-in durchaus zu überzeugen. Denn mit erstaunlich wenig Aufwand lassen sich auf Superfish-Basis erstklassige Menüs erzeugen.



DVD-Werbung

Passend zum Inhalt empfehlen wir: Photoshop-Workshop-DVD - Webdesign

Verwandle deine Stylevorlage! Dieses Webdesign-Training für Photoshop stellt mit seinen 32 Stunden Video-Training und diversen Text-Workshops eine breite Basis dar, um deine Inhalte meisterhaft ins Web zu transportieren!

  • Webdesign mit Photoshop: alle erstellten Layouts mit PSD-Arbeitsdateien
  • Umsetzung erstellter Weblayouts in HTML/CSS und jQuery
  • SEO-Tipps vom Feinsten zur Suchmaschinenoptimierung

Bring Pep ins Web! Mit diesem Training erhältst du für bestes Webdesign das richtige Know-how!

Erhältlich im Shop ... oder in der Kreativ-Flatrate

Kommentare
Portrait von dickerfreddy
  • 05.06.2010 - 14:04

hallo, super erklärt werde ich mal probieren

Portrait von websmurf
  • 28.05.2010 - 08:12

Werde mir Superfish bei Gelegenheit mal nächer anschauen. Könnte mir bei dem einen oder anderen Projekt helfen.


Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
© 2002 - 2016 PSD-Tutorials.de – ein Projekt mit der 4eck Media GmbH & Co. KG
x
×
×