Tutorialbeschreibung

Webmenüs mit Hover-Effekt

Webmenüs mit Hover-Effekt

Es gibt verschiedene Möglichkeiten, ein Menü mit einem Mouseover-Effekt zu erstellen. In diesem Kurztutorial zeige ich euch eine Variante, wie ihr das Menü mit nur einem Bild, ohne JS und Flash, erstellen könnt.


Schritt 1:

Ihr öffnet Photoshop (oder Gimp, Paint Shop Pro etc.) und zeichnet euch ein Menü. Wichtig dabei ist, dass jeder Button gleich breit ist.

Bilder

Schritt 2:

Wenn ihr damit fertig seid, dann dupliziert ihr die Ebene und verschiebt diese so, dass die Menüs untereinander zu sehen sind. Nun ist eure Kreativität gefragt. Menü Nr.1 ist das Ausgangsbild, Nr.2 erscheint beim Mouseover, Nr.3 beim Klick. Ich empfehle euch, Nr.2 etwas heller als Nr.1 zu erstellen, Nr.3 mit einer anderen Farbe.

Bilder


Schritt 3:

Nun geht es an das Programmieren. Ich empfehle euch, bevor ihr das Menü in eure Seite einbindet, es vorher in eine leere HTML-Datei einzufügen und zu testen.

Also, erstellt euch eine leere HTML-Datei, der Name ist egal.  Erst rufen wir die CSS-Datei, die wir als Nächstes erstellen,  auf, in diesem Beispiel heißt die Datei css-sprites.css:

<link rel="stylesheet" rev="stylesheet" href="css-sprites.css" type="text/css" media="screen" />
Als Nächstes erstellen wir einen body mit einer ungeordneten Liste (<ul>), die im <div id="navigation"> liegt,  mit den jeweiligen Links als <li> mit jeweils derselben ID, die ihr in der CSS benutzen werdet, also könnt ihr sie euch aussuchen, solange sie mit den IDs der CSS-Datei übereinstimmen:

<body>
 <div id="navigation">
    <ul>
      <li id="nav-news"><a href="http://www.URL.tdk/">Titel1</a></li>
      <li id="nav-reviews"><a href="http://www.URL.tdk/">Titel2</a></li>
      <li id="nav-tips"><a href="http://www.URL.tdk/">Titel3</a></li>
      <li id="nav-contacts"><a href="http://www.URL.tdk/">Titel4</a></li>
    </ul>
  </div>
</body>


Das wäre es eigentlich. Hier die komplette Beispiel-Datei für die Faulen unter uns : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>.net CSS sprites</title>
  <link rel="stylesheet" rev="stylesheet" href="css-sprites.css" type="text/css" media="screen" />
</head>
<body>
  <div id="navigation">
    <ul>
      <li id="nav-news"><a href="#">News</a></li>
      <li id="nav-reviews"><a href="#">Reviews</a></li>
      <li id="nav-tips"><a href="#">Tips</a></li>
      <li id="nav-contacts"><a href="#">Contacts</a></li>
    </ul>
  </div>
</body>
</html>

Schritt 4:
Nun geht es an die CSS-Datei.  Wir erstellen den Style der navigation div, also z.B.

#navigation {
width: 500px;
height: 40px;
overflow: hidden;
}


Width und height passt ihr jeweils an die Größe eines Menüs an. Jetzt kommt eine weitere Zeile hinzu, die wohl wichtigste Zeile für das Menü:

#navigation a {
display: block;
width: 125px;
height: 40px;
background-image: url(nav-bar.png);
text-indent: -5000px;

}


Bei width und height tragt ihr die Größe der jeweiligen Buttons ein; entscheidend ist hier die Breite. Wenn ihr beim Erstellen des Menüs nicht auf die gleichmäßige Breite der Buttons geachtet habt, könnt ihr von vorne anfangen, selber schuld. Bei background-image tragt ihr die URL zum erstellten Bild ein. text-indent verschiebt die Textlinks außerhalb des sichtbaren Bereiches. Warum wir überhaupt den Text bei den Links eintragen? Es ist besser für Suchmaschinen.

Nun seid ihr fast fertig. Ihr erstellt für jeden Link eine neue Zeile. Die Namen dabei sind die IDs der <li>s in der HTML Datei. Also z.B.

#nav-news a {background-position: 0 0;}
#nav-news a:hover {background-position: 0 -50px;}
#nav-news a:active {background-position: 0 -100px;}
 
#nav-reviews a {background-position: -125px 0;}
#nav-reviews a:hover {background-position: -125px -50px;}
#nav-reviews a:active {background-position: -125px -100px;}

#nav-tips a {background-position: -250px 0;}
#nav-tips a:hover {background-position: -250px -50px;}
#nav-tips a:active {background-position: -250px -100px;}

#nav-contacts a {background-position: -375px 0;}
#nav-contacts a:hover {background-position: -375px -50px;}
#nav-contacts a:active {background-position: -375px -100px;}

Jetzt müsst ihr die Längen- und Höhenangaben an euer Menü anpassen.  Hier reicht auch nur das Herumexperementieren. Die erste Zahl ist dabei der horizontale Abstand des Buttons vom Anfang des Bildes. Wenn euer Menü an der Kante des Bildes liegt und jeder Button 156px groß ist , dann ist die erste Zahl für #Button1 a, #Button1 a:hover und #Button1 a:active 0, für #Button2 a, #Button2 a:hover und #Button2 a:active -156px, für #Button3 a, #Button3 a:hover und #Button3 a:active -312px und so weiter und so fort. Die zweite Zahl ist der vertikale Abstand der Menüs von der Kante des Bildes. Für alle Buttons ist es dasselbe. Also entweder den Abstand in Pixeln abmessen oder einfach ausprobieren.

Hier, für die Faulen, die gesamte CSS-Beispiel-Datei: 


* {
padding: 0;
margin: 0;
}

body {
padding: 30px;
}


#navigation {
width: 500px;
height: 40px;
overflow: hidden;
}

#navigation ul {
list-style: none;
}

#navigation li {
display: inline;
float: left;
}

#navigation a {
display: block;
width: 125px;
height: 40px;
background-image: url(nav-bar.png);
text-indent: -5000px;
}

#nav-news a {background-position: 0 0;}
#nav-news a:hover {background-position: 0 -50px;}
#nav-news a:active {background-position: 0 -100px;}
#nav-reviews a {background-position: -125px 0;}
#nav-reviews a:hover {background-position: -125px -50px;}

#nav-reviews a:active {background-position: -125px -100px;}
#nav-tips a {background-position: -250px 0;}
#nav-tips a:hover {background-position: -250px -50px;}
#nav-tips a:active {background-position: -250px -100px;}
#nav-contacts a {background-position: -375px 0;}
#nav-contacts a:hover {background-position: -375px -50px;}
#nav-contacts a:active {background-position: -375px -100px;}

Wenn ihr das Menü sehen wollt, einfach die Arbeitsdateien herunterladen und die HTML-Datei mit einem Internet-Browser eures Vertrauens öffnen. Auch die psd-Datei des Menü-Bildes ist dort vorhanden!


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Samuelll
  • 20.09.2009 - 20:17

Das Tut ist okay. Allerdings bini ch kein Freund von Menüs wo alle Buttons gleich lang sein Müssen. Das wird spätestens ein Problem bei
den Links | Home | Bio - und Verfahrenstechnik |

Portrait von spatzerl
  • 20.09.2009 - 19:38

Danke, ist super ausführlich beschrieben, ich werd es auch noch ausprobieren...

Portrait von mohnhaupt
  • 20.09.2009 - 14:58

Einfach nur HERVORRAGEND!! Danke für dieses Tut.

Portrait von Wollito
  • 20.09.2009 - 14:25

Genau das brauchte ich gerade :-D

Danke für das Tutorial :-)

x
×
×