Anzeige
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 wildpigs
  • 30.12.2011 - 10:20

sehr verständlich erklärt, auch für Anfänger wie mich

Portrait von Uchiha_Sasuke
  • 10.11.2011 - 10:06

selbst für mich als Anfänger sehr einfach beschrieben. Vielen Dank!

Portrait von Kloppy
  • 22.01.2011 - 05:43

Super Tutorial, danke!

Portrait von Kloppy
  • 22.01.2011 - 05:39

Super Tutorial, danke!

Portrait von quirinp
  • 11.08.2010 - 00:25

Ich hätte nie gedacht, dass es möglich wäre die Buttonfrage auf diese Art zu lösen.
Cool, Gut durchstrukturiert, und Ladezeitsparend.
Danke!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 23.06.2010 - 15:18

Danke für das gute Tutorial.

Portrait von UltimateX
  • 20.06.2010 - 14:03

Gute Erklärung, kurzes Tut. Danke.

Portrait von fritz222
  • 19.05.2010 - 20:16

Wirklich gutes Tutorial. Thx

Portrait von joomla15
  • 27.04.2010 - 11:03

Ein schöner erfrischender Beitrag!
Bitte noch mehr solcher Kurz-Workshops.

Portrait von Mahoon
  • 05.03.2010 - 00:03

Sehr schöne Erklärung.
Nur leider hänge ich total fest, da ich gerne eine vertikale Navi hätte. Ich hab auch schon gegoogelt, aber es gibt nur Beispiele für eine horizontale Navi. Vielleicht gibt es ja mal noch ein Tut dazu. Würde mich freuen...

Portrait von stempflea
  • 05.02.2010 - 10:06

sehr schön erklärt, vor allem Danke für den Code ;-)

Portrait von absurt
  • 12.01.2010 - 14:15

Echt super und es funktioniert!!!
Viele Dank auch für die Beschreibung der "Dummen" ;-)

Portrait von DarkMoonglave
Portrait von xad
xad
  • 07.01.2010 - 09:43

Echt fein erklärt :)

Portrait von angramanju
  • 03.01.2010 - 17:32

Danke, du hast mir jede Menge Kopfzerbrechen erspart...

Portrait von mohnhaupt
  • 01.01.2010 - 08:57

Danke für die Super Erklärung

Portrait von alex0508
  • 14.12.2009 - 10:05

Sehr gut, kann man immer gebrauchen. Ein kleines Online-Demo würde mir bei solchen Tutorials immer gefallen.

Portrait von qazwsx
  • 14.12.2009 - 11:17

Lad dir einfach die angehängten Dateien. Dort ist eine Demp Datei.

Portrait von silver129
  • 30.10.2009 - 22:21

Werde ich bestimmt demnächst mal mit einbinden. Einfach beschrieben. Toll, Hut ab!

Portrait von Brooker
  • 26.09.2009 - 09:08

super verständlich, einfach beschrieben, leicht nachzuvollziehen und dann noch die Erleichterung für Suchmaschinen
einfach genial

x
×
×