Wie kann ich eine Dropdown Navigation erstellen?

Es gibt verschiedene Möglichkeiten, wie eine Dropdown Navigation in Cloudrexx erzeugt werden kann. Dieser Artikel beschreibt die Erzeugung einer Dropdown Navigation unter Anwendung des Navigations-Typs Dropdown. Weitere Informationen zu den verschiedenen Navigations-Typen finden sich im entsprechenden Artikel zum Thema Navigationen.

Das folgende Beispiel einer Dropdown Navigation besteht aus drei Elementen:

1. HTML-Template Gerüst

2. CSS Definitionen

3. JavaScript Funktion

1. HTML-Template Gerüst
   Die Grundlage jeder Navigation bildet das HTML-Template Gerüst. Hier wird die HTML-Struktur definiert, aus welcher beim Aufruf des Frontends die Inhaltsseitenstruktur aufgebaut wird. Speichern Sie den folgenden HTML-Code in der navbar.html Ihrer Webdesign Templates ab:
   

   <!-- BEGIN navigation_dropdown -->
   <ul id="navigation">
       <!-- BEGIN level_1 -->
       <li class="level-1 [[STYLE]] [[CSS_NAME]]">
           <a class="[[STYLE]] [[CSS_NAME]]" href="[[URL]]" target="[[TARGET]]" title="[[NAME]]">[[NAME]]</a>[[SUB_MENU]]
       </li>
       <!-- END level_1 -->
       <!-- BEGIN level_2 -->
       <li class="level-2 [[STYLE]] [[CSS_NAME]]">
           <a class="[[STYLE]] [[CSS_NAME]]" href="[[URL]]" target="[[TARGET]]" title="[[NAME]]">[[NAME]]</a>
       </li>
       <!-- END level_2 -->
   </ul>
   <!-- END navigation_dropdown -->

2. CSS Definitionen
   Das Layout der Navigation wird über CSS Definitionen definiert. Die folgenden Definitionen bilden das Layout-Grundgerüst der Dropdown Navigation. Auf optisches Styling wurde in diesem Beispiel absichtlich verzichtet, um den Code möglichst schlank zu halten und von unnötigen Style-Definitionen frei zu halten. Integrieren Sie den folgenden Code in Ihr Webdesign Template. Alternativ laden Sie die Datei dropdown_navigation.css herunter und binden diese über einen HTML-Style-Tag ein.
   

   <style type="text/css">
   #navigation {
       z-index: 5;
       position: relative;
       margin: 0 auto;
       height: 49px;
       padding: 0;
       list-style: none;
   }
   #navigation >li {
       position: relative;
       float: left;
   }
   #navigation li a {
       display: block;
       height: 49px;
       padding: 12px 16px 35px 15px;            
       font-size: 15px;
       font-family: 'Ubuntu';
       box-sizing: border-box;
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       outline: 0 none;
   }
   #navigation li ul {
       display: none;
       position: absolute;
       min-width: 100%;
       top: 49px;
       list-style: none;
       left: 0;
       border-left: 1px solid #EEEEEE;
       border-right: 1px solid #EEEEEE;            
       padding-left: 0;
       margin-left: 0;
       padding: 0;
   }
   #navigation li.level-2 {
       border-bottom: 1px solid #EEEEEE;            
       min-width: 200px;
   }
   #navigation li.level-2 a {
       padding: 11px 15px 16px 15px;
       font-size: 14px;
       font-weight: normal;
       height: 44px;
       white-space: pre;
   }
   #navigation li a:hover {
       text-decoration: none;
   }
   </style>

3. JavaScript Funktion
   Zuletzt wird mit Hilfe von JavaScript die Dropdown Navigation zum Leben erweckt, so dass diese mit dem Maus-Cursor interagiert. Integrieren Sie auch diesen Code in Ihr Webdesign Template. Alternativ laden Sie wieder die Datei dropdown_navigation.js herunter und binden diese ein, diesmal aber über ein HTML-Script-Tag.
   

   <script type="text/javascript">
   //<![CDATA[
   jQuery(document).ready(function () {
       jQuery('#navigation > li').hover(function () {
           jQuery(this).children('ul').animate({
               height: 'toggle',
               opacity: 'toggle'
           }, 150);
       }, function () {
           jQuery(this).children('ul').hide();
       });
       jQuery('#navigation li.level-1:first').addClass('first');
       jQuery('#navigation li.level-1:last').addClass('last');
       jQuery('#navigation li.level-1').children('ul').each(function () {
           jQuery(this).children('li:last').addClass('last');
       });
       jQuery('#navigation li.active').parents('ul.menu').siblings('a').removeClass('starter_normal').addClass('starter_active').parent().removeClass('starter_normal').addClass('starter_active');
   });
   //]]>
   </script>

Abschluss und Bemerkungen

Das wars. Nachdem Sie die HTML-Template Struktur, die CSS Definitionen und die JavaScript Funktion in Ihr Webdesign Template integriert haben, sollten Sie nun eine funktionsfähige Dropdown Navigation haben.

Vergewissern Sie sich, dass der Template Platzhalter [[NAVBAR_FILE]] in Ihrem Webdesign Template (z.b. in der index.html) eingebunden ist, da ansonsten die erfasste HTML-Template-Struktur in der navbar.html Datei nicht angezeigt wird.

Beachten Sie, dass Ihr Webdesign Template allenfalls bereits CSS Definitionen beinhaltet, welche mit der eingefügten Dropdown Navigation kollidieren und so zu einer falschen Darstellung führen kann. Im schlimmsten Fall kann es sogar dazu führen, dass die Dropdown Navigation nicht funktionsfähig ist. Vergewissern Sie sich also, dass allfällig bestehende CSS Definitionen der Dropdown Navigation nicht in die Quere kommen. Insbesondere bestehende CSS Definitionen für die HTML-Tags UL und LI.

Dieses Beispiel generiert eine einstufige Dropdown Navigation (2. Hierarchiestufe des Seitenbaums wird im ausgeklappten Zustand angezeigt). Das Beispiel kann problemlos in eine mehrstufige Dropdown Navigation erweitert werden. Dazu müssen lediglich die zusätzlichen Hierarchiestufen (levels) in der HTML-Template Struktur erfasst werden, das dazugehörige CSS definiert werden und die JavaScript Funktion entsprechend erweitert werden.