web/app-vorlage.git - Ulrich Hilger Code Repository

parent: d3a2d98c | patch | commit | show whitespace

ulrich

2018-03-30 df8c52e525ef7b1da495e84e5a403cf1ef42e99d

Neue Fassung

3 files modified

1 files added

1 files deleted

	app.css	18 ●●●●● patch \| view \| raw \| blame \| history
	app.js	9 ●●●●● patch \| view \| raw \| blame \| history
	hamburger.css	99 ●●●●● patch \| view \| raw \| blame \| history
	index.html	36 ●●●●● patch \| view \| raw \| blame \| history
	jslib/app-menu/nav-toggle.css	48 ●●●●● patch \| view \| raw \| blame \| history

 app.css

@@ -16,7 +16,11 @@
  min-height: 0; /* Anmerkung 1 */
}
.nord {
  background-color: lightgray;
  background-color: black;
  display: flex;
  flex-flow: row;
  height: 2.5em;
  align-items: center;
}
.sued {
  background-color: lightgray;
@@ -24,8 +28,11 @@
.west {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10em;
  background-color: antiquewhite;
  flex-basis: 4em;
  background-color: white;
  transition: all 0.3s ease-in;
  overflow: hidden;
  white-space: nowrap;
}
.ost {
  flex-grow: 0;
@@ -47,3 +54,8 @@
  2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
      immer ueber das gesamte Browserfenster ausdehnt.
*/

.app-titel {
  margin-left: 2em;
  color: white;
}

 app.js

@@ -8,5 +8,14 @@
      "jslib/app-menu/app-menu.tpl",
      ".west",
      "8em");
    $(".hamburger").on("click", function(e) {
      self.app_menue_umschalten();
    });

  };

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

 hamburger.css

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

.hamburger {
  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: 0;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 30px;
  height: 4px;
  background-color: white; /* #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

@@ -6,13 +6,22 @@
    <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-toggle"></div>
      <div>Kopfzeile</div>
      <div id="nav-menu">
        <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">App-Titel</span>
      </div>
    </div>
    <div class="inhalt">
      <!-- westliche Seitenleiste -->
@@ -22,28 +31,7 @@
      <!-- zentraler Inhaltsbereich -->
      <div class="zentrum">
        <p>
          Dies ist ein Beispiel für eine Webseite, die ein
          <code>flexbox</code>-Layout für die Anordnung ihrer Inhalte
          nutzt.
        </p>
        <p>
          Der Inhaltsbereich in der Mitte passt sich zur Laufzeit dynamisch
          an die Größe des Browserfensters an. Er wird von einer
          Kopfzeile, einer Fußzeile und zwei Seitenleisten umschlossen.
        </p>
        <p>
          Übersteigt die Textmenge im Zentrum den vorhandenen Raum,
          kann der Inhalt per Rollbalken ohne Verrutschen der
          umschließenden Bedienelemente durchgeblättert werden.
        </p>
        <p>
          Dieses Verhalten kann über die folgende Seite ausprobiert werden: <br/>
          <a href="app-layout-gross.html">Testseite mit umfangreichem Inhalt</a>.
        </p>
        <p>
          Das Beispiel besteht aus den Seiten<br/>
          <code>app-layout.html</code> (diese Seite)<br/>
          <code><a href="app-layout.css">app-layout.css</a></code> (CSS-Gestaltungsvorlage)
          Inhalt hier...
        </p>
      </div>
      <!-- oestliche Seitenleiste -->

 jslib/app-menu/nav-toggle.css

File was deleted

			@@ -16,7 +16,11 @@
			min-height: 0; /* Anmerkung 1 */
			}
			.nord {
			background-color: lightgray;
			background-color: black;
			display: flex;
			flex-flow: row;
			height: 2.5em;
			align-items: center;
			}
			.sued {
			background-color: lightgray;
			@@ -24,8 +28,11 @@
			.west {
			flex-grow: 0;
			flex-shrink: 0;
			flex-basis: 10em;
			background-color: antiquewhite;
			flex-basis: 4em;
			background-color: white;
			transition: all 0.3s ease-in;
			overflow: hidden;
			white-space: nowrap;
			}
			.ost {
			flex-grow: 0;
			@@ -47,3 +54,8 @@
			2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
			immer ueber das gesamte Browserfenster ausdehnt.
			*/

			.app-titel {
			margin-left: 2em;
			color: white;
			}

			@@ -8,5 +8,14 @@
			"jslib/app-menu/app-menu.tpl",
			".west",
			"8em");
			$(".hamburger").on("click", function(e) {
			self.app_menue_umschalten();
			});

			};

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

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

			.hamburger {
			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: 0;
			}

			.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
			width: 30px;
			height: 4px;
			background-color: white; /* #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;
			}

			@@ -6,13 +6,22 @@
			<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-toggle"></div>
			<div>Kopfzeile</div>
			<div id="nav-menu">
			<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">App-Titel</span>
			</div>
			</div>
			<div class="inhalt">
			<!-- westliche Seitenleiste -->
			@@ -22,28 +31,7 @@
			<!-- zentraler Inhaltsbereich -->
			<div class="zentrum">
			<p>
			Dies ist ein Beispiel für eine Webseite, die ein
			<code>flexbox</code>-Layout für die Anordnung ihrer Inhalte
			nutzt.
			</p>
			<p>
			Der Inhaltsbereich in der Mitte passt sich zur Laufzeit dynamisch
			an die Größe des Browserfensters an. Er wird von einer
			Kopfzeile, einer Fußzeile und zwei Seitenleisten umschlossen.
			</p>
			<p>
			Übersteigt die Textmenge im Zentrum den vorhandenen Raum,
			kann der Inhalt per Rollbalken ohne Verrutschen der
			umschließenden Bedienelemente durchgeblättert werden.
			</p>
			<p>
			Dieses Verhalten kann über die folgende Seite ausprobiert werden: <br/>
			<a href="app-layout-gross.html">Testseite mit umfangreichem Inhalt</a>.
			</p>
			<p>
			Das Beispiel besteht aus den Seiten<br/>
			<code>app-layout.html</code> (diese Seite)<br/>
			<code><a href="app-layout.css">app-layout.css</a></code> (CSS-Gestaltungsvorlage)
			Inhalt hier...
			</p>
			</div>
			<!-- oestliche Seitenleiste -->