main menu as part of expandable topbar area

_src/_includes/header.html

@@ -10,7 +10,7 @@
 
         <nav role="navigation" class="nav-main">
             <a class="menu-btn icon-list" href="#"></a>
-            <div class="nav-popover hide">
+            <div class="nav-popover">
                 <a class="nav-link goodies icon-gift" href="/goodies/">goodies</a>
                 <a class="nav-link photos icon-pictures" href="/photos/">photos</a>
                 <a class="nav-link personal icon-user" href="/personal/">personal</a>

_src/assets/js/app.js

@@ -38,8 +38,8 @@ var siteNavigation = {
             $searchresults.removeClass('hide');
             
             // hide menu too just in case
-            if ( $navpop.is(':visible') ) {
-                $navpop.addClass('hide');
+            if ( $('body').hasClass('menu-open') ) {
+                $('body').removeClass('menu-open');
             }
             
             // bind the hide controls
@@ -80,13 +80,13 @@ var siteNavigation = {
             e.preventDefault();
             
             // toggle menu
-            $thepop.toggleClass('show').toggleClass('hide');
+            $('body').toggleClass('menu-open');
             
             // bind the hide controls
-            $(document).bind("click.hidethepop", function() {
-                    $thepop.removeClass('show').addClass('hide');
+            $(document).bind('click.hidethepop', function() {
+                    $('body').removeClass('menu-open');
                     // unbind the hide controls
-                    $(document).unbind("click.hidethepop");
+                    $(document).unbind('click.hidethepop');
             });
             
             // dont close thepop when you click on thepop

_src/assets/less/navigation.less

@@ -2,16 +2,6 @@
 // NAVIGATION
 /////////////////////////////////////
 
-
-.nav-popover {
-    position: absolute;
-    top: 100%;
-    z-index: 5; // so it's always above page content
-    .border-bottom-radius;
-    background: #f1f4f7;
-    box-shadow: 0 2px 7px rgba(0,0,0,.05);
-}
-
 .menu-btn,
 .search-btn {
     line-height: 1em;
@@ -20,17 +10,17 @@
     display: inline-block;
     margin: 0;
     
+    position: absolute;
+    right: 0;
+    top: 0;
+    
     // icons
     &:before { .transition; }
     &:hover:before {
         color: @link-color
     }
 }
-
-.nav-main,
-.site-search {
-    float: right;
-}
+.search-btn { right: 50px }
 
 //
 // Main Navigation
@@ -46,15 +36,15 @@
     li { display: inline-block; }
     
     .nav-popover {
-        top: 130%;
-        right: 0;
+        background: @body-bg;
+        padding: @line-height-computed*1.5 0;
         width: 100%;
         .clearfix;
         
         .nav-link {
             width: 50%;
             @media @breakpoint2 {
-                width: 33%
+                width: 33.3%
             }
             float: left;
             text-align: center;

_src/assets/less/scaffolding.less

@@ -13,7 +13,6 @@ body {
 //
 .topbar {
     .clearfix;
-    background: fade(@brand-dark, 3%);
     border-bottom: 1px solid rgba(255,255,255,.7);
     box-shadow: inset 0 1px 4px fade(@brand-dark, 20%), inset 0 -1px 4px fade(@brand-dark, 20%);
     
@@ -190,15 +189,22 @@ a.close,
 //
 
 @media @breakpoint2 {
+    body {
+        position: relative
+    } 
     section[role=document] {
-    	background-color: @body-bg;
+    	background-color: @page-bg;
         margin-top: 71px;
+        .transition;
+        .menu-open & {
+            margin-top: 300px;
+        }
         margin-bottom: 380px;
         position: relative;
         z-index: 2;
         border-top: 1px solid rgba(255,255,255,.7);
         border-bottom: 1px solid rgba(255,255,255,.7);
-        box-shadow: 0 1px 4px fade(@brand-dark, 20%), 0 -1px 4px fade(@brand-dark, 20%);
+        box-shadow: 0 1px 4px fade(@brand-dark, 10%), 0 -1px 4px fade(@brand-dark, 10%);
     }
     .topbar,
     .footer {
@@ -207,9 +213,9 @@ a.close,
         border: none;
     }
     .topbar {
-        height: 71px;
+        min-height: 71px;
         top: 0;
-        box-shadow: inset 0 1px 4px fade(@brand-dark, 20%);
+        box-shadow: inset 0 1px 4px fade(@brand-dark, 10%);
         border: none;
     }
     
@@ -217,5 +223,7 @@ a.close,
         height: 380px;
         bottom: 0;
         box-shadow: none;
+        
+        .menu-open & { .hide; }
     }
 }

_src/assets/less/variables.less

@@ -41,7 +41,8 @@
 // Scaffolding
 /////////////////////////////////////
 
-@body-bg:        			@brand-light;
+@body-bg:        			#dfe8ef;
+@page-bg:                   @brand-light;
 @border-radius-base:		3px;