Anzeige
Tutorialbeschreibung

jQuery - Ein Menü mit nmcDropDown erstellen

jQuery - Ein Menü mit nmcDropDown erstellen

Menüs sind das Salz in der Suppe jeder Webseite. Schließlich ermöglichen gut gestaltete Menüs, die übersichtlich und einfach zu bedienen sind, den Besuchern eine reibungslose Navigation durch das Projekt. jQuery macht die Definition ansprechender Menüs besonders einfach. Wer sich mit seinem Menü noch mehr von der Masse abheben möchte, kann zusätzlich auf eines der zahlreichen jQuery-Plug-ins zurückgreifen. Eines dieser Plug-ins ist nmcDropDown, das in diesem Tutorial anhand von Beispielen vorgestellt wird.


nmcDropDown ist ein Menü-Plug-in, das auf jQuery aufsetzt. Dieses Plug-in hilft Ihnen dabei, optisch ansprechende Drop-Down-Menüs zu erstellen. Wie ein auf nmcDropDown-Basis angelegtes Menü aussieht, können Sie sich auf der Seite http://www.ncbowd.com/ ansehen.

Bilder



 
Dieses Beispiel zeigt, welches Potenzial im nmcDropDown-Plug-in steckt. Die Basis eines solchen Menüs bildet dabei – und das ist in Zeiten moderner, auf CSS-basierender Seiten längst Standard – eine Liste.
[Beispiel anzeigen]
<ul id="nav">
   <li><a href="#">CMS</a>
     <ul>
       <li><a href="#">Joomla!</a></li>
       <li><a href="#">TYPO3</a></li>
     </ul>
   </li>
   <li><a href="#">Grafik</a>
     <ul>
       <li><a href="#">Photoshop</a></li>
       <li><a href="#">Freehand</a></li>
     </ul>
   </li>
   <li><a href="#">Programmierung</a>
     <ul>
       <li><a href="#">PHP</a></li>
       <li><a href="#">JavaScript</a></li>
       <li><a href="#">Python</a></li>
     </ul>
   </li>
</ul>

 
Bislang handelt es sich um eine einfache HTML-Liste, die vom Browser zunächst auch als ganz normale ungeordnete Liste angezeigt wird.

Bilder



 
Um aus dieser Liste ein Menü zu machen, müssen zunächst einige CSS-Eigenschaften definiert werden. Die folgende Syntax zeigt, wie das aussehen kann:
[Beispiel anzeigen]
<style type="text/css">
/* <![CDATA[ */
#nav {
 margin: 15px 0;
 padding: 0 20px;
 height: 30px;
 background: #ccc;
 list-style-type: none;
}
#nav li {
 float: left;
 position: relative;
 list-style-type: none;
}
#nav li.open, #nav li:hover {
  background: #bbb;
  }
#nav li a {
 display: block;
 padding: 5px 25px;
 line-height: 20px;
 color: #444;
 text-decoration: none;
}
#nav li ul {
  display: none;
  position: absolute;
  top: 30px;
  left: 0;
  width: 130px;
  padding: 0 0 5px;
  background: #bbb;
  border: solid #bbb;
  }
#nav li:hover ul {
  display: block;
  }
#nav li ul li {
  float: none;
  }
#nav li ul li a {
  padding: 8px 10px;
  display: inline-block;
  }
#nav li ul li a {display: block;}
#nav li ul li a:hover {
  background: #444;
  color: #bbb;
  }
  /* ]]> */
</style>

Hier wurden einige CSS-Anweisungen definiert. Durch diese wurde die Liste bereits jetzt zu einem recht ansehnlichen Menü.

Bilder



 
Das Menü wäre in dieser Form bereits nutzbar. Was jetzt allerdings noch fehlt, ist die jQuery- bzw. die Funktionalität des nmcDropDown-Plug-ins. Um diese aufzunehmen, muss zunächst die jQuery-Bibliothek geladen werden.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/* <![CDATA[ */
  google.load("jquery", "1.3.2");
/* ]]> */
</script>

Im nächsten Schritt müssen Sie die Plug-in-Datei einbinden. Angeboten werden davon zwei Varianten.

Welche dieser beiden Varianten Sie letztendlich nutzen, bleibt Ihnen überlassen. Bei den minimalen Dateigrößen von 3.5 bzw. 1.3 KB halten sich die Geschwindigkeitsunterschiede allerdings in Grenzen. (Wobei man üblicherweise dennoch die minimale Version einbinden sollte.)
[Beispiel anzeigen]
<script src="jquery.nmcDropDown.js" type="text/javascript"></script>
 Nachdem das Plug-in eingebunden wurde, kann direkt damit gearbeitet werden. Im einfachsten Fall sieht eine Anwendung folgendermaßen aus:
 <script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function() {
    $('#nav').nmcDropDown({
     show: {height: 'show', opacity: 'show'}
 });
 });
 /* ]]> */
 </script>


 
Das Menü funktioniert in dieser Form bereits.

Bilder



 
Diesem Menü liegt die einfachste Syntaxform des nmcDropDown-Plug-ins zugrunde. Die Syntax bewirkt ein (vergleichsweise) langsames Aufklappen der Untereinträge. Zusätzlich wird beim Einblenden dieser Einträge mit der opacity-Eigenschaft gearbeitet. Das Menü erscheint also zunächst leicht transparent.

Es gibt zusätzliche Parameter, mit denen man das Verhalten des Plug-ins ganz gezielt steuern kann. Zunächst ein Beispiel, wie sich die Parameter einsetzen lassen.
[Beispiel anzeigen]
$(document).ready(function() {
$('#nav').nmcDropDown({
    trigger: 'click',
    show: {height: 'show'},
    hide: {height: 'hide'},
                show_speed: 3000
});
});

Das Plug-in kennt die folgenden Parameter:
  • active_class – Weist den geöffneten Menüeinträgen eine Klasse zu.
  • fix_IE – Dieser Wert soll die Probleme beheben, die der IE 6 und 7 bezüglich des z-index hat. Sollte es Probleme hinsichtlich der Überlagerung der Untereinträge geben, setzen Sie diesen Wert auf false.
  • hide – Legt den Effekt fest, der beim Verstecken des Menüs angewendet werden soll.
  • hide_delay – Setzt die Dauer der Verzögerung, die beim Ausblenden der Untereinträge eingehalten werden soll.
  • hide_speed – Bestimmt die Geschwindigkeit des Übergangs beim Ausblenden.
  • show – Hierüber können Sie den Effekt bestimmen, der beim Einblenden der Untermenüeinträge angewendet werden soll.
  • show_delay – Dieser Wert setzt die Dauer der Verzögerung fest, die eingehalten werden soll, bevor das Untermenü angezeigt wird.
  • show_speed – Damit bestimmen Sie die Geschwindigkeit des Übergangs beim Einblenden.
  • trigger – Hierüber legt man das Ereignis fest, über welches das Untermenü ein- und ausgeblendet werden soll. Möglich sind hover und click.

Experimentieren Sie ruhig etwas mit den Parametern und den entsprechenden Werten.


 

Weitere Verbesserungen

Das Menü ist in der gezeigten Form einsetzbar, es lässt sich aber durchaus noch verbessern. Das gelingt durch den Einsatz eines weiteren Plug-ins. Denn mit dem von Brian Cherne entwickelten hoverIntent-Plug-in lässt sich das Menü benutzerfreundlicher gestalten. Das Plug-in arbeitet zunächst einmal wie die in jQuery integrierte Hover-Funktionalität. (Genau genommen wurde die Funktionsweise aus der jQuery-Funktion übernommen.) Es gibt allerdings einen entscheidenden Unterschied. Denn anstatt dass das Plug-in sofort onMouseOver aufruft, wartet es, bis die Maus langsamer bewegt wird. Hier könnte man die durchaus berechtigte Frage nach dem Warum stellen. Der Entwickler des Plug-ins Brian Cherne will dadurch Fehler innerhalb von Ajax-Anwendungen verhindern. Wie das funktioniert, zeigt Brian Cherne eindrucksvoll auf seiner Webseite.

Bilder



Im Bereich Examples werden die beiden Hover-Varianten von jQuery und hoverIntent direkt miteinander verglichen. jQuery-Hover verhält sich dabei so, wie man es gewohnt ist. Fährt man mit der Maus über den entsprechenden Bereich, greift onMouseOver. Anders sieht es bei hoverIntent aus. Wenn Sie dort mit der Maus über den relevanten Bereich zügig fahren, passiert überhaupt nichts. Erst, nachdem man kurz mit dem Mauszeiger verweilt, wird onMouseOver ausgeführt.

Das Plug-in können Sie sich von der Seite http://cherne.net/brian/resources/jquery.hoverIntent.html herunterladen bzw. kopieren. Das entsprechende Skript fügt man dann ein.
[Beispiel anzeigen]
<script src="jquery.hoverIntent.minified.js" type="text/javascript"></script>

Achten Sie in diesem Fall darauf, dass die Pfadangabe stimmt.

Fazit

Mit den jQuery-Plug-ins kann man seine Menüs deutlich ansprechender gestalten, als das mit der klassischen HTML-CSS-Kombination möglich ist. Welche Möglichkeiten es hinsichtlich der Menügestaltung noch gibt, werden weitere Tutorials dieser jQuery-Reihe zeigen.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von patrick_l
  • 10.09.2010 - 00:38

JQuery ist wirklich eine feine Sache. Nachdem ich das erste mal darauf aufmerksam wurde wollte ich gleich mehr erfahren. An dieser Stelle ein Dank für diesen nützlichen Workshop.

Portrait von Timeee
  • 25.08.2010 - 21:28

danke gutes Tutorial.

Portrait von Xazen
  • 12.08.2010 - 11:56

Wirklich sehr gutes Tutorial. Die Codes und Bilder sind auch sehr hilfreich. Super Einfärbung *Daumen hoch*

Portrait von quid_w
  • 17.06.2010 - 18:43

super!!!!! hab zwar etwas länger gebraucht und hatte auch einige probleme, aber allem in allem SEHR GUT =)

Portrait von captainthriller
  • 14.06.2010 - 20:43

Sehr schönes Tut.
Ich werde es gleich durcharbeiten ...
Vorab eine Frage:
Ist das ganze auch IE 6+ tauglich?

Habe schon viele Tutorials gesehen, die aber einfach nicht für den IE6 und IE7 optimiert waren.

Gruß, captain

Portrait von biege84
  • 11.06.2010 - 00:36

Vielen Dank für das Tutorial, es hat mir sehr geholfen mit meiner Page weiter zu kommen

Portrait von Hammelmen
  • 08.03.2010 - 11:57

Gut gemachtes Tutorial! Nur ist es für einen der javascript einsteiger nicht so leicht zu verstehen. Trotzdem hilfreich!!!

Portrait von Promiso
  • 03.03.2010 - 15:24

sehr gutes tutorial, danke

Portrait von Macskydiver
  • 11.02.2010 - 22:35

Super Tutorial! jQuery ist fantastisch... nicht nur für die Gestaltung von Menus. Bin gespannt auf evtl. folgende Tutorials.

Portrait von Macskydiver
  • 11.02.2010 - 22:34

Super Tutorial! jQuery ist fantastisch... nicht nur für die Gestaltung von Menus. Bin gespannt auf evtl. folgende Tutorials.

Portrait von Macskydiver
  • 11.02.2010 - 22:34

Super Tutorial! jQuery ist fantastisch... nicht nur für die Gestaltung von Menus. Bin gespannt auf evtl. folgende Tutorials.

Portrait von Benwick
  • 11.02.2010 - 09:21

Mal wieder ein guter Anreiz, neu mit Menus zu experimentieren. Danke dafür.

Portrait von mumubaer
  • 07.02.2010 - 01:01

bitte mach mal tutrial mit timer .. zeit spiele.

Portrait von malistor
  • 06.02.2010 - 05:15

Passt gerade sehr gut zu meinen Begehrlichkeiten - tolles Timing. Danke :)

Portrait von tonimi
  • 05.02.2010 - 17:59

ist gut, aber nicht einzigartig.....

Portrait von eldibujante
  • 05.02.2010 - 17:25

jquery macht Spaß - mehr davon :-)

Portrait von websmurf
  • 05.02.2010 - 09:28

Die Drop-Down Menüs haben ja spätestens seit der Adelung durch Jakob-Nielsen (Mega-Drop-Down) einen Boom.
http://www.useit.com/alertbox/mega-dropdown-menus.html

Dabei spielen die Funktionen von HoverIntent eine wichtige Rolle, denn die Drop-Downs brauchen eine gewisse Zeitverzögerung. Sonst flackern sie, wenn man mit der Maus quer über ein Menü fährt. Über die Länge der Verzögerung lässt sich diskutieren. Ich halte die 0.5 Sekunden bei Nielsen für zu lang. Wir haben in unserem Projekt 0,2 Sekunden genommen und sind zufrieden.

Auch bei Mouse-Out sollte man nicht direkt ausblenden, denn wenn der User von Top-Eintrag diagonal zu einem Untereintrag fährt und dabei kurz das Menü verlässt, darf es nicht direkt zu gehen.
Beispiel:
http://www.moderne-ausbildung.de/

Portrait von katzenpup
  • 05.02.2010 - 09:12

Supergut. Ich habe jetzt endlich Lust, das jquery auszuprobieren!

Portrait von ullimitpulli
  • 05.02.2010 - 07:55

Gute Morgen,
bin gerade unsere Website zu gestallten, habe gestern lange an mein Drop-dawn Menue getüftelt aber es nicht irgendwie nicht richtig hin bekommen.
Heute werde ich es nochmals versuchen und ich meine mit so einem superguten Tut. muß es wohl klappen.
Wenn nicht liegt es dann bestimmt an mir
grüße
Ullimitpulli

Portrait von Pepeperez
  • 04.02.2010 - 13:04

Sehr gut und ersichtlich erklärt. Man kann nachvollziehen von Html über CSS wie es zum jquery menu kommt. Danke!

x
×
×