Anzeige
Tutorialbeschreibung

jQuery - Menüs aufpeppen

jQuery - Menüs aufpeppen

Mit jQuery kann man seine Menüs gehörig aufpeppen. Grund genug also, dass in diesem Tutorial zwei Varianten vorgestellt werden, die zeigen, wie effektiv die Menü-Arbeit mit jQuery sein kann. In einer losen Abfolge von Tutorials werden dann immer mal wieder Menüvarianten vorgestellt. Hier geht es zunächst aber um ein Aufklapp-Menü und eines, das auf besondere Art und Weise die aktuelle Position anzeigt.


jQuery eignet sich hervorragend dazu, Elemente dynamisch ein- und auszublenden. Diesen Umstand kann man sich zunutze machen, um ein Menü aufklappen zu lassen. Ruft ein Benutzer die betreffende Webseite auf, sieht der Menübereich folgendermaßen aus:

Bilder



 
Noch ist also nichts von den eigentlichen Menüeinträgen zu sehen. Das ändert sich erst, wenn man Menü auf / Menü zu anklickt.

Bilder



Dann werden die Einträge angezeigt. Und das geschieht in bester jQuery-Manier, also dynamisch. Das Ganze können Sie natürlich direkt online ausprobieren.
[Beispiel anzeigen]


Eine solche Anwendung lässt sich sehr einfach umsetzen. Im vorliegenden Beispiel wurde dazu auf eine einfache HTML-Tabelle zurückgegriffen.
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" id="schalter"><a href="#" id="menu">Manü auf / Menü zu</a></td>
  </tr>
  <tr>
    <td>
     <div>
       <a href="http://www.psd-tutorials.de/" id="link">psd-tutorials.de</a><br />
       <a href="http://www.sport1.de/" id="link">Sport1</a><br />
       <a href="http://www.n-tv.de/" id="link">n-tv</a>
     </div>
    </td>
  </tr>
</table>

Wichtig sind an dieser Tabelle vor allem zwei Dinge. Da wäre zunächst einmal die Tabellenzelle, über die das Menü auf- und zugeklappt wird.
<td align="center" id="schalter"><a href="#" id="menue">Menü auf / Menü zu</a></td>

Die hier definierten IDs schalter und menu werden Ihnen dann im eigentlichen jQuery-Skript noch begegnen. Und dann gibt es da noch die eigentlichen Links.
<div>
   <a href="http://www.psd-tutorials.de/" id="link">psd-tutorials.de</a><br />
   <a href="http://www.sport1.de/" id="link">Sport1</a><br />
   <a href="http://www.n-tv.de/" id="link">n-tv</a>
</div>

Bei denen ist es wichtig, dass diesen jeweils die ID link zugewiesen wird. (Das gilt natürlich nur dann, wenn diese ID dann auch tatsächlich innerhalb der CSS-Syntax genutzt wird. Wenn Sie eine andere ID verwenden wollen, können Sie das natürlich machen, müssen dann aber den CSS-Teil entsprechend anpassen).

Weiter geht es mit dem eigentlichen jQuery-Part.
<script type="text/javascript">
/* <![CDATA[ */                                            
 $(document).ready(function()
{
  $("a#menu").click(function ()
  {
      if ($("div").is(":hidden"))
      {
        $("div").slideDown("slow");
      }
      else
      {
        $("div").slideUp("slow");
      }
  });
});
/* ]]> */
</script>


Über
$(document).ready(function()

wird geprüft, ob das Dokument vollständig geladen werden konnte. Die Anweisung
$("a#menu").click(function ()

sorgt dafür, dass die Funktion dann ausgelöst wird, wenn der Hyperlink mit der ID menu angeklickt wurde. Im aktuellen Beispiel handelt es sich dabei um den Link Menü auf / Menü zu. Es folgt eine if-Abfrage.
if ($("div").is(":hidden"))

Diese überprüft, ob der div-Bereich versteckt ist. Ist das der Fall, greift folgendes Statement:
$("div").slideDown("slow");

Durch slideDown() wird das betreffende Element "ausgerollt". Als Argument übergibt man die Geschwindigkeit. Dabei steht slow für langsam. Ebenso könnte man aber auch normal oder fast verwenden. Und auch eine Angabe in Millisekunden ist möglich. Ist die if-Bedingung allerdings nicht erfüllt, wird das ausgeführt, was im else-Zweig steht. Und das sieht folgendermaßen aus:
$("div").slideUp("slow");

Über slideUp() wird der ausgezeichnete Bereich wieder "eingerollt". Auch hier kann man – genauso wie bei slideDown() – die Geschwindigkeit als Argument übergeben.
Was jetzt noch fehlt, ist ein wenig CSS-Syntax, über die das Menü gestaltet wird.
a#menu {
  text-decoration:none;
  color:#fff;
}
a#link {
  text-decoration:none;
  color:black;
  margin-left:5px;
}
div {
display:none;
}
table {
  border-style:solid;
  border:1px;
  border-color:black;
  width:150px;
}
#schalter {
  background-color:#000;
}

Dieses Beispiel hat gezeigt, wie man mit vergleichsweise wenigen Zeilen Code durchaus Ansprechendes produzieren kann.


 

Ein weiteres Menü

Im folgenden Beispiel geht es um einen wichtigen Usability-Effekt. Normalerweise sollte man dafür sorgen, dass die Besucher immer wissen, auf welcher Seite des Web-Projekts sie sich momentan befinden. Üblicherweise wird das so gemacht, dass der Nutzer auf einen Menüpunkt klickt. Die aktuelle Seite wird daraufhin hin aus-, die neue Seite dafür eingeblendet. Und der Menüpunkt der jetzt zu sehenden Seite ist farbig hinterlegt.
 
Mit jQuery lässt sich dieses Verhalten noch optimieren. Denn hier kann man dafür sorgen, dass die Farbe bereits beim Anklicken des Menüpunkts gesetzt wird. Sehen Sie sich zum besseren Verständnis das Beispiel in Aktion an.

Bilder



Eine solche Anwendung ist sehr schnell umgesetzt. Zunächst muss ein entsprechendes Menü vorhanden sein. Im aktuellen Fall wird von folgender Struktur ausgegangen:
<div id="menu">
  <ul>
    <li><a href="#">Seite 1</a></li>
    <li> <a href="#">Seite 2</a>
      <ul>
        <li><a href="#">Unterseite 2.1</a></li>
        <li><a href="#">Unterseite 2.2</a></li>
        <li><a href="#">Unterseite 2.3</a></li>
      </ul>
    </li>
    <li> <a href="#">Seite 3</a>
      <ul>
        <li><a href="#">Unterseite 3.1</a></li>
        <li><a href="#">Unterseite 3.2</a></li>
        <li><a href="#">Unterseite 3.3</a></li>
      </ul>
    </li>
    <li><a href="#">Punkt 4</a></li>
      <ul>
        <li><a href="#">Unterseite 4.1</a></li>
        <li><a href="#">Unterseite 4.2</a></li>
        <li><a href="#">Unterseite 4.3</a></li>
      </ul>
  </ul>
</div>

Dieser HTML-Bereich weist zunächst einmal keine Besonderheiten auf. Wichtig ist lediglich, dass dem div-Bereich, in dem das Menü enthalten ist, eine ID zugewiesen wird. Interessant wird es erst, wenn man sich den jQuery-Code ansieht.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/* <![CDATA[ */
  google.load("jquery", "1.3.2");
/* ]]> */
</script>
<script type="text/javascript">
/* <![CDATA[ */                                             
$(document).ready(function() {
  $('#menu a').click(function() {
    $(this).parents('li').siblings('li:has(.active)').find('a').removeClass('active').end().end().end().addClass('active');
    return false;
  });
});
/* ]]> */
</script>

Auch dieser Code verdient noch einmal genauere Betrachtung. Wie bereits im vorherigen Beispiel wird hier ebenfalls zunächst über
$(document).ready(function()

geprüft, ob das Dokument vollständig geladen ist. Mit der Anweisung
$('#menu a').click(function()

sorgt man dafür, dass alle Hyperlinks ausgewählt werden, denen die ID menu zugewiesen wurde. Über
parents('li')

werden alle Elternelemente ausgewählt. Betroffen sind davon allerdings ausschließlich li-Elemente. Mit
siblings('li:has(.active)')

werden die Nachbarelemente angesprochen. Klickt man also auf ein Untermenü, werden alle li-Elemente der betreffenden Liste angesprochen. Gleichzeitig wird überprüft, ob li-Elemente Elemente vom Typ .active beinhalten. (Wobei .active hier für aktive Hyperlinks steht). Der active-Link wird nun mittels
find('a')


ausgewählt. Um die Klasse von dem Link wieder zu entfernen, wird .removeClass('active') verwendet. Anschließend folgen drei end()-Anweisungen. Diese sorgen dafür, dass nacheinander die zuvor gemachten Funktionen wieder rückgängig gemacht werden. Und zu guter Letzt wird nun noch über
addClass('active')

die Klasse .active erneut zugewiesen. (Es handelt sich hierbei übrigens nicht etwa um einen Syntaxfehler. Der Punkt, der üblicherweise vor dem Klassennamen stehen muss, darf in diesem Fall nicht gesetzt werden. Das gilt in gleicher Weise auch für .removeClass('active').)

Im aktuellen Beispiel sollen die Links nicht wirklich Seiten aufrufen. Um Seitenaufrufe zu verhindern, wurde dafür
return false;

gesetzt. Diese Anweisung müssen Sie dann in Ihrem Skript natürlich wieder löschen.

Was jetzt noch fehlt, ist die entsprechende CSS-Syntax.
body {
 font-family:Verdana;
 font-size:12px;
}
ul, li {
 margin:0;
 padding:0;
}
a {
 text-decoration:none;
 color:#000;
}
a:hover, a.active {
 color:#fff;
 background:#eee;
}
ul a {
 display:block;
}
ul ul a {
 padding-left:30px;
}
ul ul a:hover, ul ul a.active {
 background:#000;
}

Hier gibt es keine Besonderheiten zu beachten. Bei der Gestaltung des Menüs können Sie dann wie gewohnt mit CSS arbeiten.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von schluggy
  • 08.02.2010 - 23:26

Danke. Beim letzten JS hätte es etwas mehr Erläuterung geben dürfen, warum z.B. die Links ausgewählt werden müssen.

Portrait von mumubaer
  • 10.01.2010 - 21:22

Danke für die leicht verständlichen Erklärungen...v

Portrait von cebylon
  • 25.12.2009 - 11:07

scheint noch ein BUG drinnen zu sein, denn klickt man unter Seite 4 eine Unterseite bleibt dieser farblich hinterlegt, egal welche Unterseite auf Seite 2/3 geklickt wird ...

Portrait von ukrupp
  • 25.12.2009 - 07:50

Danke für die leicht verständlichen Erklärungen...

Portrait von Tim
Tim
  • 21.12.2009 - 19:36

Ganz nett, allerdings lässt sich das erste mit weitaus weniger Zeilen Code umsetzen. Siehe dazu slideToggle(), eine Abfrage, ob das Element angezeigt wird, oder nicht, ist überflüssig.
Des Weiteren wäre es besser gewesen, das Menü über jQuery auch verstecken zu lassen, Nutzer, welche in ihrem Browser Javascript deaktiviert haben, sehen dadurch trotzdem das Menü.

Portrait von elchdesign
  • 21.12.2009 - 10:53

Besten Dank, sehr gut erklärt!

Portrait von eddybaer
  • 20.12.2009 - 13:47

Gut erklärt. Noch schöner wäre es für mich gewesen, wenn es einen Link gegeben hätte zu einer Seite, auf der man die Effekte in der praktischen Anwendung sehen kann.

x
×
×