Collapse 'projects' and 'contributing' into sub-menu under new 'community' section

WasabiFan · WasabiFan · commit d3cf03a4ae18 · 2014-12-30T18:32:56.000-10:00
diff --git a/_includes/header.html b/_includes/header.html
@@ -10,11 +10,21 @@
         <li class="left button">
             <a href="{{ site.github.url }}/docs" title="Documentation on how to use ev3dev">Docs</a>
         </li>
-        <li class="left button">
-            <a href="{{ site.github.url }}/projects" title="List of projects that use ev3dev">Projects Gallery</a>
-        </li>
-        <li class="left button">
-            <a href="{{ site.github.url }}/contributing" title="How to contribute to ev3dev">Contributing</a>
+        <li class="left button dropdown-button">
+            <a>
+                Community
+                <div class="nav-dropdown-arrow">
+                    
+                </div>
+            </a>
+            <ul class="button-dropdown">
+                <li>
+                    <a href="{{ site.github.url }}/projects" title="List of projects that use ev3dev">Projects Gallery</a>
+                </li>
+                <li>
+                    <a href="{{ site.github.url }}/contributing" title="How to contribute to ev3dev">Contributing</a>
+                </li>
+            </ul>
         </li>
         <!-- items below float right, so appear in reverse order -->
         <li class="right header-box" id="search-li">
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
@@ -969,6 +969,66 @@ dt {
   box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2), 0px 1px 0px rgba(0, 0, 0, 0);
 }
 
+    .button .button-dropdown {
+        top: -20px;
+        opacity: 0;
+
+        transition: all 100ms ease-in-out;
+        transition-property: opacity, top, visibility;
+        transition-delay: 1ms;
+
+        padding: 5px 35px 5px 10px;
+        width: 100px;
+        position: relative;
+        color: #efefef;
+        background: #191919;
+        -moz-border-radius: 2px;
+        -webkit-border-radius: 2px;
+        -o-border-radius: 2px;
+        -ms-border-radius: 2px;
+        -khtml-border-radius: 2px;
+        border-radius: 2px;
+        border: 1px solid #121212;
+        -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
+        -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
+        -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
+        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
+    }
+
+    .button.dropdown-button > a {
+        width: 120px;
+        visibility: visible !important;
+    }
+
+        .button .button-dropdown a {  
+            width: 100%;
+        }
+
+    .button.dropdown-button {
+        visibility: hidden;
+        cursor: pointer;
+    }
+
+    .button.dropdown-button:hover {        
+        visibility: visible;
+    }
+
+    .button:hover .button-dropdown {
+        opacity: 1;
+        top: 0;
+    }
+
+.nav-dropdown-arrow {
+    float: right;
+    width: 0;
+    height: 0;
+    border: 4px solid transparent;
+    border-top-color: white;
+    margin-top: 7px;
+    margin-bottom: -4px;
+    margin-left: 4px;
+}
+
 .nav-menu {
   list-style: none;
   display: none;
@@ -1209,14 +1269,20 @@ section #title p {
 
 }
 
-@media print, screen and (max-width: 760px) {
+@media print, screen and (max-width: 650px) {
     
     #search-li {
         display: none;
     }
 
 }
 
+@media print, screen and (min-width: 591px) {
+    #header {
+        height: 60px !important;
+    }
+}
+
 @media print, screen and (max-width: 590px) {
     #header {
         margin: -20px auto 0 auto;
@@ -1264,6 +1330,36 @@ section #title p {
     #header.mobile-hidden nav .button {
         display: none;
     }
+
+    .button.dropdown-button {
+        visibility: visible;
+    }
+
+    .button.dropdown-button > a {
+        display: none;
+    }
+
+    .button .button-dropdown {
+        transition: none;
+
+        opacity: 1;
+
+        background-color: transparent;
+        padding: 0;
+        width: 100%;
+        position: static;
+        -moz-border-radius: 0;
+        -webkit-border-radius: 0;
+        -o-border-radius: 0;
+        -ms-border-radius: 0;
+        -khtml-border-radius: 0;
+        border-radius: 0;
+        border: none;
+        -moz-box-shadow: none;
+        -webkit-box-shadow: none;
+        -o-box-shadow: none;
+        box-shadow: none;
+    }
 }
 
 :target {
