Ein universelles Menü für Webanwendungen
ulrich
2018-01-07 98828d069b8d80415670bec6ead6f8820c80fabe
app-menu.js
@@ -2,11 +2,12 @@
 * die nachfolgenden Funktionen steuern das ein- und
 * ausblenden des menues
 */
function app_menu_init(url_prefix, mdesc, mtpl, mselector) {
function app_menu_init(url_prefix, mdesc, mtpl, mselector, mbreite) {
  _app_menu_selector = mselector;
  document.querySelector( "#nav-toggle" ).addEventListener("click", function() {
  _app_menu_mbreite = mbreite;
  /*document.querySelector( "#nav-toggle" ).addEventListener("click", function() {
    app_menu_toggle();
  });
  });*/
  $(_app_menu_selector).css("flex-basis", "0em");
  _app_menu_url_prefix = url_prefix;
  $.get(mtpl, function(template) {
@@ -24,21 +25,21 @@
}
function app_menu_do_toggle(elem) {
  document.querySelector( "#nav-toggle" ).classList.toggle( "active" );
  document.querySelector( "#nav-toggle" ).blur();
  /*document.querySelector( "#nav-toggle" ).classList.toggle( "active" );
  document.querySelector( "#nav-toggle" ).blur();*/
  app_menu_toggle();
}
function app_menu_toggle() {
  document.querySelector( "#nav-toggle" ).classList.toggle( "active" );
  document.querySelector( "#nav-toggle" ).blur();
  /*document.querySelector( "#nav-toggle" ).classList.toggle( "active" );
  document.querySelector( "#nav-toggle" ).blur();*/
  var westDiv = $(_app_menu_selector);
  if($(westDiv).hasClass('app-menu-open')) {
    $(westDiv).removeClass('app-menu-open');
    $(westDiv).css("flex-basis", "0em");
  } else {
    $(westDiv).addClass('app-menu-open');
    $(westDiv).css("flex-basis", "16em");
    $(westDiv).css("flex-basis", _app_menu_mbreite); // z.B. "16em"
  }
}
@@ -49,6 +50,7 @@
var _app_menu_url_prefix = "";
var _app_menu_template;
var _app_menu_selector;
var _app_menu_mbreite;
/*
 * mdesc: der URL einer JSON-Datei mit einer Menuebeschreibung