[library-web/responsive] Make the main navigation a slideout menu for mobile.

[Jakub Steiner <jimmac src gnome org>]

commit eadf36a41887c0c70245c4981b4cf6cd09c99c3b
Author: Jakub Steiner <jimmac gmail com>
Date:   Fri Feb 1 17:39:14 2013 +0100

    Make the main navigation a slideout menu for mobile.

 data/images/toggle-menu.png |  Bin 0 -> 131 bytes
 data/skin/lgo2013.css       |   25 +++++++++++++++++++++++--
 data/xslt/heading.xsl       |   17 ++++++++++++++++-
 3 files changed, 39 insertions(+), 3 deletions(-)
---
diff --git a/data/images/toggle-menu.png b/data/images/toggle-menu.png
new file mode 100644
index 0000000..f3ce28a
Binary files /dev/null and b/data/images/toggle-menu.png differ
diff --git a/data/skin/lgo2013.css b/data/skin/lgo2013.css
index 8f64e9b..30a7242 100644
--- a/data/skin/lgo2013.css
+++ b/data/skin/lgo2013.css
@@ -66,6 +66,7 @@ h1.subindex {
     margin-top: 60px;
     margin-left: 1.515151515152%;
     margin-right: 1.515151515152%;
+    display: block;
 }
 
 .splash {
@@ -74,6 +75,10 @@ h1.subindex {
   height: auto;
 }
 
+#menutoggle {
+  display: none;
+}
+
 @media screen and (max-width: 900px) {
     .right {
       float: none;
@@ -93,7 +98,22 @@ h1.subindex {
 }
 
 @media screen and (max-width: 640px) {
-	#footer div.links > div > ul > li {
+  #logo {
+    margin-bottom: 0;
+    position: relative;
+  }
+
+  #menutoggle {
+    position: absolute;
+    bottom: 8px; right: 8px;
+    display: block;
+    margin: 0;
+    width: 32px; height: 32px;
+    cursor: pointer;
+    color: transparent;
+    background: url('../images/toggle-menu.png') no-repeat center center;
+  }	
+  #footer div.links > div > ul > li {
 		width: 100%;
 		margin: 0 1.515151515152% 1em;
 	}
@@ -101,8 +121,9 @@ h1.subindex {
     float: none;
   }
   #top_bar {
+    display: none;
     overflow: hidden; /* recalculate */
-    margin-top: 10px;
+    margin-top: 0;
   }
     #top_bar .menu-globalnav-container,
     #top_bar ul li,
diff --git a/data/xslt/heading.xsl b/data/xslt/heading.xsl
index f516c1f..c532f49 100644
--- a/data/xslt/heading.xsl
+++ b/data/xslt/heading.xsl
@@ -43,6 +43,22 @@
                   <xsl:otherwise>/skin/gnome-logo.png</xsl:otherwise>
                 </xsl:choose>
               </xsl:attribute></img></a></h1>
+            <a id="menutoggle">#</a>
+            <script type="text/javascript">
+              $(document).ready(function() {
+                $("#menutoggle").click(function() {
+                  //console.log('clicked');
+                  $("#top_bar").slideToggle(200);
+                });
+                $(window).resize(function() {
+                  if($(document).width()>640) {
+                    $('#top_bar').show();
+                  } else {
+                    $('#top_bar').hide();
+                  }
+                });
+              });
+            </script>
         </div>
         <div id="top_bar" class="grid-4">
             <div class="left">
@@ -90,7 +106,6 @@ $('#s').autocomplete('/symbols/lookup/',
             </div>
         </div>
     </div>
-    <div class="clearfix"></div>
 </xsl:template>
 
 <xsl:template name="libgo.head">