jQuery – Menü

Logo von jQueryDa ich mich ein wenig mit jQuery auseinander setzen wollte habe ich die CSS Datei von den Border-Tricks verwendet um ein einfach animiertes Menü mit Hilfe von jQuery zu programmieren. Dazu habe ich eine einfach formatiertes Listenmenü (ul li) eingefügt und das jQuery Framework von den GoogleAPIs eingebunden.

<script type=“text/javascript“ src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js“></script&gt;

Das animierte Menü bin ich dann wie folgt angegangen:

$(document).ready(function(){
$(‚#navigation a‘).hover(function(){
$(this).animate({
width:’75%‘,
padding:’10px‘
},200);
},function(){
$(this).animate({
width:’50%‘,
padding:’5px‘
},200);
});
$(‚#navigation a‘).click(function(){
$(this).animate({width:’100%‘},200)
});
});
Die Menüstruktur sah dabei so aus:
<ul id=“navigation“>
<li>
<a href=“#“>Link</a>
<div class=“arrow“></div>
</li>
<li>
<a href=“#“>Link</a>
<div class=“arrow“></div>
</li>
</ul>
Leider gibt es unter WordPress kein Syntaxhilighting aber ich denke man sollte alles erkennen können. Hier nun das Resultat:
 
 
Bei Fragen oder Tipps könnt ihr euch natürlich jederzeit melden.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s