Beginnen wir wie gewohnt mit dem HTML-Teil:

HTML
<div id="nav">
  <ul>
    <li class="top">
      <a href="index.html">
        <strong>Home</strong>
      </a>
      <div class="sub">
        <div>
          <ul>
            <li>
              <a href="#">Sub-Item 1</a>
            </li>
            <li>
              <a href="#">Sub-Item 2</a>
            </li>
            <li>
              <a href="#">Sub-Item 3</a>
            </li>
            <li>
              <a href="#">Sub-Item 4</a>
            </li>
            <li>
              <a href="#">Sub-Item 5</a>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li class="top">
      <a href="#">
        <strong>About</strong>
      </a>
      <div class="sub">
        <div>
          <ul>
            <li>
              <a href="#">One Sub-Item</a>
            </li>
            <li>
              <a href="#">Another Sub-Item</a>
            </li>
            <li>
              <a href="#">Still a Sub-Item</a>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#">
        <strong>Contact</strong>
      </a>
    </li>
  </ul>
</div>

Wie gewohnt eine ungeordnete Liste für die Haupt-Navigation und jeweils eine für die Sub-Navigationen. Um die charakteristischen Ecken hinzubekommen, müssen zwei Elemente ineinander verschachtelt und gegeneinander verschoben werden. Das macht den Quelltext Tag-intensiver. In meinen Augen jedoch noch in einem vertretbaren Rahmen und weit entfernt von klassischer "Diveritis".

Als nächstes kommen wir zum CSS:

CSS
@font-face {
  font-family: 'SilkscreenNormal';
  src: url('slkscr-webfont.eot');
  src: local('☺'), url('slkscr-webfont.woff') format('woff'), url('slkscr-webfont.ttf') format('truetype'), url('slkscr-webfont.svg#webfontUx1SMfhe') format('svg');
  font-weight: normal;
  font-style: normal;
}

ul {
  list-style: none;
}

body {
  background-color: #FFF;
  color: #333;
  font: normal 13px SilkscreenNormal, sans-serif;
}

#nav,
#nav > ul,
#nav > ul > li {
  float: left;
  display: inline;
}

#nav,
#nav > ul {
  width: auto;
  _width: 1%; /* IE6 Hack */
  height: 32px;
}

#nav {
  margin: 50px;
  position: relative;
  border-width: 2px 0;
  border-style: solid;
  border-color: #666;
}

#nav > ul {
  position: relative;
  left: -2px;
  margin-right: -4px;
  padding: 0 10px;
  border-width: 0 2px;
  border-style: solid;
  border-color: #666;
  background: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP///73n/yH5BAAAAAAALAAAAAAEAAQAAAIGTACGqBkFADs=') 0 0 repeat;
  *background: url('img/tile1.gif') 0 0 repeat; /* IE6 and IE7 can't handle data uris */
}

#nav > ul > li {
  _width: 1%; /* IE6 Hack */
  margin: 3px 5px;
  position: relative;
}

#nav > ul > li > a {
  display: block;
  position: relative;
  width: auto;
  height: 22px;
  border-width: 2px 0;
  border-style: solid;
  border-color: #999;
  background-color: #FFF;
}

#nav > ul > li > a:link,
#nav > ul > li > a:visited {
  color: #999;
  text-decoration: none;
  background: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP/////fvSH5BAAAAAAALAAAAAAEAAQAAAIGTACGqBkFADs=') 0 0 repeat;
  *background: url('img/tile2.gif') 0 0 repeat; /* IE6 and IE7 can't handle data uris */
}

#nav > ul > li > a:hover,
#nav > ul > li > a:focus,
#nav > ul > li > a:active {
  color: #666;
  background-image: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP/////MmSH5BAAAAAAALAAAAAAEAAQAAAIGTACGqBkFADs=');
  *background-image: url('img/tile3.gif'); /* IE6 and IE7 can't handle data uris */
				}

#nav > ul > li > a strong {
  display: block;
  position: relative;
  width: auto;
  height: 22px;
  padding: 0 10px;
  line-height: 22px;
  left: -2px;
  margin-right: -4px;
  border-width: 0 2px;
  border-style: solid;
  border-color: #999;
}

#nav > ul > li.top > a > strong {
  padding-left: 21px;
  background: url('data:image/gif;base64,R0lGODlhBgAEAIABAJmZmf///yH5BAEAAAEALAAAAAAGAAQAAAIHhI8WocuwCgA7') 5px center no-repeat;
  *background: url('img/arrow.gif') 5px center no-repeat; /* IE6 and IE7 can't handle data uris */
}

#nav > ul > li > a:hover,
#nav > ul > li > a:hover strong,
#nav > ul > li > a:focus,
#nav > ul > li > a:focus strong {
  border-color: #666;
}

#nav > ul > li.top > a:hover strong,
#nav > ul > li.top > a:focus strong {
  background-image: url('data:image/gif;base64,R0lGODlhBgAEAIABAGZmZv///yH5BAEAAAEALAAAAAAGAAQAAAIHhI8WocuwCgA7');
  *background-image: url('img/arrow_hv.gif'); /* IE6 and IE7 can't handle data uris */
}

#nav > ul > li > a:active {
  top: 1px;
}

.sub {
  position: absolute;
  width: auto;
  top: 24px;
  left: 0;
  padding-top: 9px;
  display: none;
}

.sub div {
  position: relative;
  border-top: 2px solid #666;
  border-bottom: 2px solid #666;
}

.sub div ul {
  position: relative;
  left: -2px;
  margin-right: -4px;
  border-left: 2px solid #666;
  border-right: 2px solid #666;
  background: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP///+7u7iH5BAAAAAAALAAAAAAEAAQAAAIGTACGqBkFADs=') 0 0 repeat;
  *background: url('img/tile4.gif') 0 0 repeat; /* IE6 and IE7 can't handle data uris */
}

.sub div ul li {
 border-top: 2px solid #666;
}

.sub div ul li:first-child {
  border-top: none;
}

.sub div ul li a {
  display: block;
  padding: 0 10px;
  line-height: 22px;
  font-size: 12px;
  white-space: nowrap;
}

.sub div ul li a:link,
.sub div ul li a:visited {
  color: #666;
}

.sub div ul li a:hover,´
.sub div ul li a:focus {
  background: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP///93d3SH5BAAAAAAALAAAAAAEAAQAAAIGTACGqBkFADs=') 0 0 repeat;
  *background: url('img/tile5.gif') 0 0 repeat; /* IE6 and IE7 can't handle data uris */
}

.sub div ul li a:active {
  background: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP///8zMzCH5BAAAAAAALAAAAAAEAAQAAAIGTACGqBkFADs=') 0 0 repeat;
  *background: url('img/tile6.gif') 0 0 repeat; /* IE6 and IE7 can't handle data uris */
}

Als erstes binde ich den Pixel-Font "SilkScreen von Jason Kottke ein. Danach folgen die Angaben für die Navigation.

Interessant ist dabei, dass selbst das äußere Element <div id="nav"> die Angabe float: left hat, damit es sich der Breite des Inhalts anpasst. Das kann zu Layout-Problemen führen, weshalb man im praktischen Einsatz darauf achten muss, das Element direkt unterhalb der Navigation mit einem clear: left zu versehen.

Des weiteren kann man sehen, wie die charakteristischen Ecken zustande kommen: Das äußere Element hat jeweils unten und oben eine zwei-Pixel-starke border und das innere jeweils links und rechts. Das innere Element wird dann per left: -2px und margin-righ: -4px um jeweils zwei Pixel nach links und rechts aus dem umgebenden Element hinaus gezogen. Schon ist der gewünschte Effekt da.

Ebenfalls erwähnenswert sind die Grafiken. Da diese nur 4x4 Pixel bzw. 4x6 Pixel groß sind, lohnt es sich, sie in Form von Data URIs einzubinden und so unnötige HTTP Requests zu sparen. Blöderweise können IE6 und IE7 damit nicht umgehen, weshalb die richtigen Grafiken ebenfalls eingebunden werden müssen. Diese werden dann mithilfe des Star-Hack den beiden Browsern zugewiesen.

Bilder in Data URIs umwandeln könnt ihr übrigens mit diesem Online-Tool.

Zum Schluss noch etwas jQuery um die Fly-Out-Menu-Funktionalität zu realisieren:

JavaScript
$(document).ready( function() {
  $('#nav li.top').hover( function() {
    $(this).find('div').stop(true, true).fadeIn('slow');
  }, function() {
    $(this).find('div').stop(true, true).fadeOut('slow');
  });
});

Ich denke, das ist die spartanischste Lösung und bedarf keiner weiteren Erläuterung.

Das war es auch schon. Die Navigation ist beliebig per Copy&Paste erweiterbar, denkt nur daran, den li-Elementen, die eine Sub-Navigation beinhalten, die Klasse top zu verpassen, damit die Fly-Out-Menu-Funktionalität gewährleistet ist.

Ansonsten wünsche ich viel Spaß mit der Navigation. Bei Fragen bitte wie immer die Kommentar-Funktion nutzen. Und bei Gefallen fleißig via Twitter und Facebook verbreiten. Vielen Dank

Verwandte Beiträge:

• Navigation im Googlemail-Style mit jQuery
• Animierte Navigation mit jQuery
• Navigation mit JavaScript

Als erstes braucht ihr eure User-ID und eine Application-ID für die Seite, auf der ihr den Like-Button einbauen möchtet. Die User-ID bekommt ihr, indem ihr folgendes in die Adress-Zeile eures Browsers eingebt:

graph.facebook.com/euer.name

Vereinfacht gesagt: Geht auf euer Facebook-Profil und ersetzt das www in der Adresse durch "graph". Auf der dann erscheinenden Seite, findet ihr eure User-ID.

Die Application-ID wiederum könnt ihr generieren, indem ihr auf folgender Seite euren Blog eintragt:

http://developers.facebook.com/setup/

Nun sind die Grundvoraussetzungen erfüllt, der Like-Button kann eingebunden werden. Im folgenden Beispiel zeige ich, wie man das in der Einzelansicht eines Artikels macht. Dafür müssen wir im Kopf- und Fußbereich, sowie unterhalb des Artikels etwas Code eingeben.

Fangen wir mit dem Kopfbereich an:

HTML/PHP
<?php if ( is_single() ) : ?>
  <meta property="fb:admins" content="eure_user_id" />
  <meta property="fb:app_id" content="eure_app_id" />
  <meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
  <meta property="og:title" content="<?php echo get_the_title(); ?>" />
  <meta property="og:type" content="article" />
<? endif; ?>

Diese fünf speziellen Facebook-Meta-Angaben müssen in der header.php innerhalb der head-Tags gesetzt werden. Sie verraten Facebook wem der Blog gehört, um welchen Blog es sich handelt, wie er heißt, welchen Titel die aktuelle Seite hat und um welchen Inhaltstyp es sich handelt. Natürlich müsst ihr eure_user_id und eure_app_id durch die entsprechende ID ersetzen.

Als nächstes binden wir den nötigen JavaScript-Kram im Fußbereich ein:

HTML/JavaScript
<?php if ( is_single() ) : ?>
  <div id="fb-root"></div>
  <script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
  <script type="text/javascript">
    window.fbAsyncInit = function() {
      FB.init({appId: 'eure_app_id', status: true, cookie: true, xfbml: true});
    }
  </script>
<?php endif; ?>

Das wird in die footer.php direkt über dem abschließenden body-Tag eingefügt. eure_app_id ist auch hier entpsrechend zu ersetzen.

Nun muss der Button selbst noch auf der Artikelseite eingebunden werden:

HTML
<fb:like href="<?php the_permalink() ?>" layout="standard" show_faces="false" width="xyz" action="like" colorscheme="light" font="trebuchet ms"></fb:like>

Dies tragt ihr in der single.php da ein, wo der Button hin soll. Die Attribute könnt ihr in gewissem Maße euren Präferenzen anpassen. Hier erfahrt ihr, was möglich ist.

Hat man das alles eingetragen, werden auf der Einzelansicht eines Artikels die nötigen Meta-Angaben angezeigt, das entsprechende JavaScript für den Like-Button wird eingebunden und der Like-Button selbst erscheint ober- oder unterhalb des Artikels - je nachdem, wo ihr ihn eingefügt habt.

Sollte euch das alles zu tricky sein, könnt ihr entweder die iframe-Variante einbinden oder auf das WordPress-PlugIn von Bottomless zurückgreifen: Like.

Noch ein paar Worte zur Performance. Das Einbinden des Like-Button verlängert natürlich die Ladezeit eures Blogs. Allerdings sprechen wir hier von WordPress - hier ist es normal, dass auf jeder Seite drei zusätzliche JavaScript-Dateien und zwei zusätzliche Stylesheets eingebunden werden, weil irgendwo im Blog mal eine Lightbox aufgehen soll. Will heißen: Denkt darüber nach, ob ihr den Button einbauen wollt, aber bedenkt, dass euer System sowieso nicht Performance-optimiert ist.

Es sei denn, ihr seid bezüglich dieses Themas sensibilisiert und habt entsprechende Schritte unternommen, eurem Blog auf die Sprünge zu helfen.

Ansonsten wie immer: Bei Fragen schreibt einen Kommentar. Bei Gefallen bookmarkt den Artikel. Danke!

Verwandte Beiträge:

• Fancy Login-/Logout-Button für deinen WordPress-Blog
• IKEA, Facebook und der Segen des “Photo Tagging”
• Animierte Image-Caption mit jQuery unter WordPress

Hinweis:

Die CSS-Eigenschaft background-position-x bzw. background-position-y ist eine Erfindung von Microsoft und funktioniert leider nur im Internet Explorer und in Webkit-Browsern. Deshalb gibt es im jQuery-Skript eine Browser-Weiche. Im Firefox und im Opera verschwindet die Grafik einfach nur, der "Rising Curtain"-Effekt findet also nicht statt.

Kommen wir aber zum eigentlichen Tutorial:

Heute möchte ich zeigen, wie man input-Felder in Formularen mithilfe des "Rising Curtain"-Effekts und jQuery interessanter gestalten kann, wenn der Fokus auf ihnen liegt. Alles was man dafür braucht, ist eine kleine Hintergrundgrafik mit einem Farbverlauf und ein paar Zeilen jQuery. Als erstes aber wenden wir uns dem HTML-Teil zu:

HTML
<div>
   <span>
      <input type="text" id="input1" />
   </span>
   <label for="input1">Input 1</label>
</div>

Dieser bedarf wohl keiner großen Erklärung. Es gibt ein input-Feld plus dem dazugehörigen Label. Das input-Feld ist in span-Tags eingefasst, welche für den Rand sorgen.

Als nächstes der CSS-Teil:

CSS
div {
   height: 24px;
   margin-bottom: 10px;
   clear: left;
}

   span {
      height: 24px;
      float: left;
      display: inline;
      margin-right: 10px;
      border: 1px solid #999;
}

   span.active {
      border-color: #063050;
   }

      input {
         display: block;
         width: 200px;
         height: 18px;
         padding: 2px 4px;
         line-height: 18px;
         background: #FFF url('img/gradient.jpg') 0 0 repeat-x;
         border: 1px solid #FFF;
         color: #063050;
      }

   label {
      height: 24px;
      float: left;
      display: inline;
      line-height: 24px;
      cursor: pointer;
   }

span und label werden mit float: left nebeneinander angeordnet. Das input-Feld bekommt einen weißen Rand, damit der dunkle Hintergrund nicht an den dunklen Rand des span-Elements klatscht. Der Hintergrund wiederum stellt einen Farbverlauf von dunkelblau zu weiß dar, der mehr als doppelt so hoch wie das input-Feld ist.

Kommen wir nun zum jQuery-Teil:

JavaScript
jQuery(document).ready(function($) {
   $('input').focus( function() {
      $(this).parent().addClass('active');
      if ( jQuery.browser.webkit || jQuery.browser.msie ) {
         $(this).animate({'background-position-y' : '-28px'}, 500, 'linear');
      } else {
         $(this).animate({'background-position' : '0 -28px'}, 0, 'linear');
      }
   });
   $('input').blur( function() {
      $(this).parent().removeClass('active');
      if ( jQuery.browser.webkit || jQuery.browser.msie ) {
         $(this).animate({'background-position-y' : '0'}, 500, 'linear');
      } else {
         $(this).animate({'background-position' : '0 0'}, 0, 'linear');
      }
   });
});

Liegt der Fokus auf einem input-Feld, bekommt das umschließende span-Element die Klasse "active" zugewiesen und der Rand wird dunkelblau. Außerdem verschiebt sich der Hintergrund des input-Feldes nach oben mithilfe der animate()-Funktion von jQuery. Das ist der so genannte "Rising Curtain"-Effekt, durch den der Hintergrund des input-Feldes heller wird. Gesteuert wird das ganze über die CSS-Eigenschaft background-position-y.

So einfach ist das. Das ganze lässt sich natürlich auch bei einer textarea anwenden. Denkt aber daran, dass die Hintergrund-Grafik entsprechend groß sein muss. Auch ist es denkbar, die Hintergrund-Grafik ganz aus dem sichtbaren Bereich fahren zu lassen, so dass das input-Feld weiß wird. Der Kreativität sind kaum Grenzen gesetzt.

Das war es auch schon. Bookmark setzen oder dieses Tutorial via twitter durch den Äther jagen, wird wie immer gern gesehen. Bei Fragen und Anregungen steht die Kommentar-Funktion zur Verfügung. Nichts neues also.

Verwandte Beiträge:

• Hover- und Spotlight-Effekt in Bildergalerie mit jQuery
• Animierte Navigation mit jQuery
• Navigation im Googlemail-Style mit jQuery

So entwickeln sich CSS-Transitions von der Spielerei zur ernsten Alternative zu JavaScript, wenn es um Animationen im Webdesign geht. Deshalb habe ich 7 Tutorials rausgesucht, die einen Überblick über die Möglichkeiten von CSS-Transitions geben.

1. CSS: Transition Timing Functions

Der Artikel behandelt die Eigenschaften transition-duration und transition-timing-function, und beschreibt, wie man Dauer und Geschwindigkeit von Animationen beeinflusst.

2. CSS Transforms and Transitions - The OSX Dock example

Chris Walker zeigt, wie man den Mac OSX-Dock nur mithilfe von CSS3 nachbauen kann.

3. Going Nuts with CSS Transitions

Natalie Downe demonstriert, wie man eine Polaroid-Galerie mithilfe von CSS-Transitions baut.

4. Nicer Navigation with CSS Transitions

Schöne Anleitung, wie man Website-Navigationen schöner gestalten kann mit CSS3.

5. Create the accordion effect using CSS3

Der Akkordeon-Effekt nur mit CSS3 und Transitions realisiert.

6. CSS3 Hover Tabs ohne JavaScript

Hover Tabs ohne JavaScript. Über die Praxistauglichkeit dieser Lösung kann man streiten, aber nichtsdestotrotz veranschaulicht sie sehr schön die Möglichkeiten von CSS3.

7. CSS Transitions 101

Zum Abschluss eine schöne Gesamtübersicht zum Thema CSS-Transitions auf Webdesigner Depot.

Ich hoffe, ihr habt ein paar hilfreiche Sachen gefunden. Zwar surfen viele Leute noch immer mit einem veralteten Browser, der keine CSS-Transitions unterstützt, doch trotzdem gibt es Möglichkeiten, diese Technik bereits jetzt einzusetzen. Es sind eben die Details, wenn bspw. ein Link nicht schlagartig beim Hover die Farbe ändert, sondern das langsam tut, die eine moderne Website ausmachen. Hat man keinen modernen Browser, kommt man nicht in den Genuss, kann die Seite aber trotzdem nutzen.

Verwandte Beiträge:

• Weichgezeichnete Schrift mit CSS3

Allerdings spielt das title-Attribut auch in Sachen Usability eine Rolle. Es bietet die Möglichkeit, dem Nutzer (tiefergehende) Informationen bezüglich eines Bildes oder eines Links zu geben.

Das title-Attribut bei Verweisen

Links sind immer in ihrer Wortzahl begrenzt, da nur in den wenigsten Fällen ein ganzer Textabschnitt zum Link umfunktioniert wird. Eher sind es Teile von Sätzen oder - außerhalb von Textabschnitten - einzelne Begriffe, die auf andere Seiten verweisen. Auf jeden Fall kriegt man in der Link-Beschriftung nie den Namen der Seite, auf die verwiesen wird, deren Beschreibung, sowie eine kurze Beschreibung des Inhalts der Unterseite - falls nicht auf die Startseite verwiesen wird - unter. Mithilfe des title-Attributs ist das jedoch möglich.

Angenommen, man möchte auf eine Unterseite der Website des deutschen Dackel-Clubs verweisen, die sich mit dem Thema Aufzucht befasst. Erste Möglichkeit ist es, den Link im Text unterzubringen:

abbr title="Hypertext Markup Language" lang="en">HTML
<p>… bei der <a href="dackel-club.tld/path/to/aufzucht/" title="Deutscher Dackel-Club - Informationen zur Aufzucht von Dackeln">Aufzucht</a> von Dackeln …</p>

Ohne das title-Attribut weiß man nicht, wohin der Begriff "Aufzucht" führt. Durch Setzen des title-Attributs kann der Leser es jedoch herausfinden, indem er den Cursor etwas länger über dem Link ruhen lässt.

Eine weitere Möglichkeit ist es, den Link unterhalb des Textabschnitts zu setzen:

abbr title="Hypertext Markup Language" lang="en">HTML
<a href="dackel-club.tld/path/to/aufzucht/" title="Deutscher Dackel-Club - Informationen zur Aufzucht von Dackeln">Deutscher Dackel-Club</a>

Der Leser sieht, dass es weitergehende Informationen beim deutschen Dackel-Club gibt, doch worum es sich genau handelt, kann er aus der Link-Beschriftung "Deutscher Dackel-Club" nicht herauslesen. Das title-Attribut gibt hier mehr Aufschluss.

Nun wird der eine oder die andere vielleicht einwerfen, dass man den Inhalt des Link-Ziels doch aus dem Thema des Textes ableiten kann. Das ist sicherlich richtig, doch will man seine Besucher immer raten lassen oder lieber klar definierte Informationen liefern?!

Das title-Attribut bei grafischen Verweisen

Als erstes zwei Beispiele, die mich überhaupt dazu bewogen haben, diesen Text zu schreiben:

1. Thinking for a Living
2. Interview with Tom Hoops

Bei beiden Seiten tauchen links und rechts des Inhalts zwei große Pfeile auf, die einen mehr oder weniger verfolgen und geklickt werden wollen, jedoch nicht preisgeben, welchen Zweck sie haben. Das ist äußerst irritierend und sollte auf jeden Fall vermieden werden. Das gleiche ist es mit Icons und Piktogrammen. Klar weiß ich, wenn ich ein kleines Stift-Symbol auf einer Seite sehe, dass da was bearbeitet werden kann. Doch was genau, sagt mir die Grafik nicht.

Möchte man also vermeiden, dass Nutzer unnötig klicken müssen, um den genauen Zweck des Links zu ergründen, dann sollte man sich des title-Attributs befleißigen und so unnötiges Herumraten und möglicherweise Frust vermeiden.

Das title-Attribut bei Bildern

Neben dem alt-Attribut, kann man zur Beschreibung von Bildern auf Webseiten auch das title-Attribut benutzen. Dies kann durchaus sinnvoll sein, denn nur die wenigsten Bilder sprechen für sich und den Inhalt des alt-Attributs bekommt der durchschnittliche Besucher nicht zu sehen, es sei denn der Pfad zum Bild ist falsch gesetzt.

Allerdings muss man in diesem Fall etwas relativieren. In letzter Zeit haben sich immer mehr die so genannten Image-Captions durchgesetzt, bei denen die Beschreibung des Bildes direkt unterhalb des selben stehen. Das ist für den Besucher sicherlich sinnvoller, da die Beschreibung so direkt ersichtlich ist, und man nicht erst den Cursor auf dem Bild "parken" muss. Bedient man sich der Image-Captions, wird das Setzen des title-Attributs wirklich zu einer reinen SEO-Aktion.

Verzichtet man jedoch auf Image-Captions, sollte man den Besuchern, die noch über ihr Augenlicht verfügen, den Gefallen tun und das title-Attribut befüllen.

So, das war mein kleiner Diskurs am Morgen. Ich freue mich natürlich immer auf andere Ansichten zu diesem Thema. Wenn ihr also bei dem ein oder anderen Punkt der Meinung seid, das stimmt so nicht, wie ich es geschrieben habe, dann nutzt die Kommentar-Funktion und ergreift das Wort.

Heute geht es um eine horizontale Reiternavigation in WordPress, deren inaktive Reiter dank CSS Browser-übergreifend semi-transparent sind. Dafür muss als erstes ein span-Element innerhalb der Listen-Elemente der Navigation eingefügt werden. Dies geschieht über folgenden PHP-Code-Schnipsel:

HTML/PHP
<div id="header">
   <ul>
      <li<?php if (is_home() || is_paged() ) echo " class=\"current_page_item\""; ?>>
         <span></span>
         <a href="<?php bloginfo( 'url' ); ?>" title="Back to Main    Page">Home</a>
      </li>
      <?php
         echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><span></span><a$2>$3</a>', wp_list_pages('echo=0&title_li=&depth=1'));
      ?>
   </ul>
   <div class="hr"><hr /></div>
</div>

Das span-Element bekommt in diesem Fall die Transparenz. Würde man die Transparenz auf das a-Element anwenden, würde auch die darin liegende Schrift transparent werden und das soll vermieden werden. Außerdem wird vor der Funktion zur Ausgabe der Seiten noch ein Listenelement mit dem Link zur Startseite eingesetzt. Der ist optional und kann auch entfernt werden, wenn man z.B. den Blog-Titel auf die Startseite verlinkt. Schlussendlich befindet sich unterhalb der Navigation noch ein von einem div-Element umschlossenes hr-Element. Unter diesem werden die inaktiven Listenelemente verschwinden.

Kommen wir nun zum CSS:

CSS
#header ul {
   height: 60px;
   position: relative;
   clear: left;
}

   #header ul li {
      width: auto;
      _width: 140px; /* IE6 needs a fixed width */
      height: 60px;
      margin-left: 20px;
      float: left;
      display: inline;
      position: relative;
   }

      #header ul li span {
         display: block;
         width: 100%;
         _width: 140px; /* IE6 needs a fixed width */
         height: 60px;
         position: absolute;
         top: 10px;
         left: 0;
         z-index: 1000;
         background-color: #FFF;
         background: -moz-linear-gradient( top, #c7e0ed, #fff );
         background: -webkit-gradient( linear, left top, left bottom, from(#c7e0ed), to(#fff) );
         opacity: 0.7;
         filter: alpha(opacity=70);
         -moz-opacity: 0.7;
         filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
         -khtml-opacity: 0.7;
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
      }

      #header ul li a:link,
      #header ul li a:visited {
         display: block;
         width: auto;
         height: 24px;
         padding: 13px 20px 23px 20px;
         line-height: 24px;
         position: relative;
         bottom: -10px;
         z-index: 2000;
         color: #0660cf;
         text-decoration: none;
         text-shadow: #FFF 0 1px 2px;
      }

      #header ul li a:hover,
      #header ul li.current_page_item a {
         background-color: #FFF;
         background: -moz-linear-gradient( top, #c7e0ed, #fff ); /* gradient for firefox */
         background: -webkit-gradient( linear, left top, left bottom, from(#c7e0ed), to(#fff) ); /* gradient for chrome and safari */
         position: relative;
         bottom: 0;
         _top: 0; /* special invite for IE6 to get goin' */
      }

      #header ul li a:hover {
         color: #c41604;
      }

      #header ul li a:active {
         color: #0059ce;
         position: relative;
         bottom: -1px;
         _top: 1px; /* special invite for IE6 to get goin' */
      }

.hr {
   height: 30px;
   background-color: #333;
   background: -moz-linear-gradient( top, #333, #555 ); /* gradient for firefox */
   background: -webkit-gradient( linear, left top, left bottom, from(#333), to(#555) ); /* gradient for chrome and safari */
   position: relative;
   z-index: 3000;
}

   .hr hr {
      display: none; /* hiding hr because of the IE. quel surprise! */
   }

Am meisten Platz nehmen hier die Angaben für die Transparenz ein. Das liegt daran, dass alle Eventualitäten - sprich "Browser" - berücksichtigt werden müssen. Dafür lässt sich diese Navigation aber auch mit reinem CSS und ohne PNG-Grafiken umsetzen, die ja im IE6 für Ärger sorgen würden.

Trotzdem funktioniert auch das hier nicht ohne dem ein oder anderen Mätzchen unserer Lieblings-Browser aus Redmond - den Internet Explorern. Der IE6 benötigt eine feste Breite für die Listenelemente. Hier ist also etwas Anpassung nötig, je nachdem wie lang die Beschriftung der Reiter ist. Der IE7 hingegen hat Probleme mit den Hover-Zuständen, so dass die Reiter hier nicht nach oben fahren und intransparent werden, wenn man mit dem Cursor rüberfährt. Das ist ärgerlich, schränkt jedoch die Benutzbarkeit der Seite nicht ein.

Des weiteren habe ich noch etwas CSS3 verwendet. Mit den aktuellen Versionen von Firefox, Safari und Chrome bekommt man deshalb einen Farbverlauf bei den Reitern serviert. In den gleichen Browsern sowie der aktuellen Version von Opera gibt es außerdem noch einen leichten Schlagschatten bei der Link-Beschriftung.

Das ist auch schon alles. Und natürlich ist diese Navigation nichts WordPress-spezifisches. In der Demo gibt es eine statische Variante, die in jeder anderen Seite auch verwendet werden kann.

Ansonsten mein übliches Mantra an dieser Stelle: Wenn ihr Fragen habt oder etwas nicht so funktioniert, wie es soll, nutzt die Kommentar-Funktion. Und wenn euch das Tutorial gefallen hat, würde ich mich freuen, wenn ihr es bookmarked oder twittert. Vielen Dank

Verwandte Beiträge:

• 8Bit-Style-Navigation mit Fly-Out-Menus
• Navigation im Googlemail-Style mit jQuery
• Animierte Navigation mit jQuery

Jede Bildergalerie gewinnt, wenn das Thumbnail-Bild unter dem Cursor durch einen Hover-Effekt hervorgehoben wird und der Nutzer weiß, was gerade Sache ist. Wenn die umliegenden Thumbnails dann auch noch durch einen Spotlight-Effekt abgedunkelt werden, ist es noch leichter für den Nutzer, sich auf das aktuelle Bild zu konzentrieren. Wie man das mit jQuery realisiert, zeige ich jetzt.

Als erstes der HTML-Teil:

HTML
<body class="js">
	<div class="wrap">
		<a href="path/to/image.html" class="image">
			<img src="path/to/image.jpg" alt="" />
		</a>
		<a href="path/to/image.html" class="image">
			<img src="path/to/image.jpg" alt="" />
		</a>
		<a href="path/to/image.html" class="image">
			<img src="path/to/image.jpg" alt="" />
		</a>
	</div>
</body>

Als nächstes der CSS-Teil:

CSS
.wrap {
	width: 321px;
	height: 321px;
	padding: 20px 0 0 20px;
	margin: 30px auto;
	clear: left;
}

	.image {
		width: 77px;
		height: 77px;
		padding: 5px;
		margin: 0 20px 20px 0;
		float: left;
		display: inline;
		position: relative;
		z-index: 10;
		background-color: #CCC;
	}

	.js .image:hover {
		background-color: #36F;
	}

		.image img {
			position: relative;
			z-index: 30;
			border-width: 1px;
			border-style: solid;
			border-color: #666 #999 #999 #666;
		}

		.layer1, .layer2 {
			display: block;
			position: absolute;
		}

		.layer1 {
			width: 87px;
			height: 87px;
			top: 0;
			left: 0;
			z-index: 20;
			background-color: #36F;
		}

		.layer2 {
			width: 77px;
			height: 77px;
			top: 5px;
			left: 5px;
			z-index: 40;
			background-color: #000;
		}

Kleine Anmerkung dazu: Wenn JavaScript im Browser aktiviert ist, wird die Klasse js vom body-Tag entfernt. Geschieht dies nicht, bekommt das a-Tag um die Thumbnails einen :hover-Effekt.

Schlussendlich der jQuery-Teil:

JavaScript
jQuery(document).ready(function($) {
	$('body').removeClass('js');
	var image = $('a.image');
	var html = '<span class=\"layer1\"></span><span class=\"layer2\"></span>';
	image.append(html).find('span').css('opacity', '0');
	image.each( function() {
		$(this).hover( function() {
			$('span.layer1', this).stop().fadeTo(800, 1);
			$(this).siblings().find('span.layer2').stop().fadeTo(800, 0.5);
		}, function() {
			$('span.layer1', this).stop().fadeTo(800, 0);
			$(this).siblings().find('span.layer2').stop().fadeTo(800, 0);
		});
	});
});

Als erstes wird die Klasse js vom body-Tag entfernt. Danach werden die beiden span-Tags eingefügt, die für den Hover- und den Spotlight-Effekt zuständig sind. Danach wird in einer each()-Schleife festgelegt, dass bei einem Hover die span-Tags erscheinen und entsprechend wieder verschwinden.

Das war es auch schon. Falls es Fragen oder Probleme gibt, möchte ich euch wie immer die Kommentar-Funktion nahe legen. Ansonsten freue ich mich natürlich, wenn ihr den Artikel bookmark't oder auf twitter verbreitet.

Verwandte Beiträge:

• “Rising Curtain”-Effekt bei Input-Feldern mit jQuery
• Navigation im Googlemail-Style mit jQuery
• Animierte Navigation mit jQuery

Das einzige was störend sein kann, ist das kleine Smiley, das im Blog erscheint, wenn das PlugIn aktiv ist. Doch das wird man mit vier Zeilen CSS ganz schnell los:

CSS
#wpstats {
   height: 0;
   visibility: hidden;
}

Nun ist das Bild verschwunden, wie es sich für einen "Zähl-Pixel" gehört, verrichtet jedoch weiter seinen Dienst.

Verwandte Beiträge:

• Name des Autors zu post_class() in WordPress hinzufügen
• WordPress-Autoren aus der Website-Statistik rausnehmen
• Facebook-Like-Button per XFBML in WordPress-Blogs einfügen

Hier ein kleiner Trick, wie man mithilfe von CSS3 "Blurred Typo", also weichgezeichnete Schrift, machen kann. Das ganze funktioniert durch den Umweg über die text-shadow-Funktion in CSS3.

Um das Beispiel zu verdeutlichen habe ich eine unspektakuläre Navigation gewählt. Hier der HTML-Teil:

HTML
<ul id="nav">
	<li><a href="index.html">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Contact</a></li>
</ul>

Eine ungeordnete Liste, wie es sich für eine anständige Navigation gehört. Als nächstes der CSS-Teil:

CSS
#nav {
	width: auto;
	clear: left;
	overflow: hidden;
	border-left: 1px solid #EEE;
	list-style: none;
}

#nav li {
	width: auto;
	height: 30px;
	padding: 0 20px 20px 20px;
	float: left;
	border-right: 1px solid #EEE;
	line-height: 30px;
}

#nav li a:link,
#nav li a:visited {
	text-decoration: none;
	color: #CCC;
	text-shadow: 0 0 3px #CCC;
}

#nav li a:hover {
	text-shadow: 0 1px 1px #666;
	color: #093;
}

#nav li a:active {
	color: #999;
	text-shadow: none;
}

Indem man die X- und Y-Offset-Werte bei text-shadow gleich Null setzt, entsteht anstelle des Schatten mehr so etwas wie ein äußeres Leuchten. Da dieses Leuchten die gleiche Farbe wie die Schrift hat, wirkt diese dadurch weichgezeichnet. Beim Überfahren mit der Maus verschwindet dieser Effekt und die Schrift erscheint klar.

Da es sich um eine CSS3-Spielerei handelt, braucht man zur Darstellung einen modernen Browser, wie Safari 4, Firefox 3.5, Opera 10 oder Chrome. Im Internet Explorer geht das ganze wie erwartet nicht, was aber kein Weltuntergang ist, da die Funktion der Seite ansich dadurch nicht beeinträchtigt wird.

Verwandte Beiträge:

• 7 hilfreiche Tutorials zum Thema Transitions in CSS3
• Navigation im Googlemail-Style mit jQuery
• Hover- und Spotlight-Effekt in Bildergalerie mit jQuery

Um meine Besucher auf meine diversen Profile in Social Communities aufmerksam zu machen, habe ich rechts in der Sidebar eine Social Icon Bar installiert, deren Icons bspw. auf Flickr und Xing verweisen. Und damit das nicht so langweilig ist, habe ich den Spaß noch ein wenig mit jQuery befeuert.

Jetzt möchte ich kurz erläutern, wie das geht. Als erstes brauchen wir ein passendes Icon-Set. Ich habe für dieses Tutorial auf die Matte Black Social Media Icons zurückgegriffen, da diese Sammlung u.a. auch ein Xing-Icon beinhaltet. Die Icons bringen wir nun in einem Grafik-Programm mithilfe des Crop-Tools auf die gewünschte Größe, in meinem Fall 40x40 Pixel.

Das machen wir mit allen Icons, die wir benötigen. Danach widmen wir uns dem HTML-Teil:

HTML
<ul id="iconbar">
	<li>
		<span class="s1"></span>
		<span class="s2"></span>
		<span class="s3"></span>
		<span class="s4"></span>
		<a href="http://name.tld/feed/" title="Den RSS-Feed abonnieren">
			<img src="images/rss.png" alt="Den RSS-Feed abonnieren" width="40" height="40" title="Den RSS-Feed abonnieren" />
		</a>
	</li>
</ul>

Basis ist eine ungeordnete Liste. Der Übersichtlichkeit halber habe ich nur einen Listenpunkt angegeben. Die Liste kann natürlich beliebig erweitert werden. Innerhalb der Listenelemente sind vier span-Elemente. Diese bilden die Abdeckungen des jweiligen Icons, welche ähnlich einer Blende zu allen Seiten wegfahren, wenn man mit dem Cursor drüber geht.

Als nächstes kommt der jQuery-Teil:

JavaScript
jQuery(document).ready(function($) {
	$('body').addClass('js_active');
	$('#iconbar li').each(function(i) {
		$(this).hover(function() {
			$('span.s1', this).stop().animate({'left' : '-20px'}, {queue:false,duration:500});
			$('span.s2', this).stop().animate({'top' : '-20px'}, {queue:false,duration:500});
			$('span.s3', this).stop().animate({'right' : '-20px'}, {queue:false,duration:500});
			$('span.s4', this).stop().animate({'bottom' : '-20px'}, {queue:false,duration:500});
		}, function() {
			$('span.s1', this).animate({'left' : '0'}, {queue:false,duration:500});
			$('span.s2', this).animate({'top' : '0'}, {queue:false,duration:500});
			$('span.s3', this).animate({'right' : '0'}, {queue:false,duration:500});
			$('span.s4', this).animate({'bottom' : '0'}, {queue:false,duration:500});
		});
	});
});

Als erstes fügen wir dem body-Element die Klasse "js_active" hinzu. Dadurch werden die span-Elemente sichtbar. So ist dafür gesorgt, dass die Social Icon Bar auch ohne Effekt funktioniert, wenn der Besucher JavaScript deaktiviert hat. Als nächtes wird mit der each()-Funktion auf die einzelnen Elemente der ungeordneten Liste zugegriffen. Fährt der Besucher mit dem Cursor über eines der Listen-Elemente, fahren die span-Elemente ausgelöst durch die animate()-Funktion von jQuery in die jeweils vorgegebene Richtung. Der Wert 500 gibt an, dass dieser Vorgang eine halbe Sekunde dauern soll. Bewegt man den Cursor vom Listen-Element weg, gehen die span-Elemente wieder in ihre Ausgangsposition.

Zum Schluss muss das ganze natürlich noch ansprechend mithilfe von CSS ausgerichtet werden:

CSS
#iconbar {
	clear: left;
	overflow: hidden;
	list-style: none;
}

#iconbar li {
	width: 40px;
	height: 40px;
	margin-right: 10px;
	float: left;
	position: relative;
	overflow: hidden;
	border: 1px solid #999;
	-moz-border-radius: 2px;
	-khtml-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

#iconbar li span {
	display: none;
}

body.js_active #iconbar li span {
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	background-color: #FFF;
	opacity: 0.7;
	cursor: pointer;
}

.s1 {
	left: 0;
	top: 0;
}

.s2 {
	top: 0;
	right: 0;
}

.s3 {
	right: 0;
	bottom: 0;
}

.s4 {
	bottom: 0;
	left: 0;
}

Die Listen-Elemente sind 40 Pixel breit und hoch, und werden nach links gefloated. Wichtig beim Listen-Element sind die Angaben position: relative;, damit die darin liegenden span-Elemente absolut positioniert werden können, und overflow: hidden;, damit die span-Elemente beim Mouseover auch wirklich verschwinden. Zusätzlich geben wir den Listen-Elementen noch eine leichte Eckenrundung mit.

Die span-Elemente sind durch die CSS-Angabe display: none; eigentlich unsichtbar. Ist JavaScript allerdings im Browser des Besuchers aktiviert, bekommt das body-Element die Klasse "js_active" hinzugefügt und es greift die darunter liegende Stylesheet-Angabe. Die span-Elemente sind nun 20x20 Pixel groß und absolut positioniert. Durch die Angabe opacity: 0.7; werden sie außerdem leicht durchsichtig und geben einen Blick auf das dahinter liegende Icon frei. Durch die Angabe cursor: pointer; wird der Cursor schon beim Überfahren der span-Elemente zur - für Links charakteristischen - Hand. Das erhöht die User Experience.

Zum Schluss werden die einzelnen span-Elemente noch positioniert und schon ist die Social Icon Bar fertig. Ihr könnt sie wie ich in die Sidebar integrieren oder unter jeden Blog-Eintrag für die Bookmark-Links. Möglichkeiten gibt es wie immer viele.

Solltet ihr noch Fragen haben oder Probleme auftreten, nutzt die Kommentar-Funktion und scheut euch nicht, mir Fragen zu stellen. Ansonsten danke ich für eure Aufmerksamkeit und - falls euch der Artikel gefallen hat - würde mich freuen, wenn ihr ihn einschlägigen Bookmark-Diensten zuführt.

Verwandte Beiträge:

• Navigation im Googlemail-Style mit jQuery
• Animierte Navigation mit jQuery
• Hover- und Spotlight-Effekt in Bildergalerie mit jQuery