# app-menu

Ein universelles Menü für Webanwendungen.

## Beschreibung

Das app-menu ist eine Sammlung aus JavaScript-Funktionen, die eine Liste von Auswahlpunkten aus einer Beschreibung in der JavaScript Object Notation (JSON) formen. Die Gestaltung des Menüs wird über ein Cascading Stylesheet (CSS) bestimmt.

## Anwendung

Das app-menu wird wie folgt in eigene Webanwendungen eingebaut.

1. Einbinden der Abhängigkeiten (jQuery und Mustache)
2. Einbinden der Stylesheets
3. Weitere Schritte

Weiterer Text




## Einbinden von jQuery und Mustache



```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
```
Das obige Beispiel bindet jQuery und Mustache aus dem Content Delivery Network [cdnjs](https://cdnjs.com/) ein. Stattdessen können die beiden JavaScript-Komponenten auch lokal ausgeliefert werden.

## Einbinden des Stylesheets



```
<link rel="stylesheet" type="text/css" href="applib/app-menu/nav-toggle.css">
<link rel="stylesheet" type="text/css" href="applib/app-menu/app-menu.css">
```


#### Einbinden des Skripts
```
<script src="applib/app-menu/app-menu.js"></script>
```

#### Aufruf des Menüs
```
app_menu_init("menu/", "hauptmenue.json", "applib/app-menu/app-menu.tpl", ".west");
```

Parameter 1: Name des Unterverzeichnisses mit Menübeschreibungen
Parameter 2: Name der Menübeschreibung, die zuerst angezeigt werden soll
Parameter 3: Unterverzeichnis und Name der Menüvorlage für Mustache
Parameter 4: Name des Selektors, der das Menü aufnehmen soll

### Menüvorlage

Im Verzeichnis `applib/app-menu` befindet sich eine Vorlage für ein dynamisches Menü, das ein- und ausgeblendet werden kann und seine Inhalte von Beschreibungen in JSON erhält. Menüs werden dynamisch aus JSON-Strukturen erstellt, die ein Menü beschreiben. In dieser Form sind die Menübeschreibungen gut mit einem Serverdienst zu ersetzen. Eine Beschreibung sieht wie folgt aus

```
{
  "menue": {
    "menuetitel": "Hauptmenü",
    "wurzel": true,
    "vorgaenger": {
      "vtitel": "",
      "vverweis": ""
    },
    "inhalt":  [
      {
        "titel": "H Menüeintrag 1",
        "umenue": false,
        "funktion": "app_menu_test"
      },
      {
        "titel": "H Menüeintrag 2",
        "umenue": true,
        "verweis": "untermenue-1.json"
      },
      {
        "titel": "H Menüeintrag 3",
        "umenue": false,
        "funktion": "app_menu_test_2"
      }
    ]
  }
}
```

Der Schalter `wurzel` legt fest, ob noch ein übergeordnetes Menü dargestellt wird. Wenn ja (`wurzel=false`) wird in `vorgaenger.vverweis` der Name der Menübeschreibung und in `vorgaenger.vtitel` der Name, unter dem der Eintrag im Menü erscheinen soll angegeben. Ebenso legt der Schalter `umenue` fest, ob ein Untermenue dargestellt wird. Dann muss in `verweis` der Name der Menübeschreibung angegeben sein.

Im Element `funktion` eines Menüeintrages wird ein Funktionsname notiert. Die so benannte Funktion wird aufgerufen, wenn das Menü gewählt wird. Eine solche Funktion darf keine Parameter erwarten.