PSD-Tutorials.de - jQuery – Ein Menü mit nmcDropDown erstellen

[x]

Informationen

Neue Forenthemen

Ihr Partner mit Ideen

Anzeige

JQuery >> 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.

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.

Sorry, Mitgliederworkshops können nur angeschaut werden, wenn Du Mitglied bist !

Vorteile einer Mitgliedschaft auf PSD-Tutorials.de

Zugriff auf über 1700 Workshops mit druckbarer PDF-Datei
Zugriff auf über 500 Videoworkshops
Zugriff auf über 3000 Downloads um Photoshop & Co zu erweitern
Zugriff auf ein sehr aktives Forum - Antworten im Minutentakt
Mitgliedschaft ist kostenlos und kann jederzeit wieder gelöscht werden
und vieles mehr ...
30 Sekunden ... und schon bist Du Mitglied. Klicke hier

Dies ist die Textansicht vom Workshop. Als Mitglied siehst Du zusätzlich alle Bilder + PDF-Download + Arbeitsmaterialen-Download!

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.       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.       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ü.       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.      Die vollständig kommentierte Version ist 3.5 KB groß und kann von der Seite http://www.newmediacampaigns.com/files/media/nmcdropdown/jquery.nmcDropDown.js heruntergeladen werden.     Die minimale Dateiversion finden Sie unter http://www.newmediacampaigns.com/files/media/nmcdropdown/jquery.nmcDropDown.min.js. Diese Datei hat lediglich eine Größe von 1.3 KB.   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.       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.     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.

• Home • Member-Tutorials • Forum • Downloads • DVD • Sitemap
Premiumpartner: • photoshoptutorials.de • Pixelio.de • Webdesigner • Tutorials.de • piqs.de Lizenzfreie Bilder • flashhilfe.de • Fotobuch • Flashforum

Seite generiert in: 0.040 Sekunden