From df8c52e525ef7b1da495e84e5a403cf1ef42e99d Mon Sep 17 00:00:00 2001
From: ulrich <undisclosed>
Date: Fri, 30 Mar 2018 07:52:55 +0000
Subject: [PATCH] Neue Fassung
---
/dev/null | 48 ------------
app.js | 9 ++
hamburger.css | 99 ++++++++++++++++++++++++
index.html | 36 +++------
app.css | 18 +++
5 files changed, 135 insertions(+), 75 deletions(-)
diff --git a/app.css b/app.css
index ba13848..7a9c9b4 100644
--- a/app.css
+++ b/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;
+}
diff --git a/app.js b/app.js
index 8d5b594..6bb108a 100644
--- a/app.js
+++ b/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
};
}
diff --git a/hamburger.css b/hamburger.css
new file mode 100644
index 0000000..c311070
--- /dev/null
+++ b/hamburger.css
@@ -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;
+}
diff --git a/index.html b/index.html
index 81367cd..b451f8a 100644
--- a/index.html
+++ b/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 -->
diff --git a/jslib/app-menu/nav-toggle.css b/jslib/app-menu/nav-toggle.css
deleted file mode 100644
index fea0abd..0000000
--- a/jslib/app-menu/nav-toggle.css
+++ /dev/null
@@ -1,48 +0,0 @@
-
-/*
-
-gefunden auf
-http://elijahmanor.com/css-animated-hamburger-icon/
-
-Pfeilsymbole auf
-https://websitebuilders.com/tools/html-codes/arrows/
-
-*/
-
-/*body { background-color: black; height: 100%; }*/
-/*h3 { color: white; }*/
-#nav-toggle { position: absolute; left: 3px; top: 1px; }
-
-#nav-toggle { cursor: pointer; padding: 10px 70px 16px 0px; }
-#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
- cursor: pointer;
- border-radius: 1px;
- height: 3px;
- width: 18px;
- background: black;
- position: absolute;
- display: block;
- content: '';
-}
-#nav-toggle span:before {
- top: -5px;
-}
-#nav-toggle span:after {
- bottom: -5px;
-}
-
-#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
- transition: all 500ms ease-in-out;
-}
-#nav-toggle.active span {
- background-color: transparent;
-}
-#nav-toggle.active span:before, #nav-toggle.active span:after {
- top: 0;
-}
-#nav-toggle.active span:before {
- transform: rotate(45deg);
-}
-#nav-toggle.active span:after {
- transform: rotate(-45deg);
-}
--
Gitblit v1.9.3