Freizeitler schreibt über Webdesign und das Netz.

Die Navigation meines vorherigen WP-Themes beinhaltete eine interessante Lösung, um Kategorien als Menüpunkt zu nutzen und beim hovern die jeweils aktuellen Artikel anzuzeigen. Da ich dieses Theme nun ja nicht mehr nutze, möchte ich die Navigation hier einmal vorstellen. In diesem Artikel gibt es eine HTML/CSS-Datei sowie das PHP-Snippet für WordPress separat.

Solide Grundlage

Der Aufbau der HTML-Datei entspricht den gängigen Verfahrensweisen, es handelt sich um eine Liste mit A-Tags. Die Verschachtelung geht bei diesem Beispiel in die zweite Ebene, das heißt es gibt eine Unterliste, die die Posts der jeweiligen Kategorie enthält. Die Navigation wird auf der Internetseite absolut positioniert, damit das restliche Layout sich beim aufklappen nicht verschiebt.

Screenshot des Menüs in Aktion

Das Menü arbeitet mit overflow: hidden und z-index. Ich habe das Stylesheet zu Anschauungszwecken in den Header der HTML geschrieben.

Das Demo des Menüs gibt es hier (CSSDesk, kann direkt bearbeitet werden) oder hier (komplette HTML-Datei).

Das Snippet für WordPress

Um nun das HTML-Menü aus dem Demo in ein funktionierendes WordPress-Menü zu verwandeln, muss lediglich der komplette Container <div id="navigation"> durch dieses Snippet ersetzt werden

<div id="navigation">
 <ul>
  <?php
  $catQuery = $wpdb->get_results("SELECT * FROM $wpdb->terms AS wterms INNER JOIN $wpdb->term_taxonomy AS wtaxonomy ON ( wterms.term_id = wtaxonomy.term_id ) WHERE wtaxonomy.taxonomy = 'category' AND wtaxonomy.parent = 0 AND wtaxonomy.count > 0");
  $catCounter = 0;
  foreach ($catQuery as $category) {
  $catCounter++;
  /* Abstand der Boxen */
  $abstand_vertikal+=50;
  $catStyle = '';
  if (is_int($catCounter / 2)) $catStyle = ' class="catAlt"';
  $catLink = get_category_link($category->term_id);
  echo '<li class="navileft" id="navileft_'.$category->slug.'"><a href="'.$catLink.'" title="'.$category->name.'">'.$category->name.' &raquo;</a>';
  echo '<div class="naviinner"><h5>'.$category->description.'</h5><ul>';
  /* Hier wird die Anzahl der angezeigten Posts in der Vorschau eingestellt. Jetzt: 5 */
  query_posts('cat='.$category->term_id.'&showposts=5');?>
  <?php while (have_posts()) : the_post(); ?>
  <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
  <?php endwhile; ?>
  </ul></div>
  </li>
  <?php }	?>
  <?php
  $abstand_vertikal2=$abstand_vertikal;
  echo '<li id="navi_bottom" style="top: '.$abstand_vertikal2.'px;">&nbsp;</li>'; ?>
  </ul>
</div><!--End Navigation -->

Für WordPress muss nur dieses Snippet eingesetzt werden

Der Code liest die vorhandenen Kategorien aus und lädt 5 Posts in die entsprechenden Unterlisten. Will der Webdesigner die Anzahl der angezeigten Posts verändern, so muss lediglich der Wert bei &showposts=5 geändert werden.
Die Höhe der einzelnen Menüpunkte habe ich mit 50px festgelegt. Soll diese angepasst werden, so ist der Wert für $abstand_vertikal+=50; dafür zuständig. Dieser wird für den Abstand über das CSS (inline) mit top=xx automatisiert festgelegt. Im Stylesheet werden die Menüpunkte aber auch nochmal einzelnd angesprochen, um die Reihenfolge nachträglich zu verändern. Das kann bei Bedarf heraus gelöscht werden.

Weiterführender Tipp: Die Navigationsleiste kann mit der “Smart Sticky Floating Box” am Bildschirmrand mitscrollen.