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 sychron
  • 25.09.2009 - 12:46

Sehr geschickter CSS-Einsatz! Hut ab!

Portrait von hmoun
  • 25.09.2009 - 10:50

schön beschrieben, leicht verständlich und nachvollziehbar.
Kleine Anmerkung zu Schritt 4: das Stylesheet für
#navigation li {display:inline; float:left;} ist mindestens genauso wichtig, ohne dem wird die vertikale List nämlich nicht horizontal...

Aber sonst: tolles tutorial!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 24.09.2009 - 21:30

Kann ich sicher demnächst mal gebrauchen...

Danke

Portrait von Lady_bunt
  • 24.09.2009 - 16:26

Lady_bunt sagt DANKE :O). Endlich habe ich es verstanden.

Grüße

Portrait von Thujan
  • 24.09.2009 - 15:45

Danke hat mir sehr weitergeholfen.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 24.09.2009 - 14:26

Sehr ausführlich! Sowas such ich schon seit etwas längerem.

Portrait von benjyacki
  • 24.09.2009 - 13:49

super beschrieben Danke!

Portrait von Rasdar
  • 24.09.2009 - 12:07

Nettes Tut. Werd gleich mal ein paar Grafiken ausprobieren

Portrait von stsmigi
  • 24.09.2009 - 10:42

Sehr gut!! Ich suchte schon längst nach einem Weg mein Menü interessanter zu machen. Ich werde es mal ausprobieren und bin schon sehr gespannt!
Vielen Dank für ein tolles Tutorial

Portrait von TiniA
  • 23.09.2009 - 10:15

Das ist eine sehr gute Anleitung! Übersichtlich und verständlich geschrieben.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 22.09.2009 - 15:54

Endlich mal alles auf einen Blick! Vielen Dank dafür! ;)

Portrait von sixdragons
  • 22.09.2009 - 15:29

Sehr gute Anleitung...
Bravo...

Portrait von MavericK89
  • 22.09.2009 - 13:22

gutes tutorial, sehr verständlich erklärt

Portrait von Shoki
  • 22.09.2009 - 11:12

Gutes, kurzes Tut. Hat jemand Ahnung, wie man einen ausgewählten Button eingedrückt belassen kann? Also im aktiven Zustand?

Portrait von elxand
  • 21.09.2009 - 23:26

Super, danke. Die wenigsten werden aber gleichbreite Buttons haben...

Portrait von Pepeperez
  • 21.09.2009 - 12:28

echt feine sache, gefällt mir wirklich sehr! Gutes Tut!

Portrait von s3ba
  • 21.09.2009 - 09:20

Genau das was ich jetzt brauche. Danke.

Portrait von Gerlinde51
  • 21.09.2009 - 00:45

Toll! Endlich mal wieder ein Tut das auch "normale Menschen" verstehen.
Danke

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 20.09.2009 - 21:32

Gut das das mal einer erklärt. Ich hatte mir das mal ganz früher, wo ich begonnen hatte HTML zu lernen bei apple.com abgeschaut.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 20.09.2009 - 21:06

Danke schön, super Tut und sehr gut erklärt!!!

Mehr anzeigen

x
×
×