Benny Design - Webdesign for everybody

jQuery – Slide Out Navigation

In diesem Artikel werde ich kurz beschreiben wie man mittels jQuery eine animierte Navigationsleiste realisiert. Die Animation wird so wie hier sein.

Wie du jQuery einbindest und wo du es herunterladen kannst erfährst du hier.
Du denkst du bist hier falsch, da du keine jQuery Kenntnisse hast?

Falsch dieses Tutorial ist auch für totale jQuery – Neulinge gedacht!

Das HTML – Gerüst

Das reine HTML – Gerüst ist sehr einfach aufgebaut und besteht grundsätzlich aus einer ungeordneten Liste

Hier der Code dazu:

<ul id="main_nav">
	<li><a class="Nav1" href="#">Nav1</a></li>
	<li><a class="Nav2" href="#">Nav2</a></li>
	<li><a class="Nav3" href="#">Nav3</a></li>
	<li><a class="Nav4" href="#">Nav4</a></li>
	<li><a class="Nav5" href="#">Nav5</a></li>
	<li><a class="Nav6" href="#">Nav6</a></li>
	<li><a class="Nav7" href="#">Nav7</a></li>
	<li><a class="Nav8" href="#">Nav8</a></li>
	<li><a class="Nav9" href="#">Nav9</a></li>
	<li><a class="Nav10" href="#">Nav10</a></li>
</ul>

Gib der Navigationsleiste eine ID und den Navigationselementen eine Klasse, denn wir müssen später via jQuery darauf zugreifen können.

Der CSS – Part

Mittels CSS wird nun als erstes die Liste so formatiert, dass die sie nicht mehr als Liste zu erkennen ist:

ul#main_nav {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

Als nächstes wird jedes Listenelement (Menüelement) mittels float so ausgerichtet, dass die Elemente nebeneinander liegen und mit einer Höhe versehen in die der Benutzer mit der Maus fahren muss um den Hover – Effekt auszulösen.

ul#main_nav li {
    float: left;
    margin: 0;
    height: 100px;
}

Für den klickbaren Bereich (den Link-Bereich) selbst wird folgende Formatierung verwendet:

ul#main_nav li a {
    color: #fff;
    text-align: center;
    padding: 30px 0;
    text-decoration: none;
    display: block;
    margin-top: -80px;
    min-width: 80px;
}

Wie du bereits erkennen kannst wurde mittels der negativen margin-top Angabe das Listenelement ausgeblendet.
Anschließend geben wir den Menüelementen noch eine Hintergrundfarbe.

ul#main_nav li a.Nav1 { background: #f01b44;}
ul#main_nav li a.Nav2 { background: #fa941c;}
ul#main_nav li a.Nav3 { background: #de383e;}
ul#main_nav li a.Nav4 { background: #f4382d;}
ul#main_nav li a.Nav5 { background: #faca13;}
ul#main_nav li a.Nav6 { background: #df9d35;}
ul#main_nav li a.Nav7 { background: #f24125;}
ul#main_nav li a.Nav8 { background: #df912e;}
ul#main_nav li a.Nav9 { background: #f7a51a;}
ul#main_nav li a.Nav10 { background: #f01b44;}

Folgendes sollte nun zu sehen sein:

Der Interaktive (jQuery) – Part

Nun ist es an der Zeit die einzelnen Menüelemente mit der jQuery Funktion .animate() und den .hover() – Event Handler zu animieren. Auch darf man nicht vergessen die jQuery Bibliothek einzubinden!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
$(document).ready(function() {
 $('#main_nav > li').hover(
  function () {
   $('a',$(this)).stop().animate({'margin-top':'-15px'},100);
  },
  function () {
   $('a',$(this)).stop().animate({'margin-top':'-80px'},100);
  }
 );
});
// ]]></script>

Wie in der jQuery Dokumentation zu sehen ist, besteht der .hover() Handler aus 2 Events (mouseover & mouseout). Somit muss in .hover() definiert werden was bei beiden Aktionen passiert. Bei Mousehover wird unser Menüelement auf margin-top: -15px; gesetzt (Mit 100 wird angegeben wie lange die Animation dauert). Anschließend wird bei Mouseout margin-top wieder auf -80px gesetzt und das Element wird wieder ausgeblendet.

Ich hoffe mit diesem Artikel konnte ich dir jQuery noch weiter näher bringen und ein praktischeres Beispiel als bei jQuery – Grundlagen zeigen.