Difference between revisions of "Template:Freiburg/MenubarTest"

Revision as of 10:12, 16 September 2015

""

Menu

@@ Line 441: / Line 441: @@
 } /* end media query*/
-@media screen and (max-width: 849px){
+/* Styles for smallnav */
-#header{
+/* Clearfix */
-  top: -9000px;
+.clearfix:before,
-  opacity: 0;
+.clearfix:after {
+    content: " ";
+    display: table;
+}
+.clearfix:after {
+    clear: both;
+}
+.clearfix {
+    *zoom: 1;
 }
-} /* end of media query dont delete */
+/* Basic Styles */
+body {
+    background-color: #ece8e5;
+}
 #smallnav {
      height: 40px;
@@ Line 455: / Line 465: @@
      background: #455868;
      font-size: 11pt;
+    font-family: 'PT Sans', Arial, sans-serif;
      font-weight: bold;
      position: relative;
      border-bottom: 2px solid #283744;
 }
 #smallnav ul {
      padding: 0;
@@ Line 466: / Line 476: @@
      height: 40px;
 }
-/* display list elements on the left */
 #smallnav li {
      display: inline;
      float: left;
 }
-/* 6 elements in 600 px make 100px per element */
 #smallnav a {
      color: #fff;
@@ Line 483: / Line 489: @@
      text-shadow: 1px 1px 0px #283744;
 }
 #smallnav li a {
      border-right: 1px solid #576979;
@@ Line 492: / Line 497: @@
 #smallnav li:last-child a {
      border-right: 0;
+}
 #smallnav a:hover, #smallnav a:active {
      background-color: #8c99a4;
 }
+#smallnav a#pull {
-#smallnav #pull {
      display: none;
-}
-/* clears float around elemnts with this class */
-/* class clearfix should be used on all elements containing floats */
-.clearfix:before,
-.clearfix:after {
-    content: " ";
-    display: table;
 }
-.clearfix:after {
-    clear: both;
-}
-.clearfix {
-    *zoom: 1;
-}
-@media only screen and (max-width: 600px) {
-     nav {
+/*Styles for screen 600px and lower*/
+@media screen and (max-width: 600px) {
+     #smallnav {
          height: auto;
      }
-     nav ul {
+     #smallnav ul {
          width: 100%;
          display: block;
          height: auto;
      }
-     nav li {
+     #smallnav li {
          width: 50%;
          float: left;
          position: relative;
      }
-     nav li a {
+     #smallnav li a {
          border-bottom: 1px solid #576979;
          border-right: 1px solid #576979;
      }
-     nav a {
+     #smallnav a {
          text-align: left;
          width: 100%;
          text-indent: 25px;
      }
-} /* end of media query dont delete */
+}
+/*Styles for screen 515px and lower*/
 @media only screen and (max-width : 480px) {
-     nav {
+     #smallnav {
          border-bottom: 0;
      }
-     nav ul {
+     #smallnav ul {
          display: none;
          height: auto;
      }
-     nav a#pull {
+     #smallnav a#pull {
          display: block;
          background-color: #283744;
@@ Line 557: / Line 546: @@
          position: relative;
      }
-     nav a#pull:after {
+     #smallnav a#pull:after {
          content:"";
-         background: url('nav-icon.png') no-repeat;
+         background: url('#smallnav-icon.png') no-repeat;
          width: 30px;
          height: 30px;
@@ Line 567: / Line 556: @@
          top: 10px;
      }
-} /* end of media query dont delete */
+}
+/*Smartphone*/
 @media only screen and (max-width : 320px) {
-     nav li {
+     #smallnav li {
          display: block;
          float: none;
          width: 100%;
      }
-     nav li a {
+     #smallnav li a {
          border-bottom: 1px solid #576979;
      }
 }
 </style>
-<script type="text/javascript">
-// script for smallnav
-$(function() {
-    var pull        = $('#pull');
-        menu        = $('nav ul');
-        menuHeight  = menu.height();
-    $(pull).on('click', function(e) {
-        e.preventDefault();
-        menu.slideToggle();
-    });
-});
-$(window).resize(function(){
-    var w = $(window).width();
-    if(w > 320 && menu.is(':hidden')) {
-        menu.removeAttr('style');
-    }
-});
-</script>