Garagentor-Menü

Ein Garagentor-Menü ist ein Menü, bei dem ein Bild ("die Tür") nach oben gleitet, um etwas dahinter zu enthüllen. Wir werden dies auf zwei Arten tun, mit CSS3 und mit jQuery. Dann werden wir sie zu einer progressiv verbesserten Methode kombinieren, um damit umzugehen.

Die jQuery-Methode

Direkt aus der Box liefert jQuery die animate-Funktion, mit der wir einige CSS-Attribute über die Zeit verformen können. Dinge wie Deckkraft, Schriftgröße, Breite, Länge, Ränder und Polsterung, im Grunde alles, wo Sie den Wert mit einer Zahl festlegen, wird unterstützt. Es gibt jedoch ein paar bemerkenswerte Einschränkungen für diese Funktion, und eine davon ist "background-position".

Glücklicherweise gibt es ein Plugin, das dabei hilft: das Background-Position Animation Plugin von Alexander Farkas. (direkter Link zu JS). Damit können wir einige lustige Dinge tun! HINWEIS: Dieses Plugin scheint gut mit jQuery 1.2.6 zu funktionieren, brach aber, als ich die aktuellste Version 1.4.3 ausprobierte.

Demo anzeigen   Dateien herunterladen

1. Erstellen des benötigten Bildes

Wir benötigen hier drei verschiedene Arten von Bildern. Zuerst ein Hintergrundbild für das gesamte Menü selbst. Dies wird ein großes Bild für das gesamte Menü sein, das die Grafik ist, die "enthüllt" wird, wenn die Tür sich öffnet. Sehen Sie sich meine Photoshop-Datei an

Beachten Sie meine Hilfslinien. Ich habe diese als visuelle Referenz für den "sichtbaren Bereich" innerhalb des Garagentors eingestellt. Beachten Sie, dass die Photoshop-Dateien im Download zu Ihrer Information enthalten sind. Die Kombination zu einer einzigen Grafik spart HTTP-Anfragen, wie bei CSS Sprites.

Zweitens müssen wir die Garagentore erstellen, die wir "Rollläden" nennen werden. Diese müssen separate Grafiken sein, da jeder einzeln animiert werden muss. Ich habe dafür eine separate Vorlage erstellt, damit ich wieder Hilfslinien verwenden kann, um die Dinge so zentriert und gut proportioniert wie möglich zu halten.

Zuletzt benötigen wir ein Fenster, das als Garagentorrahmen fungiert. Dies ist die nette Note, die die ganze Idee zusammenhält. Da dies die oberste Ebene sein wird, werden wir dies auf die Ankerlinks selbst anwenden, damit sie mit eindeutigen URLs klickbar sind.

2. Schreiben des HTML-Markup

Natürlich sollte das Markup, egal wie ausgefallen wir unsere Menüs gestalten wollen, sauber und semantisch sein, damit das Menü auch ohne CSS und/oder JavaScript wie ein Menü aussieht und funktioniert.

Hier ist das Menü-Markup

<ul id="garagedoor">
  <li id="shutter1"><a href="#1">Link 1</a></li>
  <li id="shutter2"><a href="#2">Link 2</a></li>
  <li id="shutter3"><a href="#3">Link 3</a></li>
  <li id="shutter4"><a href="#4">Link 4</a></li>
</ul>

Die ID des Menüs gibt uns die benötigte Spezifität. Beachten Sie jedoch, dass jeder Rollladen seine eigene ID hat. Das liegt nur daran, dass jeder Menüpunkt seine eigene Türgrafik haben kann, die wir als Haken verwenden werden. Sie könnten hier auch etwas wie :nth-child() verwenden, aber da wir auf gute Cross-Browser-Kompatibilität abzielen, überspringen wir das. Mit ausgeschaltetem CSS haben wir ein sehr funktionales Menü

3. Das CSS

Hier zeige ich Ihnen die gesamte CSS-Datei und weise Sie dann unten auf einige Dinge hin

#garagedoor {
  margin: 50px auto;
  list-style: none;
  background: url(../images/menu-bg.jpg);
  width: 800px;
  overflow: auto;	
}

#garagedoor li {
  width: 200px;
  height: 100px;
  display: block;
  float: left;
}

#garagedoor li#shutter1 {
  background: url(../images/shutter-africanplains.jpg) no-repeat; 
}
#garagedoor li#shutter2 {
  background: url(../images/shutter-reptiles.jpg) no-repeat; 
}
#garagedoor li#shutter3 {
  background: url(../images/shutter-aviary.jpg) no-repeat; 
}
#garagedoor li#shutter4 {
  background: url(../images/shutter-arcticzone.jpg) no-repeat; 
}

#garagedoor a {
  width: 200px;
  height: 100px;
  display: block;
  background: url(../images/window.png) no-repeat bottom center;
  text-indent: -9999px;
}

Der Menühintergrund wird auf die UL selbst angewendet. Dann wird jedes Listenelement auf eine bestimmte Breite und Höhe gesetzt (gleiche Höhe für jede einzelne "Enthüllungs"-Grafik) und nach links gefloatet (für ein horizontales Menü). Die ID-Werte der LI-Elemente werden nur verwendet, um die separaten Hintergrundgrafiken anzuwenden. Die Ankerlinks sind, wie oben erwähnt, die oberste Ebene und verwenden daher die Fensterüberlagerung. Diese müssen als Blockelemente eingerichtet, mit Breite und Höhe versehen und mit text-indent vom Bildschirmrand verschoben werden.

4. Das jQuery-JavaScript

Zuerst binden wir die neueste Version von jQuery auf unserer Seite ein, sowie das Plugin, das ich oben in diesem Artikel verlinkt habe. Dann können wir das benötigte jQuery-JavaScript schreiben, um den Garagentor-Effekt zu erzielen.

$(function() {

	// Set CSS for old versions of Firefox (Required to use the backgroundPosition js)
	$('#shutter1').css({backgroundPosition: '0px 0px'});
	$('#shutter2').css({backgroundPosition: '0px 0px'});
	$('#shutter3').css({backgroundPosition: '0px 0px'});
	$('#shutter4').css({backgroundPosition: '0px 0px'});

	// Animate the Shutter  
	$("#garagedoor a").hover(function(){
	      $(this).parent().stop().animate({backgroundPosition: '(0px -100px)'}, 500);
	}, function() {
	      $(this).parent().stop().animate({backgroundPosition: '(0px 0px)'}, 500);
	});
	 
 });

Dann binden wir das "hover"-Ereignis an jeden der Ankerlinks des Menüs. Wenn das Hover-Ereignis über diesen Links auftritt, findet jQuery das Elternelement und führt die Hintergrundposition-Animation auf diesem Element durch. In unserem Fall das LI-Element, mit den eindeutigen Rollläden. Mit der Callback-Funktion des Hover-Ereignisses (z. B. wenn die Maus das Gebiet verlässt) animieren wir den Rollladen zurück in Position.

Wir verwenden hier auch die `.stop()`-Funktion von jQuery, um den Aufbau der Animationswarteschlange zu verhindern (schnelles Überfahren und Verlassen eines Elements mit der Maus führt dazu, dass sich die Garagentür immer wieder öffnet und schließt, auch wenn Sie bereits weggefahren sind). Die Verwendung von .stop() verhindert auch, dass die Animation vollständig abgeschlossen wird, wenn die Maus vor Abschluss der Animation wegbewegt wird. Wenn Sie daran interessiert sind, dies so zu ändern, dass die Garagentüranimation jedes Mal *vollständig* ausgeführt wird, verwenden Sie dieses Plugin.

Und da haben wir es, ein schick aussehendes Menü mit einem ziemlich coolen Animationseffekt mit jQuery!

Demo anzeigen   Dateien herunterladen

Die CSS3-Methode

Wir haben gerade die Verwendung von jQuery zur Realisierung des Garagentor-Effekts besprochen. jQuery ist gut geeignet (obwohl fast jede JavaScript-Bibliothek Animationshelfer hat), da es die Animation browserübergreifend funktionieren lässt. Wenn wir dieses Garagentor-Menü als progressive Verbesserung unserer Website betrachten würden, könnten wir dasselbe mit CSS3 erreichen, insbesondere mit der `transition`-Eigenschaft. Übergänge sind mehr als fähig, die gleichen einfachen Animationen durchzuführen, für die wir jQuery verwendet haben.

Mit der Basis, die wir bereits von der jQuery-Methode haben, können wir sie sehr einfach in die CSS3-Methode umwandeln.

1. Entfernen Sie das gesamte JavaScript
2. Ändern Sie das CSS der Listenelemente, um die `transition`-Eigenschaft einzuschließen
3. Fügen Sie ein Hover-Ereignis hinzu, um die Hintergrundposition zu ändern

#garagedoor li {
  width: 200px;
  height: 100px;
  display: block;
  float: left;
  -webkit-transition: background-position 0.6s ease;
  -moz-transition: background-position 0.6s ease;
  -ms-transition: background-position 0.6s ease;
  -o-transition: background-position 0.6s ease;
  transition: background-position 0.6s ease;
}

#garagedoor li:hover {
  background-position: 0 -100px !important;
}

Update: In früheren Versionen dieses Artikels habe ich einige Vendor-Präfixe für Übergänge weggelassen. Zum Beispiel habe ich -o- weggelassen, weil die aktuelle Version von Opera zu der Zeit Übergänge unterstützte, aber nicht auf der `background-position`-Eigenschaft (seltsam). Ich habe es wieder hinzugefügt, weil es jetzt funktioniert. Aber die wichtigere Botschaft ist, ich hätte es wahrscheinlich schon früher hinzufügen sollen, da es offensichtlich nur eine Einschränkung war, die in Zukunft behoben werden würde.

Mehr über CSS-Übergänge hier.

Kombination von CSS3 und jQuery

Die angenehmste Methode, eine solche Technik meiner Meinung nach zu realisieren, ist die Verwendung von CSS3, wo es unterstützt wird, und ein Rückfall auf eine JavaScript-Methode. Der beste Weg, dies zu handhaben: Modernizr! Modernizr ist eine kleine JavaScript-Bibliothek, die Sie auf Ihren Seiten einbinden können, um zu identifizieren, was der Browser verarbeiten kann.

In unserem Fall müssen wir wissen, ob der Browser CSS-Übergänge unterstützt. Modernizr fügt dem html-Element auf der Seite eine Klasse namens `csstransitions` hinzu, wenn dies möglich ist. Wir ändern also den Selektor für den CSS-Übergänge-spezifischen Code

/* Modernizer Enabled */
.csstransitions #garagedoor li {
  -webkit-transition: background-position 0.6s ease;
  -moz-transition: background-position 0.6s ease;
  -ms-transition: background-position 0.6s ease;
  -o-transition: background-position 0.6s ease;
  transition: background-position 0.6s ease;
}
.csstransitions #garagedoor li:hover {
  background-position: 0 -100px !important;
}

Dies stellt sicher, dass Browser, die den Übergang nicht unterstützen, diesen gar nicht erst versuchen. Für diese Browser werden wir einen jQuery-basierten Fallback durchführen. Möglicherweise verwenden Sie jQuery bereits aus anderen Gründen auf Ihrer Seite. In unserem Fall ist das nicht so, also sagen wir, dass wir jQuery nur laden wollen, wenn es für den Fallback benötigt wird.

Mit Modernizr konditionieren wir unseren Code

if (!Modernizr.csstransitions) {
  // do fallback stuff
} 

Der Trick hierbei ist, dass das Laden eines Skripts innerhalb von JavaScript etwas knifflig ist, insbesondere da wir jQuery noch nicht verwenden können. Wir werden diese Idee des dynamischen Ladens nutzen. Wir werden

1. Testen, ob jQuery geladen ist
2. Wenn nicht (beim ersten Lauf nicht)...
3. – Laden Sie das Skript, indem Sie es ins Dokument schreiben
4. – Gehen Sie zu #1
5. Wenn jQuery geladen ist...
6. Laden Sie das Hintergrundposition-Plugin
7. Code für die Animation

Hier ist das Laden

var jQueryScriptOutputted = false;

function initJQuery() {
    
    if (typeof(jQuery) == 'undefined') {
    
        if (!jQueryScriptOutputted) {
            jQueryScriptOutputted = true;
            
            // Primitive way of loading scripts (no library yet)
            document.write("<scr" + "ipt src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></scr" + "ipt>");
        }
        setTimeout("initJQuery()", 50);
        
    } else {
    	
    	// jQuery way of loading scripts
    	$.getScript('js/jquery.backgroundPosition.js', function() {
         
            // Set CSS in Firefox (Required to use the backgroundPosition js)
			$('#shutter1').css({backgroundPosition: '0px 0px'});
			$('#shutter2').css({backgroundPosition: '0px 0px'});
			$('#shutter3').css({backgroundPosition: '0px 0px'});
			$('#shutter4').css({backgroundPosition: '0px 0px'});

			// Animate the Shutter  
			$("#garagedoor a").hover(function() {	
			      $(this).parent().stop().animate({backgroundPosition: '(0px -100px)'}, 500);
			    }, function() {
			      $(this).parent().stop().animate({backgroundPosition: '(0px 0px)'}, 500);
			});
			
    	});

    }
            
}

if (!Modernizr.csstransitions) {
  initJQuery();
}

Viel Spaß

Sie kennen das Spiel, Leute. Tun Sie, was immer Sie wollen, am besten verwenden Sie es in einem großen Unternehmensprojekt ohne Namensnennung und werden Sie reich.

Demo anzeigen   Dateien herunterladen