Ältere Themen:

Frische Template Dateien, statt aus dem Browsercache geladen
Mit diesem kleinen Trick wird es möglich, immer die aktuellste Datei auszugeben. Egal ob es sich um CSS Dateien, JS, Bilder handelt, der Besucher bekommt immer die aktuellste Version zu Gesicht, ohne den Browser aktualisieren zu müssen.

Slider im Template
Eine Anleitung zum Einbau eines Slider-Scripts in ein Template

Dropdown Menüs
In diesem Tutorial möchte ich euch zeigen, wie ihr mit einfachen Mitteln ein gutes Menü hinbekommt, welches durch Hover-Effekte und Dropdowns glänzt. Das ganze natürlich in jedem Template mit show_menu2 realisierbar.

Zwischenüberschriften im Menü
Mehrere Methoden, das Menü durch Überschriften zu gliedern.

Templates - Frontend und Backend Design

jQuery animiertes Menü

Stephan Fischer

Was ist das jQuery-Framework?

Ein Framework ist im Grunde eine Bibliothek mit Wiederverwendbarem Code. Das heißt, es sind Endwurfsmuster mit dem man Applikationen erstellen kann.
Für JavaScript gibt es einige Frameworks, wobei jQuery eines der populärsten geworden ist.

Voraussetzung:

Grundlagen in CSS ist Voraussetzung um dies zu verstehen, den jQuery wird über id und class angesprochen.

Einbau in die Website:

Als erstes muss das jQuery-Framework in die Seite eingebunden werden. Hierfür gibt es zwei Wege. Mann kann sich das Framework bei jQuery downloaden und auf dem Server legen, oder man verwendet die von google bereitgestellte Version. Ich verwende hier die Google Version.

Der Aufruf von jQuery erfolgt im Kopf des Dokuments, nach <head> und vor der register_frontend_modfiles Funktion.

<head>

... meta angaben, title usw.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript">
</script>

 <?php 
	// automatically include optional WB module files (frontend.css, frontend.js)
	if (function_exists('register_frontend_modfiles')) {
		register_frontend_modfiles('css');
		register_frontend_modfiles('js');
	} ?>
</head>

Nun legen wir uns im Inhalt des Dokumentes die Elemente an die wir ansprechen wollen. Ich habe hier eine Menü gewählt, wie es in Website Baker ausgegeben wird.

<div class="menue">
<div>Menü 1</div>
 <ul>
 <li><a href="#">Erster</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Nummer 3</a></li>
 <li><a href="#">NR 4</a></li>
 </ul>
 <div>Menü 2</div>
 <ul>
 <li><a href="#">1 Link</a></li>
 <li><a href="#">Link zwei</a></li>
 <li><a href="#">Dritter</a></li>
 <li><a href="#">Nummer 4</a></li>
 </ul>
</div>

Die Integration von jQuery erfolgt im unteren Bereich des Dokuments, vor dem schließenden </body>.

<script type="text/javascript">
$(document).ready(function(){

$(".menue ul li a").addClass('smoothhover');

    $('.smoothhover').mouseover(function(){
      $(this).animate({paddingLeft: "55px",
	  }, 700 );
	});
    $('.smoothhover').mouseout(function(){
      $(this).animate({paddingLeft: "10px",
	  }, 1000 );
	});	
});
</script>

Das war es schon und wir haben nun ein animiertes Menü! DEMO

Erklärung des jQuery Codes:

Doch nun will ich auch noch mal auf die Einzelheiten des Scriptes eingehen!
Scripte werden von Browsern nur in einem Scripterkennungsfeld ausgeführt.

<script type="text/javascript">
...
</script>

Durch diesen Code wird Jquery erst ausgeführt, wenn alle Scripte geladen sind.

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

Nun sprechen wir in dem Container mit der ID menue, die Listen ul mit dem Listenpunkten li an und legen Werte für die Mauszustände fest. Ich möchte in diesem Fall, dass bei mousover die Links um 25 Pixel nach Rechts verschoben werden und bei mouseout die Links wieder in Ihre Ausgangsposition zurück kehren.

$(".menue ul li a").addClass('smoothhover');

    $('.smoothhover').mouseover(function(){
      $(this).animate({paddingLeft: "55px",
	  }, 700 );
	});
    $('.smoothhover').mouseout(function(){
      $(this).animate({paddingLeft: "10px",
	  }, 1000 );
	});	
});

$ leitet eine Aktion ein

(".menue ul li a") welches Element angesprochen wird

.mouseover(function() ist der Selector der bei einem gewissen Zustand reagieren soll

$(this) ermöglicht das gewählte Element weiter verwenden

.animate({paddingLeft: "55px",}, ist der Effekt der Ausgeführt werden soll

700 ); in der vorbestimmten Zeit.

Im weiterem habe ich in der Demo die Listenpunkte und die Links über CSS angepasst. Siehe Quelltext der Datei.

Beim Aufruf des Menüs in WB mit showmenu2();
sollte es keine Probleme geben und funktionieren.

jQuery wie oben schon beschrieben einbinden und diesen Javascript Code vor </body> einfügen:

<script type="text/javascript">
$(document).ready(function(){

$(".menu ul li a").addClass('smoothhover');

    $('.smoothhover').mouseover(function(){
      $(this).animate({paddingLeft: "55px",
      }, 700 );
    });
    $('.smoothhover').mouseout(function(){
      $(this).animate({paddingLeft: "10px",
      }, 1000 );
    });   
});
</script>

Fertig, ein animiertes Menü!

Schaut euch doch auf der Seite docs.jquery.com weiter Animationen und Möglichkeiten von Jquery an!

Ich hoffe diese Werk hat euch weiter geholfen oder Inspiriert!

Gruß sfischer

Zurück zur Übersicht