CSS-Trickserei für Menü-Effekt auf Smartphones

[website] / src / main / webapp / less / phone / layout.less

diff --git a/src/main/webapp/less/phone/layout.less b/src/main/webapp/less/phone/layout.less
index 6d6521a..bedb016 100644 (file)
--- a/src/main/webapp/less/phone/layout.less
+++ b/src/main/webapp/less/phone/layout.less
@@ -122,6 +122,7 @@ body
   font-family: 'symbols';
   font-size: 378%; /** Vielfaches von 14px */
   padding: 0 0 1em 0;
+  font-weight: normal;
 }
 #breadcrumb > a.hide:hover,
 #breadcrumb > a.hide:focus,
@@ -133,33 +134,49 @@ body
 
 /** Inhalts-Sprunglink reaktivieren und stylen */
 
-#nav > a.hide
+#nav:target
 {
-  position: relative;
-  float: right;
-  left: auto;
-  top: .5em;
-  display: block;
-  overflow: hidden;
-  width: 2.142857143em; /** 30px */
-  height: 2.5em;
-  line-height: 2.5em;
-  color: @dunkel;
-  border-style: none;
-}
-#nav > a.hide:before
-{
-  content: "";
-  font-family: 'symbols';
-  font-size: 210%; /** Vielfaches von 14px */
-  padding: 0 0 1em 0;
-  margin: 0 1em 0 0;
-}
-#nav > a.hide:hover,
-#nav > a.hide:focus,
-#nav > a.hide:active
-{
-  color: @dunkler;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  padding: .6em 1em 999em 2.5em;
+  margin-bottom: -993em;
+  z-index: 5;
+  background-color: @heller;
+  #menu
+  {
+    padding-top: 0;
+    padding-bottom: .75em;
+  }
+  > a.hide
+  {
+    position: absolute;
+    left: auto;
+    top: .8em;
+    right: 1.5em;
+    display: block;
+    overflow: hidden;
+    width: 3.5em;
+    height: 3em;
+    line-height: 3em;
+    color: @hintergrund;
+    border-style: none;
+  }
+  > a.hide:before
+  {
+    content: "";
+    font-family: 'symbols';
+    font-size: 378%; /** Vielfaches von 14px */
+    padding: 0 0 1em 0;
+    margin: 0 1em 0 0;
+  }
+  > a.hide:hover,
+  > a.hide:focus,
+  > a.hide:active
+  {
+    color: @dunkler;
+  }
 }