J3.x

Untermenü erstellen

From Joomla! Documentation

This page is a translated version of the page J3.x:Creating a submenu and the translation is 21% complete.

Other languages:
Deutsch • ‎English • ‎español • ‎eesti • ‎français • ‎Nederlands
Tutorial
So wird ein Untermenü in einer Joomla! Website erstellt
Joomla! 
3.x
Bei Joomla! können Untermenüs entweder als mit zwei oder mehreren Ebenen oder komplett separat in einem Menü-Modul angezeigt werden. Dies ist sehr nützlich bei Menüstrukturen die die Navigation über mehreren Ebenen anzeigen sollen, sowie Untermenü-Einträge, die in ganz unterschiedlichen Positionen innerhalb des eigenen Templates dargestellt werden. Um dies umzusetzen, beschreiben wir hier eine Schritt-für-Schritt Anleitung zur Erstellung von Menü-Einträgen über mehrere Ebenen und wie diese auf der Website in separaten Positionen angezeigt werden können.

Drei Navigationspunkte sind nötig zur Erstellung eines Menüs:

  • Inhalt - hier wird der Inhalt erstellt. Der Inhalt kann aus Beiträgen, Kategorien oder Links bestehen.
  • Menüs - hier werden die Menüs erstellt. Es können neue Menüpunkte erstellt, Reihenfolgen geändert, sowie das Eltern-/ Kindverhalten bearbeitet werden.
  • Module - Unter dem Menüpunkt "Erweiterungen / Module" kann eingestellt werden, ob und wo, ein Menü angezeigt wird.
Für diese Anleitung sind Administrationsrechte erforderlich. Wenn Sie nicht wissen, wie Sie sich als Administrator einloggen können, lesen Sie bitte diesen Artikel: Logging in or out of the Administrator backend/de.

'"Bemerkung:"' Für diese Anleitung wird eine der folgendenden Berechtigungen benötigt: - Berechtigung zum Erstellen oder Bearbeiten von Beiträgen, Menüs und Modulen - Rechte als "Superuser" Nähere Informationen über die Rechteverwaltung finden Sie unter: ACL Tutorial/de

Schritt 1 - Erstellen eines Beitrags

In unserem Beispiel erstellen wir Menüpunkte für "Dogs" und "Cats". - Unter dem Menüpunkt "Dogs" fügen wir die Unterpunkte "Collies" und "Pomeranians ein. - Unter dem Menüpunkt "Cats" fügen wir die Unterpunkte "Burmese" und "Russian Blues" ein. Damit sieht unsere Menüstruktur folgendermaßen aus:

  • Dogs
    • Collies
    • Pomeranians
  • Cats
    • Burmese
    • Russian Blues

Zuerst erstellen wir die vier Beiträge, auf die wir verlinken möchten. Also die Beiträge für: "Collies", "Pomeranians", "Burmese" und "Russian Blue". Wenn Sie nicht wissen, wie Sie einen Beitrag erstellen können, lesen Sie bitte diesen Artikel: Adding a new Article/de.

Schritt 2 - Erstellen eines Hauptmenüpunktes

Um die Menüstruktur erstellen zu können, navigieren wir zu dem Menü, in dem wir die Untermenüs erstellen möchten (z.B.: Hauptmenü). Handelt es sich dabei um ein neues Menü, müssen wir dieses zuerst anlegen. Wenn Sie nicht wissen, wie Sie Menüpunkte erstellen können, lesen Sie bitte diesen Artikel: Adding a new menu/de.

Im entsprechenden Menü wählen wir '"neuer Menüeintrag"'. Um einen Hauptmenüpunkt zu erstellen wählen wir unter '"Menüeintragstyp"' den Punkt '"Systemlinks"'  '"Menü-Überschrift"'. Diesen Vorgang führen wir für die beiden Punkte "Dogs" und "Cats" aus.

Es gibt auch noch weitere Menüeintragstypen, die als Hauptmenüpunkt geeignet sind.

Mit den folgenden Schritten legen wir unsere Unterpunkte an. Wenn Sie nicht wissen, wie Sie Menüpunkte anlegen können, lesen Sie bitte diesen Artikel: Adding a new menu item/de.
  1. Zu Menüs  Ihr Menü navigieren
    J3x-Edit-Main-Menu-de.jpg
  2. Auf Neu klicken
    J3x-Edit-Main-Menu-Toolbar-new-de.png
  3. For the purposes of this exercise we are creating "placeholder" links using the System  External URL menu type for the Dogs and Cats parent level menu items. So, in the new Menu Item, click on the Menu Type select button:
    J3x-Add-Main-Menu-Select-Type-en.png
  4. Click on System Links then scroll down and select External URL.
    J3x-Create-Sublevel-Menu-System-External-Url-en.png
  5. Add the Menu Item Title ("Dogs") and type in a hashtag "#" in the Link box.
    J3x-Create-Sublevel-Menu-Menu-Item-External-Url-en.png
  6. Save your menu item.
    Joomla-3-Menu-Add-Menu-Save-en.png
  7. Repeat steps 2 - 6 for the Cats Parent Level menu item.

Step 3 - Create the Sublevel Menu Items

Now you will add the sublevel menu items using the Articles  Single Article to create menu links to the individual pages Collies, Pomeranians, Burmese, and Russian Blues. For each Menu Item created, we will set the Parentage to Dogs or Cats.

For more detailed information on how to create a Single Article Menu Type, see: Adding a menu item which points to an Article.

Note: There are other menu item types that can be used for the sublevel navigation structure.

  1. In the toolbar, click on "New".
    J3x-Edit-Main-Menu-Toolbar-new-en.png
  2. In the new Menu Item click on the Menu Type select button:
    J3x-Add-Main-Menu-Select-Type-en.png
  3. Select Articles  Single Article from the list displayed.
    J3x-Add-Main-Menu-Article-Type-en.png
  4. Returning to the Menu Item Detail page, click on the Select Article List.
    J3x-Add-Main-Menu-Article-Select-Article-en.png
  5. Select the Collies article for this example.
    J3x-Create-Sublevel-Menu-Menu-Item-Single-Article-en.png
  6. On returning to the Article Detail page, fill in the Menu Item Title. Then click on the Parent Item select list located in the far right column. Find and select the Dogs parent item by scrolling through the Parent Item List. Note that menu levels are displayed with dashes: "-" (single dash) is the highest level, "--" (two dashes) is the second level, "---" third level and so on.
    J3x-Create-Sublevel-Menu-Select-Parent-Item-en.png
  7. Click on the button Save & Close up in the top button.
    Joomla-3-Menu-Add-Menu-Save-en.png
  8. Repeat steps 1-7 for the remaining articles Pomeranians with the Dog parent and articles Burmese and Russian Blues for the Cat parent.
  9. When you are finished with the "Menu Items" section, the Menu Item Manager should look very similar to the following:
    J3x-Create-Sublevel-Menu-Items-en.png


Step 4 - Setup the Menu Module

At this point, we have our Articles and Menu Items done. Now we need to update the Menu Module. In Joomla!, the Menu Module determines three main things:

  1. What the menu looks like;
  2. Where on the page it will show;
  3. Which pages it will show on.

We will do two examples:

  • In the first example, we will set the parameters that show the parent level menu items with the lower level items beneath.
  • In the second example, we will add an additional menu module that appears in the left column and shows only the second level menu items.

Note: We will do both examples using the Protostar Template included in the core Joomla! installation.

Example 1 - One Menu Module With Second Level Menu Items

To show this as one module, follow these steps:

  1. Navigate to Extensions  Module Manager and locate the Menu Module associated with your menu. If you need to create a new menu module, for instructions on creating a menu module, see: Module Menu
    J3x-Create-Sublevel-Menu-Module-Control-Panel-en.png
  2. Click on the module name associated with your menu. In this tutorial, we are selecting Main Menu. Note: this image has been filtered by selecting Menu in the Module type dropdown.
    J3x-Create-Sublevel-Menu-Module-List-Menus-en.png
  3. In the Module details, set the Start level to 1, the End Level to All and set Show Submenu Items to Yes.
    J3x-Create-Sublevel-Menu-Module-Details-en.png
  4. For this tutorial, we have added some styling in the Advanced tab. In the Menu Class Suffix we have entered navbar-nav nav-pills. You can also add navbar-nav nav-tabs for a slightly different look. Note: there is a space before navbar-nav.
    J3x-Create-Sublevel-Menu-Module-Advanced-Menu-Class-Suffix-en.png
  5. Click on Save & Close.
    J3x-Create-Sublevel-Menu-Module-Save-en.png
  6. Go to the frontend of your site and your menu should look similar to this. In the Protostar Template, the sublevel menu items are displayed as dropdown menu items.
    J3x-Create-Sublevel-Menu-Frontend-Sample-Dropdown-en.png
  7. The source code generated will look similar to this:
<ul class="nav menu navbar-nav nav-pills">
  <li class="item-101 current active"><a href="/" >Home</a></li>
  <li class="item-102"><a class="dropdown-toggle" href="/about-us" >About Us</a></li>
  <li class="item-210 deeper parent"><a href="#" >Dogs</a>
    <ul class="nav-child unstyled small">
      <li class="item-212"><a href="/2015-11-24-14-19-31/collies" >Collies</a></li>
      <li class="item-213"><a href="/2015-11-24-14-19-31/pomeranians" >Pomeranians</a></li>
    </ul>
  </li>
  <li class="item-211 deeper parent"><a href="#" >Cats</a>
    <ul class="nav-child unstyled small">
      <li class="item-214"><a href="/2015-11-24-14-20-12/burmese" >Burmese </a></li>
      <li class="item-215"><a href="/2015-11-24-14-20-12/russian-blues" >Russian Blues</a></li>
    </ul>
  </li>
</ul>

Example 2 - A Second Menu Module With Child Level Menu Items

To show in a separate module in a different position, follow these steps:

  1. Navigate to Extensions  Module Manager and locate or create a second Menu Module associated with your menu. If you are unfamiliar with how to create a new menu module, for instructions on creating a menu module, see: Module Menu
    J3x-Create-Sublevel-Menu-Module-Control-Panel-en.png
  2. Click on the module name associated with your menu. In this tutorial, we are selecting Left Menu. Note: this image has been filtered by selecting Menu in the Module type dropdown.
    J3x-Create-Sublevel-Menu-Module-List-Menus-2-en.png
  3. In the Module details, set the Start level to 2, the End Level to All and set Show Submenu Items to Yes. Note the position has changed and the menu we are pointing to is the Main Menu.
    J3x-Create-Sublevel-Menu-Module-Details-2-en.png
  4. For this tutorial, we have used the Menu Assignment tab and assigned this Menu Module to appear on all pages except the home page.
    J3x-Create-Sublevel-Menu-Module-Module-Assignment-Tab-en.png
  5. Click on Save & Close.
    J3x-Create-Sublevel-Menu-Module-Save-en.png
  6. Go to the frontend of your site and navigate to the Collies article. Your menu should look similar to this. Notice the child level subitems are the only items showing.
    J3x-Create-Sublevel-Menu-Frontend-Sample-Child-Menu-en.png
  7. The source code generated will look similar to this:
<ul class="nav menu">
  <li class="item-212 current active"><a href="/2015-11-24-14-19-31/collies" >Collies</a></li>
  <li class="item-213"><a href="/2015-11-24-14-19-31/pomeranians" >Pomeranians</a></li>
</ul>


Sub-Sub-Menus

Using this same technique, it is easy to create third-level sub-menus. You just make the Parent Menu Item a second-level sub-menu. Then you could use the same technique to create a separate Menu Module with Start Level of 2 and End Level of 3. This would show only the third-level Menu Items.