Erstellen Sie eine coole animierte Navigation mit CSS und jQuery

() translation by (you can also view the original English article)

Animation und visuelles Feedback sind großartige Möglichkeiten, um einen Benutzer bei der Navigation und Interaktion mit einer Website zu unterstützen. Während traditionell Adobe Flash das A und O für alles Animierte war, können wir heutzutage mit der Magie von Javascript Flash ganz vermeiden. Heute werden wir ein wirklich cooles animiertes Navigationsmenü erstellen, das nur CSS und jQuery verwendet.

Demo und Quellcode

Überblick

Das Menü, das wir erstellen, ist im folgenden Screenshot zu sehen. Sie können auch die endgültige Arbeitsversion hier sehen.

Ich werde dieses Tutorial wie folgt in fünf Abschnitte unterteilen:

Grobe Skizze
Ressourcen erstellen
HTML aufschreiben
CSS aufschreiben
Erstellen der Animation mit jQuery

Schritt 1: Grobe Skizze

Lassen Sie uns zunächst sehen, was wir hier tun müssen.

Hier ist eine grobe Vorstellung davon, was wir tun sollten:

Wir werden die Seite in 4 Teile aufteilen, Header, Navigations- und Inhaltsheader und den Rest des Inhalts
Der Header-Bereich ist ein einfacher <div>-Container
Der Navigationsbereich wird in mehrere <div>-Container aufgeteilt, die dem Menüpunkt entsprechen.

Jetzt verwenden wir meistens <ul><li> Container, aber da jeder Menüpunkt einzigartig ist,
Ich sehe die Vorteile der Verwendung von <ul><li> nicht, daher werde ich stattdessen den <div>-Container verwenden.

Der Inhalt ist ein einfacher <div>-Container

Also um es zusammenzufassen

<!-- header section-->
<div id="header"></div>

<!-- navigation section-->		
<div id="navigation" class="container">
	<div><a href="#">home</a></div>
	<div><a href="#">about</a></div>
	<div><a href="#">services</a></div>
	<div><a href="#">solutions</a></div>
	<div><a href="#">contact</a></div>
</div>

<!-- container section-->
<div class="container">
	<div id="content-title"></div>
	<!-- rest of the content -->
</div>

Es könnte hilfreich sein, die Verzeichnisstruktur zu zeigen, die ich bin. Die Verzeichnisstruktur ist wie folgt:

Schritt 2: Ressourcen

Ich gehe davon aus, dass Sie über Grundkenntnisse im Umgang mit Photoshop verfügen, daher werde ich keine zu detaillierten Anweisungen zum Erstellen der Ressourcen geben.
Es gibt mehrere Dinge, die wir erstellen müssen.

Header-Hintergrund
Inhaltstitel
Navigation
Hintergrundstreifen

Wenn Sie diesen Schritt überspringen möchten, können Sie am Ende des Tutorials die vollständige Zip-Datei herunterladen und meine Kopien extrahieren!

Okay, lassen Sie uns den Header-Hintergrund erstellen. Öffnen Sie Photoshop und erstellen Sie eine Leinwand mit 1x181 Pixel. Sie können sie auch vergrößern und dann das Bild zuschneiden.
Erstellen Sie eine Ebene und geben Sie ihr einen linearen Farbverlauf mit der Voreinstellung "Vordergrund zu Hintergrund" für 171 Pixel. Dies ist der Hauptverlauf.
Erstellen Sie eine weitere Ebene und geben Sie ihr einen linearen Verlauf mit der Voreinstellung "Vordergrund zu Transparent" für etwa 10 Pixel am unteren Rand der ersten Ebene, um einen Schatteneffekt zu erzielen.

Hier ist, wie es aussehen sollte, es ist 100x181 px, die ich später auf 1x181 px beschneide.

Speichern Sie dies als 'hdr-bkg.png' in unserem 'img'-Ordner.

Als nächstes erstellen wir den Inhaltstitel. Öffnen Sie erneut Photoshop und erstellen Sie 934x284 Pixel.
Erstellen Sie mit dem entsprechenden Werkzeug ein abgerundetes Rechteck, wählen Sie die erstellte Form aus, erstellen Sie eine neue Ebene, fügen Sie einen Verlauf hinzu und geben Sie ihr einen Schlagschatten.
Dann haben wir so etwas:

Speichern Sie dies als 'content-title.png' im Ordner 'img'.

Lassen Sie uns nun die für die Navigation benötigten Ressourcen erstellen. Wir brauchen zwei Navigationssätze und eine weiße Box.

Die weiße Box ist einfach. Erstellen Sie einfach ein abgerundetes Rechteck von ca. 98 x 58 Pixel und malen Sie es mit Weiß. Stellen Sie sicher, dass der Hintergrund transparent ist.

Speichern Sie dies als 'white.jpg' im Ordner 'img'.

Öffnen Sie für das Navigationselement Ihr Photoshop und erstellen Sie ein Dokument mit einer Größe von 490 x 58 Pixel.
Erstellen Sie ein abgerundetes Rechteck mit ca. 98 x 58 Pixel und fügen Sie Text ein. Wir benötigen zwei Kopien von jedem Text.
Ich habe auf jeden Text einen kleinen Schlagschatten aufgetragen, dies ist natürlich optional. Sie können Ihre eigenen Farben auswählen, um sie hier einzufügen.

Duplizieren Sie nun einfach diese Ebene entlang der horizontalen Linie. Wenden Sie verschiedene Farben und Texte an.

Speichern Sie dies als 'nav.jpg' im Ordner 'img'.

Schließlich habe ich für den Hintergrundstreifen einfach ein Online-Werkzeug namens Stripe Generator verwendet. Die Ausgabe sieht folgendermaßen aus:

Sie können meine Einstellungen hier sehen.
Natürlich können Sie den Streifen auch einfach in Photoshop erstellen, aber warum nicht stattdessen ein hübsches kleines Web-Werkzeug verwenden :-)

Schritt 3: HTML-Code

Notieren wir uns jetzt unseren HTML-Code.

<!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">
<head>
	<title>slick animated menu</title>
  	<!--our CSS file-->
	<link rel="stylesheet" href="css/main.css" type="text/css" />
	<!--jQuery library-->
	<script type="text/javascript" src="js/jquery.js" ></script>
	<!--jQuery plugin, we’ll get to this later-->
	<script type="text/javascript" src="js/jquery-bp.js" ></script>
	<!--Our animation script-->
	<script type="text/javascript" src="js/navigation.js" ></script>
</head>
<body>
	<div id="header"></div>
	<div id="navigation" class="container">
		<div id="home"><a href="home">home</a></div>
		<div id="about"><a href="about">about</a></div>
		<div id="services"><a href="services">services</a></div>
		<div id="solutions"><a href="solutions">solutions</a></div>
		<div id="contact"><a href="contact">contact</a></div>
	</div>
	<div class="container">
		<div class="content">
			<div id="content-title"></div>
			<!-- the rest of the content-->
		</div>
	</div>
</body>

Das ist sehr viel gemäß unserem Spielplan, der in Schritt 1 erklärt wurde.

Ich habe einen Link zu einer 'main.css'-Datei hinzugefügt, die noch erstellt werden muss und
Ich habe auch einige Verweise auf einige Javascript-Dateien hinzugefügt. Da jedes Navigationselement ein Unikat ist, habe ich jedem Element eine ID gegeben.
Wir benötigen weiterhin einen gemeinsamen Stil für jeden Menüpunkt. Dies erleichtert uns die Verwaltung des Stils in späteren Phasen.

Wenn wir mit der Maus über das Menü fahren oder ein Menüelement ausgewählt wird, wird über jedem Navigationselement ein weißes Feld angezeigt. Daher benötigen wir dafür einen weiteren <div>-Container. Das endgültige HTML sieht folgendermaßen aus:

<!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">
<head>
	<title>slick animated menu</title>
  
	<link rel="stylesheet" href="css/main.css" type="text/css" />
	
	<script type="text/javascript" src="js/jquery.js" ></script>
	<script type="text/javascript" src="js/jquery-bp.js" ></script>
	<script type="text/javascript" src="js/navigation.js" ></script>
</head>
<body>
	<div id="header"></div>
	<div id="navigation" class="container">
		<div id="home" class="pri-nav"><div><a href="home">home</a></div></div>
		<div id="about" class="pri-nav"><div><a href="about">about</a></div></div>
		<div id="services" class="pri-nav"><div><a href="services">services</a></div></div>
		<div id="solutions" class="pri-nav"><div><a href="solutions">solutions</a></div></div>
		<div id="contact" class="pri-nav"><div><a href="contact">contact</a></div></div>
	</div>
	<div class="container">
		<div class="content">
			<div id="content-title"></div>
			<!-- the rest of the content-->
		</div>
	</div>
</body>

Speichern Sie dies als 'index.html'. Bis zu diesem Punkt haben wir dies als unsere HTML-Seite:

Schritt 4: CSS

Wenden wir einen grundlegenden Stil auf die Webseite an. Wir beginnen mit der Definition des Hintergrunds und dem Hinzufügen eines Kopfbereichs.

body {
	background: url(../img/body-bkg.jpg) repeat scroll;
	margin: 0;
	padding: 0;
}

.containe r{
	margin: 0pt auto;
	width:950px;
}
#header {
	background: url(../img/hdr-bkg.jpg) repeat-x scroll;
	height:181px;
}

Speichern Sie dies als "main.css" im Ordner "css".

Jetzt haben wir etwas, das aussieht wie:

Fügen wir nun jedem Menüpunkt einen Stil hinzu. Denken Sie daran, wir möchten das weiße Kästchen oben bei jedem Menüpunkt.
Daher muss die Position auf absolut gesetzt werden. Fügen Sie den folgenden Stil in unsere Datei 'main.css' ein.

#navigation{
	height:60px;
}

#home, #home div, 
#about, #about div, 
#services , #services div, 
#solutions, #solutions div, 
#contact,  #contact div {
	height:80px;
	position:absolute;
	width:97px;
	float:left;
}

#home, #about, #services, #solutions, #contact{
	background-image: url(../img/nav.jpg);
	background-attachment: scroll;
	background-repeat: no-repeat;
	top:171px;
}

#home{
	background-position: 0px -25px;
	margin-left:6px;
}

#about{
	background-position: -98px -25px;
	margin-left:105px;
}

#services{
	background-position: -196px -25px;
	margin-left:204px;
}

#solutions{
	background-position: -294px -25px;
	margin-left:303px;
}

#contact{
	background-position: -392px -25px;
	margin-left:402px;
}

#home div, #about div, #services div, #solutions div, #contact div {
	background-image: url(../img/white.jpg);
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 0px -60px;	
}

Jetzt haben wir:

Ein Problem ist, dass der <a href>-Link über den Menüelementen angezeigt wird. Entfernen Sie diesen Link mit einem großen Texteinzug, um ihn effektiv vom Bildschirm zu entfernen.
Fügen Sie dies unserem Stylesheet hinzu.

.pri-nav a{
	display:block;
	text-decoration:none;
	text-indent:-30000px; 
}

Jetzt wird es so aussehen:

Wir haben immer noch ein Problem. Wir möchten, dass das Navigationsmenü unter dem Kopfschatten angezeigt wird. Wir können dies erreichen, indem wir unseren Header-Stil ändern.

#header{
	background: url(../img/hdr-bkg.jpg) repeat-x scroll;
	height:181px;
	position:absolute;
	z-index :100; /* ensure the header is on top of navigation area */
	top: 0px;
	left:0px;
	width:100%;
}

Da wir nun eine PNG-Datei mit Transparenz verwendet haben, sollte sie folgendermaßen aussehen:

Perfekt! Fügen wir den Inhalt hinzu, damit wir zu unserem Animationsskript gelangen.

.content{
	margin-top:160px;
}

#content-title{
	background: url(../img/content.jpg) no-repeat scroll;
	height:323px;
	position:absolute;
	width:100%;
}

Schritt 5: Animationsskript

Laden Sie zuerst das neueste jQuery-Skript herunter und legen Sie es im Ordner 'js' ab.

Die Animation ist im Grunde eine Manipulation des Hintergrundpositionsstils.
Leider hat jQuery einen Fehler beim Animieren des Hintergrundpositionsstils. Aber mach dir keine Sorgen! Alexander Farkas hat ein Plugin erstellt, das dieses Problem löst.
Laden Sie die Datei herunter, benennen Sie sie in jquery-bp.js um und speichern Sie sie im Ordner 'js'.

Es gibt etwas, das wir verstehen müssen, bevor wir fortfahren. Ich zitiere aus der Plugin-Dokumentation:

Aufgrund einiger Browserfehler (d. H. Firefox) müssen Sie Ihre (anfängliche) Hintergrundposition inline festlegen:
<div style="background-position: 10px 20px"></div>
- Dies können Sie natürlich auch mit JavaScript (jQuery) erreichen:
$('#background').css({backgroundPosition: '10px 20px'});

Okay, jetzt wo wir das verstehen, fangen wir an. Wir werden den Backgroud-Positionsstil für jedes Element am Anfang unseres Skripts festlegen.

// id for each of our menu items
var nav  = [ '#home', '#about', '#services', '#solutions', '#contact' ];
$(document).ready(function(){
  setBkgPos();
});

function setBkgPos()
{
  for ( i = 0; i < nav.length; i++ ){
    $(nav[i]).css({backgroundPosition: i*(-98) + 'px -25px'});
    $(nav[i] + ' div').css({ backgroundPosition: '0px -60px'});
  }
}

Speichern Sie dies als 'navigation.js' im Ordner 'js'.

Jetzt binden wir 3 Ereignisse an jeden der Menüpunkte. Wir können dies tun, indem wir die Bindefunktion aufrufen.

$(document).ready(function(){
  setBkgPos();

  // bind the event to function here
  for ( i = 0; i < nav.length; i++ ) {
    $(nav[i]).bind( 'mouseover', mMouseOver );
    $(nav[i]).bind( 'mouseout', mMouseOut );
    $(nav[i]).bind( 'click', mClick );
  }
});

Wenn ein Benutzer mit der Maus über das Navigationselement fährt, ruft unser Skript die Funktion "mMouseOver" auf.
Wenn der Benutzer das Navigationselement verlässt, ruft unser Skript die Funktion "mMouseOut" auf.
Wenn der Benutzer auf das Navigationselement klickt, ruft unser Skript die Funktion "mClick" auf.

Schritt 5.1: Maus over

Erstellen wir ein "Storyboard" für unsere Maus über Animation.

Bei 'Mouse Over':

Ändern Sie das Navigationsmenübild (leuchten) und ändern Sie den Cursor auf Zeiger.
Die Navigation wird etwas nach oben verschoben.
Das weiße Feld wird nach unten verschoben.
Das weiße Feld und das Navigationsmenü werden beide ausgeblendet.
Das Navigationsmenü und das weiße Feld bewegen sich bis zur endgültigen Position.
Und ändern Sie das Navigationsmenübild in den ursprünglichen Zustand.

Okay, fügen wir diese Funktionen unter dem vorherigen Skript hinzu:

function _getHPos( id )
{
  for ( i = 0; i < nav.length; i++ ){
    if ( '#' + id == nav[i] ){
      return i*(-98);
    }
  }	
  return 0;
}

function mMouseOver(e)
{	
  $(this)
  // stop any animation that took place before this
  .stop()
  // step 1. change the image file and change the cursor 
  .css({backgroundImage: 'url('+site_url+'img/nav-over.jpg)',cursor: 'pointer'})
  // step.2 move up the navigation item a bit
  .animate({ backgroundPosition:'(' + _getHPos( this.id ) +'px -30px}'},"fast",
    // this section will be executed after the step.2 is done
	function(){ 
	  $(this)
	    .children()
		  // step. 3 move the white box down
		  .animate({backgroundPosition:'(0px -40px)'},20)
		  // step 4. move the white box down
		  .animate({backgroundPosition:'(0px -20px)'},"fast");
	  $(this)
		// step 4. move the navigation item down
		.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 50px)'},"fast")
		// step 5. move the navigation item to its final position
		.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 25px)'},"fast");
	  // store the parent element id for later usage
	  var parent = this;
	  $(this)
		.children()
		  // step 5. move the white box to its final position
		  .animate( {backgroundPosition:'(0px -45px)'},"fast",
			// this section will be executed after the step.2 is done
			function(){
			  // step.6 change the image to its original image	
			  $(parent).css({backgroundImage: 'url(img/nav.jpg)'});
			});	
	});
}

Ich muss hier einige Dinge erklären:

Mit _getHPos wird die horizontale Hintergrundpositionsnavigation für jedes Element angepasst.
Beispielsweise beginnt der Hintergrund des Elements "Startseite" bei 0, die horizontale Hintergrundposition "Info" bei -98 Pixel usw.
Beachten Sie auch, dass wir zu Beginn der Funktion die Stoppfunktion aufrufen. Wir tun dies, um sicherzustellen, dass die Animation ausgeführt wurde, bevor das Mouse-Over-Ereignis gestoppt wurde.
Warum? Wir werden später eine weitere Animation für das Mouse-Out-Ereignis hinzufügen.
Nehmen wir nun an, der Benutzer bewegt den Mauszeiger über ein Element und bewegt den Mauszeiger dann schnell an eine andere Stelle und erneut schnell über dasselbe Element.
Wenn wir die Animation nicht vor jedem Ereignis stoppen, tritt eine Verzögerung auf, da ein Teil der Animation in die Warteschlange gestellt wird oder, noch schlimmer, die Animation inkonsistent wird und den Benutzer stört.

Schritt 5.2: Maus Out

Nun ist das erledigt. Lassen Sie uns ein "Storyboard" für das "Mouse-Out" -Ereignis erstellen

Bei 'Mouse Out':

Bewegen Sie das Navigationselement nach unten.
Bewegen Sie die weiße Box nach unten.
Bewegen Sie die Navigation nach oben.
Bewegen Sie das Navigationselement an seine ursprüngliche Position.
Bewegen Sie das weiße Feld an seine ursprüngliche Position (unsichtbar).
Setzen Sie den Cursor wieder auf Normal.

Der Code:

function mMouseOut(e)
{			
  $(this)
  // stop any animation that took place before this
  .stop()
  // step.1 move down navigation item
  .animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 40px )'}, "fast", 
    // this section will be executed after the step.1 is done
    function(){
      // step.2 white box move really fast
      $(this).children().animate({backgroundPosition:'(0px 70px)'}, "fast");
      // step 3. move navigation item up
      $(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -40px)'}, "fast", 
      // this section will be executed after the step.3 is done
        function(){
          // step 4. move navigation item ot its original position
          $(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -25px)'}, "fast",
            // this section will be executed after the step.4 is done
            function(){
              // move white box to its original position, ready for next animation
              $(this).children().css({ backgroundPosition:'0px -60px'});
            })
        })
    })
    .css({backgroundImage: 'url(img/nav.jpg)', cursor: ''});
}

Schritt 5.3: Klicken Sie auf

Fast dort! Jetzt müssen wir behandeln, wenn ein Benutzer auf das Navigationselement klickt.

1	function mClick(e)
2	{
3	location.href = this.id;
4	}

Natürlich können Sie hier auf den Ort zeigen, den Sie für richtig halten. Diese spezielle Funktion leitet Ihren Browser zu [current_url]/[navigation_id]. Für "home" ist es "[current_url]/home", für "about" ist es "[current_url]/about" und so weiter.

Schritt 5.4: Aktuelle Seitenanzeige

Natürlich brauchen wir einen Indikator, wenn wir bereits auf einer Seite sind. Dafür brauchen wir eine weitere CSS-Klasse.
Wir werden diese Klasse "active" nennen. Wenn wir zum Beispiel jetzt zu Hause sind, wird die HTML-Datei zu:

1	<div id="home" class="pri-nav active"><div><a href="home">home</a></div></div>

Oder wenn wir bei 'about' sind, wird es:

1	<div id="about" class="pri-nav active"><div><a href="about">about</a></div></div>

und so weiter.

Nachdem eine Seite geladen wurde, prüft unser Skript nun, welches Navigationselement die Klasse "active" hat.
Wir wenden dann einen Animationseffekt an. Außerdem müssen wir sicherstellen, dass andere Ereignisse ( ‘mouseover’, ‘mouseout’, ‘click’) keinen Animationseffekt auf dieses "active" Element verursachen.

Dafür müssen wir unseren Code etwas ändern. Hier ist der vollständige Code nach den Änderungen:

var site_url = '';
var nav  = [ '#home', '#about', '#services', '#solutions', '#contact' ];

$(document).ready(function(){
  setBkgPos();

  for ( i = 0; i < nav.length; i++ ) {
    $(nav[i]).bind( 'mouseover', mMouseOver );
    $(nav[i]).bind( 'mouseout', mMouseOut );
    $(nav[i]).bind( 'click', mClick );
  }

  for ( i = 0; i < nav.length; i++ ) {
    // element with ‘active’ class will  start animation 
    if ( $(nav[i]).get(0).className.indexOf('active') >= 0 ){
      $(nav[i])
      .animate({ backgroundPosition:'(' + _getHPos( nav[i] ) +'px -30px}'},"fast",
        function(){ 
          $(this)
            .children()
            .animate({backgroundPosition:'(0px -40px)'},20)
            .animate({backgroundPosition:'(0px -20px)'},"fast");
          $(this)
            .animate({backgroundPosition:'(' + _getHPos( nav[i] ) +'px 50px)'},"fast")
            .animate({backgroundPosition:'(' + _getHPos( nav[i] ) +'px 25px)'},"fast");
          var parent = this;
          $(this)
            .children()
            .animate( {backgroundPosition:'(0px -45px)'},"fast",
			  function(){
                $(parent).animate({backgroundPosition:'(' + _getHPos( parent.id ) +'px 25px)'},"fast");
                $(parent).css({backgroundImage: 'url(img/nav.jpg)'});
              });
        });
        break;
    }
  }
});

Fertig!

Und damit haben wir unser gesamtes kleines Menü.

Laden Sie eine ZIP-Datei der Site herunter

Demo ansehen!