jQuery Superfish-Menü für Magento

Das jQuery-Plugin Superfish ist eine Erweiterung von Suckerfish und wohl das beste Skript um dynamische Dropdown-Menüs zu erzeugen. Die Handhabung und Integration des Scripts ist sehr einfach.

Voraussetzung: Installation von jQuery Base oder manuelle Installation von jQuery.

Alle benötigten Dateien finden Sie am Ende des Tutorials als Download.

Umsetzung

Wir verwenden hier das default Interface und Theme. Bitte passen Sie das entsprechend Ihrem Shop an.

1. Skin - folgende Dateien werden in Ihrem Skin benötigt:
- skin\frontend\default\default\js\hoverIntent.js
- skin\frontend\default\default\js\superfish.js

- skin\frontend\default\default\images\arrows-ffffff.png
- skin\frontend\default\default\images\shadow.png

- skin\frontend\default\default\css\superfish.css

2. Änderungen der app\design\frontend\default\default\layout\page.xml
Das Menü-Javascript von Magento benötigen wir nicht mehr. Deshalb kommentieren Sie folgende Zeilen aus:

...
<action method="addJs"><script>varien/menu.js</script></action>
...
<action method="addItem"><type>js</type><name>varien/iehover-fix.js</name><params/><if>lt IE 7</if></action>
...

ändern in:

...
<!--
<action method="addJs"><script>varien/menu.js</script></action>
-->
...
<!--
<action method="addItem"><type>js</type><name>varien/iehover-fix.js</name><params/><if>lt IE 7</if></action>
-->
...

und fügen Sie nun in den gleichen Block folgende Zeilen ein:

<!-- Superfish BEGIN -->
<action method="addItem"><type>skin_js</type><name>js/hoverIntent.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/superfish.js</name></action>
<action method="addItem"><type>skin_css</type><name>css/superfish.css</name></action>
<action method="addItem"><type>skin_css</type><name>css/superfish-navbar.css</name></action>
<!-- Superfish BEGIN -->

Wenn Sie die Navbar von Superfish nicht einsetzen möchten, lassen Sie die Datei superfish-navbar.css einfach aus.

3. Extension Mxperts Superfish
Die Extension befindet sich in der ZIP-Datei am Ende des Tutorials. Ich zeige hier nur unsere eigene Funktion drawSuperfish(), die dann im Template ausfgerufen wird.

<?php

class Mxperts_Superfish_Block_Navigation extends Mage_Catalog_Block_Navigation
{
    public function drawSuperfish($_categories, $_path, $_level, $_result = '', $_maxLevel=3) {
      $_level++; $_i = 0; $_j = 0; // Variablen inistalisieren
      foreach($_categories as $category) { $_j++; } // Gesamtanzahl     

      if ($_level > 1){ $_result .= '<ul>';};

      foreach($_categories as $category) {
        if ($category->getIsActive()) { // Nur wenn die Kategorie aus aktiv ist ...
          $style = ''; // Style wird gesetzt bei aktiven Elementen
          $active = ''; // Aktivklasse wird auch gestzt bei aktiven Elementen
          $position = 'mid '; // Position: first, mid oder last; Kann via css verwendet werden
          if ($_i == 0) { $position = 'first '; }
          if ($_i == $_j-1) { $position = 'last '; }
          $_i++;
          $position .= ' pos-'.$_i . ' '; // Position als Klasse pos-1 bis pos-n          

          if (in_array($category->entity_id, $_path, True)) { $style = ' style="font-weight:bold"; '; $active = 'active '; } // Falls ID im aktiven Pfad, auf aktiv setzen

          // Durch Rekursion wird das Ergebnis erstellt
          $_result = $_result . '<li class="'.$active.$position.'" id="tv_'.$category->entity_id.'"><a '.$style.'href="'.$this->getCategoryUrl($category).'"><span>'. $category->getName() .'</span></a>';

          if (($category->hasChildren()) && ($_level <= $_maxLevel)) {
            $_result = $this->drawSuperfish($category->getChildren(), $_path, $_level, $_result, $_maxLevel); // Rekursiver Aufruf
          }
          $_result .=  '</li>';

        }
      }

      if ($_level > 1) { $_result .= '</ul>'; };     

      return $_result;
    }
}

Wie sie anhand der Kommentare sehen, ergeben sich gute Gestaltungsmöglichkeiten via CSS. Anbei ein Ausschnitt aus dem Quellcode.

Falls Sie weitere Infos zur Extensions-Programmierung möchten, finden Sie den Einstieg in unserem Extensions Tutorial.

4. Template app/design/frontend/default/default/template/catalog/navigation/top.phtml

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category   design_default
 * @package    Mage
 * @copyright  Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
 * @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>
<?php
/**
 * Top menu for store
 *
 * @see Mage_Catalog_Block_Navigation
 */
?>
<div class="header-nav-container">

    <div class="header-nav">
        <h4 class="no-display"><?php echo $this->__('Category Navigation:') ?></h4>
        <ul class="sf-menu sf-navbar">
          <?php echo $this->drawSuperfish($this->getStoreCategories(), $this->getCurrentCategoryPath(), 0, '' , 3); ?>
        </ul>
    </div>
    <?php echo $this->getChildHtml('topLeftLinks') ?>
</div>

<script type="text/javascript">
jQuery(function(){
  jQuery('ul.sf-menu').superfish({
    pathClass: 'active',
    delay:       1000,                            // one second delay on mouseout
    animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation
    speed:       'fast'                          // faster animation speed
  });
});
</script>

Möchten Sie mehr als 3 Navigationseben anzeigen, ändern Sie den letzten Parameter beim Aufruf der Funktion drawSuperfish(…).

Ohne großarte CSS-Anpassung sollte das dann so sein wie in unserem Shop www.demo-store.de. Wichtig: Das Installieren & Aktivieren der Erweiterung Mxperts-Superfish nicht vergessen!