Hamburger-Icon gewechselt und Menue-Steuerung daran angepasst.

ulrich

2018-01-07 03f9a7c0a031b5246df4436bf53136d2e48a557f

Hamburger-Icon gewechselt und Menue-Steuerung daran angepasst.

 README.md

@@ -93,7 +93,6 @@
Diese sind in der Datei `index.html` über die folgenden Einträge eingebunden.

````
<link rel="stylesheet" type="text/css" href="../jslib/app-menu/nav-toggle.css">
<link rel="stylesheet" type="text/css" href="../jslib/app-menu/app-menu.css">
<script src="../jslib/jquery-1.11.1/jquery-1.11.1.min.js"></script>
<script src="../jslib/mustache/mustache.min.js"></script>

 app.css

@@ -10,7 +10,8 @@
  margin: 0;
  padding: 0;
  height: 100%; /* Anmerkung 2 */
  font-size: initial;
  font-size: large;
  /* font-size: initial; */
  /* font-size: 1.5em; */   /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
@@ -32,6 +33,7 @@
  display: flex;
  flex-flow: row;
  height: 2em;
  align-items: center;
}
.sued {
  background-color: lightgray;
@@ -69,8 +71,13 @@

/* app-layout ende */

#nav-menu {
  /* padding-top: 0.5em;*/
  width: 2em;
}

#app-titel {
  padding-left: 2em;
  /* padding-left: 2em; */
}

.pointer-cursor {

 app.js

@@ -31,6 +31,12 @@
  app_get_template('data/tpl/dlg-sender-edit-form.tpl', TPL_SENDER_EDIT_FORM);
  app_get_template('data/tpl/kachel.tpl', TPL_SENDER_KACHEL);
  app_get_template('data/tpl/abspieler.tpl', TPL_ABSPIELER);

  var $hamburger = $(".hamburger");
  $hamburger.on("click", function(e) {
    app_menue_umschalten();
  });

  $(".sendersuche-eingabe").on('keyup', function() {
    clearTimeout(suchTimeout);
    suchTimeout = setTimeout('app_sendersuche()', 500);
@@ -52,6 +58,12 @@
    'Suchbegriff: ' + suchbegriff,
    1500
  );
}

function app_menue_umschalten() {
  var $hamburger = $(".hamburger");
  $hamburger.toggleClass("is-active"); // hamburger-icon umschalten
  app_menu_toggle(); // menue oeffnen/schliessen
}

/* Senderliste */
@@ -108,12 +120,12 @@
function app_nachricht_test() {
  app_dialog_laden_und_zeigen(
    templateCache[TPL_DLG_MSG], 'data/msg-test.json');
  app_menu_toggle();
  app_menue_umschalten();
}

function app_info_dialog_zeigen() {
  app_dialog_laden_und_zeigen(templateCache[TPL_DLG_INFO], '');
  app_menu_toggle();
  app_menue_umschalten();
}

function app_neuer_sender() {
@@ -124,31 +136,31 @@
    app_dialog_schliessen();
    app_meldung_mit_timeout('Speichern gewaehlt', 1500);
  });
  app_menu_toggle();
  app_menue_umschalten();
}

function app_sender_bearbeiten() {
  senderKlickModus = "2"; // bearbeiten
  app_dialog_laden_und_zeigen(templateCache[TPL_DLG_SENDER_EDIT], '');
  app_menu_toggle();
  app_menue_umschalten();
}

function app_sender_loeschen() {
  app_meldung_mit_timeout('Nicht implementiert: Sender loeschen.', 1500);
  app_menu_toggle();
  app_menue_umschalten();
}

function app_abspieler_loeschen() {
  app_meldung_mit_timeout('Nicht implementiert: Abspieler loeschen.', 1500);
  app_menu_toggle();
  app_menue_umschalten();
}
function app_neuer_abspieler() {
  app_meldung_mit_timeout('Nicht implementiert: Neuer Abspieler.', 1500);
  app_menu_toggle();
  app_menue_umschalten();
}
function app_abspieler_bearbeiten() {
  app_meldung_mit_timeout('Nicht implementiert: Abspieler bearbeiten.', 1500);
  app_menu_toggle();
  app_menue_umschalten();
}

/* --- Dialogfunktionen --- */

 hamburger.css

New file
@@ -0,0 +1,100 @@
/*!
 * entnommen aus
 *
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */

.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}

.hamburger:hover {
  opacity: 0.7;
}

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 30px;
  height: 4px;
  background-color: #000;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before, .hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -10px;
}

.hamburger-inner::after {
  bottom: -10px;
}

/*
 * Elastic
 */
.hamburger--elastic .hamburger-inner {
  top: 2px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
}

.hamburger--elastic .hamburger-inner::before {
  top: 10px;
  transition: opacity 0.125s 0.275s ease;
}

.hamburger--elastic .hamburger-inner::after {
  top: 20px;
  transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger--elastic.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(135deg);
  transition-delay: 0.075s;
}

.hamburger--elastic.is-active .hamburger-inner::before {
  transition-delay: 0s;
  opacity: 0;
}

.hamburger--elastic.is-active .hamburger-inner::after {
  transform: translate3d(0, -20px, 0) rotate(-270deg);
  transition-delay: 0.075s;
}

 index.html

@@ -4,15 +4,19 @@
    <title>Radio-UI</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../jslib/app-menu/nav-toggle.css">
    <link rel="stylesheet" type="text/css" href="../jslib/app-menu/app-menu.css">
    <link rel="stylesheet" type="text/css" href="hamburger.css">
    <link rel="stylesheet" type="text/css" href="app.css">
  </head>
  <body>
    <!-- Kopfzeile -->
    <div class="nord">
      <div id="nav-menu">
        <a id="nav-toggle" href="#"><span></span></a>
        <div id="nav-toggle" class="hamburger hamburger--elastic">
          <div class="hamburger-box">
            <div class="hamburger-inner"></div>
          </div>
        </div>
      </div>
      <div class="app-titel">
        <span id="app-titel">Radio-UI</span>