Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

jQuery für Webdesigner

Standard-CSS-Hover mit externem Skript erweitern

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Erweiterung der CSS-Funktion "hover" gelingt dank eines externes jQuery-Skripts, das an die vorhandene Dokumentstruktur des Projektes "biketravel-scotland" anzupassen ist.

Transkript

Nachdem wir unser Praxisprojekt mit einem sehr schönen Grafik-Slider ausgestattet haben, gehen wir weiter zum Hauptmenü und auch hier möchte ich eine Animation integrieren, die so nur über jQuery möglich ist. Zwar kann ich mit Stylesheets auch zum Beispiel jetzt hier den Hintergrund verändern und somit einen Hell-Dunkel-Effekt erzielen, aber mir schwebt so was Ähnliches vor wie hier oben in der Slideshow, dass man so eine Art Hintergrund-Effekt hat. Und solch einen Hintergrund-Effekt kann man mit einem jQuery-Skript erreichen. Da braucht man auch nicht selber dran, da gibt es ein sehr schönes Skript von Brian Beck und zwar nennt sich das jquery-ahover. und das sehen Sie, liegt im Projekt-Verzeichnis von Google und ich klicke also dieses Projekt-Verzeichnis an also hier haben wir ein Animated Hover Plugin für jQuery und das Ganze läuft unter einer MIT-Lizenz und das ist auch eine Open-Source-Lizenz, also kann bedenkenlos eingesetzt werden und dann haben wir hier das Dokument, was wir brauchen, das Bibliotheks-File. Das klicke ich an und lade mir das auf meinen Rechner. So, anschließend benötige ich dieses File in unserem Skript-Verzeichnis, also hole ich mir das aus dem Download-Bereich, kopiere das in mein Skript-Verzeichnis und hab somit schon mal von der Seite aus alles an Voraussetzung geschaffen. Jetzt müssen wir das Ganze nur noch in unserem Dokument in unserem Web-Projekt in der HTML-Seite einbinden. Und das mache ich mir jetzt einfach: Ich kopiere einfach das vorhandene nivo-Skript und ändere nur kurz den Pfad um, und zwar ist das unter scripts/ und dort heißt das Ganze jquery.ahover.js. Und von der Seite her habe ich nun die Verbindung zwischen dem Bibliotheks-File und dem HTML-Dokument vorgenommen. Schauen wir uns das Skript mal kurz an, da sind wir und das Besondere von diesem Skript ist, dass Brian Beck, das sieht man ganz unten an dieser Stelle, eine Art dynamischen Layer ermöglicht und dieser dynamisch erzeugte Layer, den kann ich mit Stylesheets und eben auch mit jQuery die Arbeiten aufgreifen und entsprechend dann weiter bearbeiten. Hier sieht man eine Klasse, die benötigt wird. Mit dieser Klasse, ja, dort wird eingeblendet et cetera. Und Sie können natürlich selbstverständlich auch dieses Skript abändern. Sie sehen, man kann darauf zugreifen, aber das brauchen wir gar nicht, ich nehme das so, wie es ist, und damit haben wir auch die Einbindung. Was wir jetzt noch zum Schluss machen müssen, ist das Stylesheet vorbereiten. Und zwar bietet sich das an, am Ende unserer Navigations-, also Hauptnavigations-Definition. Die Frage ist jetzt nur: Was muss dahin? Und woher weiß ich das? Auch hier wieder finde ich diese Informationen im Projekt-Verzeichnis und zwar unter Documentation. Es gibt immer irgendwo ein Readme, eine Dokumentation, wo Sie auf jeden Fall hineinschauen sollten und dort erklärt sich dann meistens von alleine, was zu tun ist. Ja, und hier sieht man die Gebrauchsanweisung und der Vorschlag von ihm, wie ein CSS aussehen könnte. Ich machs mir einfach, ich kopier das auf die Schnelle und bring das quasi hier in mein Dokument ein, muss das allerdings jetzt anpassen, denn so wie es hier drin steht, kann ich das nicht brauchen. Als Erstes nehme ich mal die Kommentare und fass das sauber ein. So, und das ist allerdings Animation Main-Navgation, und hier oben das nehme ich einfach raus, das brauche ich nicht. Die Animation Main-Navigation, so. Auch die Kommentarzeichen benötige ich nicht. So, jetzt habe ich einen etwas anderen Aufbau, wie er hier vorgeschlagen hat, das pass ich mir auch noch gerade an, das ist nicht meine Schreibweise, das kann ich besser so lesen, so. Also den Bereich können wir im Grunde stehen lassen, das ist kein Thema. Was wir aber anpassen müssen, ist die Zugriffe auf die einzelnen Objekte in HTML. Und zwar greift er jetzt auf alle None zu und das wollen wir natürlich nicht, denn wir haben hier im Hauptmenü diese None mit einer ID belegt und das ist der erste Schritt, den ich hier also quasi davor setzen muss. Ich schreibe also meine ID mit #main_nav und kann dann auf ul verweisen. Und genau das muss ich nun einfach überall vorsetzen, damit ich an die entsprechenden Stellen herankomme. So, das reicht leider immer noch nicht und zwar fehlt uns hier noch ein Eintrag. Er verweist nur auf die Aufzählungspunkte einer Liste. Ich hab das allerdings mit den Hyperlinks dazwischen, also brauche ich die Verbindung zu den Anchor-Tags und auch hier unten reicht das in dieser Form nicht aus, weil wir dort nochmal einen ul dazwischen haben. also setze ich hier auch nochmal das ul hin. Und damit wäre das Ganze an unser Skript angepasst. Schauen wir mal, ob er zugreifen kann. Ich mach da mal einen kleinen Trick: Ich schreib hier einfach mal den :hover direkt an das ul und gucke, ob er reagiert, nachdem ich die Seite aktualisiere. So, und jetzt, ja, sehen wir, sollte er darauf reagieren. Was mir noch nicht gefällt, sehe ich gerade, ist die Farbe. Die passen wir auch noch an. Das ist hier unten die Farbe von diesem Grünton #d9e8da. So, und damit wäre das auch dieses Grün. Also, Sie haben gesehen, dass er durch den :hover-Befehl durchaus reagiert. Aber hier steht dieses div.ahover und dieses div.ahover bedeutet in diesem speziellen Fall tatsächlich dieses dynamisch erzeugte div, was noch kommt durch das jQuery. Das wird dann mit der Klasse – ich ruf es noch mal kurz auf –, die er hier an dieser Position beschrieben hat, belegt. Und damit haben wir so eine Art Kombination zwischen unserem Stylesheet und diesem Skript hergestellt. Und das ist die erste Vorbereitung, die wir für unser Skript benötigen, um das Menü passend auszustaffieren.

jQuery für Webdesigner

Sehen Sie, wie sich schnell und einfach eine jQuery-Entwicklungsumgebung einrichten und ein eigener Webserver installieren lässt, um danach Ihre Website durch jQuery aufzuwerten.

2 Std. 54 min (23 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!