starting to implement a docking nav?

index.html

@@ -48,25 +48,63 @@
         <div class="four columns offset-by-two value-prop">
           <img class="value-img" src="images/feather.svg">
           Light as a feather at less than a kb &amp; built with mobile in mind.
-          <!-- Attr: http://thenounproject.com/term/feather/22073/ -->
         </div>
         <div class="four columns value-prop">
           <img class="value-img" src="images/pens.svg">
-          <!-- Attr: bottom pen - http://thenounproject.com/term/pen/32847/ -->
-          <!-- Attr: top pen - http://thenounproject.com/term/pen/21163/ -->
           Styles designed to be a starting point, not a UI framework.
         </div>
         <div class="four columns value-prop">
           <img class="value-img" src="images/watch.svg">
-          <!-- Attr: http://thenounproject.com/term/watch/48012/ -->
           Quick to start with zero compiling or installing necessary.
         </div>
       </div>
     </section>
 
-    <div class="social-bar">
+    <div class="navbar-spacer"></div>
-
+    <nav class="navbar">
+      <div class="container">
+        <ul class="navbar-list">
+          <li class="navbar-item"><a class="navbar-link" href="#">Intro</a></li>
+          <li class="navbar-item">
+            <a class="navbar-link" href="#" data-popover-id="codeNavPopover">Code</a>
+            <div id="codeNavPopover" class="popover">
+              <ul class="popover-list">
+                <li class="popover-item">
+                  <a class="popover-link" href="#">Grid</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="#">Typography</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="#">Buttons</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="#">Forms</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="#">Lists</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="#">Code</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="#">Tables</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="#">Queries</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="#">Utilities</a>
+                </li>
+              </ul>
             </div>
+          </li>
+          <li class="navbar-item"><a class="navbar-link" href="#">Examples</a></li>
+          <li class="navbar-item"><a class="navbar-link" href="#">License</a></li>
+          <li class="navbar-item"><a class="navbar-link" href="#">Colophon</a></li>
+        </ul>
+      </div>
+    </nav>
 
     <!-- Why use Skeleton -->
     <div class="docs-section">
@@ -592,15 +630,6 @@
       <p>Skeleton was built using <a href="http://www.sublimetext.com/3">Sublime Text 3</a> and designed with <a href="http://bohemiancoding.com/sketch/">Sketch</a>. The typeface <a href="http://www.google.com/fonts/specimen/Raleway">Raleway</a> was created by <a href="http://matt.cc/">Matt McInerney</a> and <a href="http://www.impallari.com/">Pablo Impallari</a>. Code highlighting by Google's Prettify library. Icons in the header are all derivative work of icon from <a href="thenounproject.com">The Noun Project</a>.<a href="http://thenounproject.com/term/feather/22073/"> Feather</a> by Zach VanDeHey, <a href="http://thenounproject.com/term/pen/21163/">Pen</a> (with cap) by Ed Harrison, <a href="http://thenounproject.com/term/pen/32847/">Pen</a> (with clicker) by Matthew Hall, and <a href="http://thenounproject.com/term/watch/48015/">Watch</a> by Julien Deveaux.</p>
     </div>
 
-    <div class="code-toggler">
-      <span class="code-toggle"></span>
-      <span class="code-label">
-        Code
-        <span class="code-label-show">hidden</span>
-        <span class="code-label-hide">visible</span>
-      </span>
-    </div>
-
   </div>
 
 <!-- End Document

scripts/site.js

@@ -1,10 +1,11 @@
 $(document).ready(function() {
 
   // Variables
-  var codeIsActive = true,
+  var $codeSnippets = $('.code-example-body'),
-      $codeSnippets = $('.code-example-body'),
+      $nav = $('.navbar'),
-      $sections = $('.docs-section'),
+      $body = $('body'),
       $window = $(window),
+      navOffsetTop = $nav.offset().top,
       entityMap = {
         "&": "&",
         "<": "&lt;",
@@ -15,10 +16,24 @@ $(document).ready(function() {
       }
 
   function init() {
-    $('.code-toggler').on('click', toggleCode)
+    $window.on('scroll', onScroll)
+    $window.on('resize', resize)
     buildSnippets();
   }
 
+  function resize() {
+    navOffsetTop = $nav.offset().top
+  }
+
+  function onScroll() {
+    if(navOffsetTop < $window.scrollTop() && !$body.hasClass('has-docked-nav')) {
+      $body.addClass('has-docked-nav')
+    }
+    if(navOffsetTop > $window.scrollTop() && $body.hasClass('has-docked-nav')) {
+      $body.removeClass('has-docked-nav')
+    }
+  }
+
   function escapeHtml(string) {
     return String(string).replace(/[&<>"'\/]/g, function (s) {
       return entityMap[s];
@@ -32,26 +47,6 @@ $(document).ready(function() {
     })
   }
 
-  function toggleCode() {
-    var windowScrollTop = $window.scrollTop()
-    var offsetHeight = windowScrollTop
-    $sections.each(function (i) { 
-      if($(this).children('.code-example').length > 0) {
-        var codeExampleHeight = $(this).children('.code-example').outerHeight(true),
-            sectionBottomPadding = parseInt($('.docs-section').css('padding-bottom'))
-        if(windowScrollTop > $(this).offset().top + $(this).outerHeight() - sectionBottomPadding) {
-          if(codeIsActive == false) {
-            offsetHeight += codeExampleHeight
-          } else {
-            offsetHeight -= codeExampleHeight
-          }
-        }
-      }
-    })
-    $('body').toggleClass('code-snippets-visible')
-    codeIsActive = !codeIsActive
-    $window.scrollTop(offsetHeight)
-  }
 
   init();
 

stylesheets/custom.css

@@ -52,54 +52,11 @@
 .code-example {
   margin-top: 1.5rem;
   margin-bottom: 0;
-  display: none;
 }
 .code-example-body {
   white-space: pre;
-  /*overflow: auto;*/
   word-wrap: break-word
 }
-.code-snippets-visible .code-example {
-  display: block;
-}
-.code-toggler {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  width: 34px;
-  height: 20px;
-  background: #E5E5E5;
-  border: 1px solid #C6C6C6;
-  border-radius: 100px;
-  cursor: pointer; }
-.code-toggle {
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  top: 1px;
-  left: 1px;
-  background-color: #fff;
-  border: 1px solid #C6C6C6;
-  border-radius: 100px;
-  -webkit-transition: all .15s ease-out; }
-.code-snippets-visible .code-toggler {
-  background: #67D55B;
-  border-color: #4CB340; }
-.code-snippets-visible .code-toggle {
-  border-color: #4CB340;
-  left: 14px; }
-.code-label {
-  width: 100px;
-  position: absolute;
-  left: 42px;
-  font-size: 11px;
-  color: #888; }
-.code-toggler .code-label-hide {
-  display: none; }
-.code-snippets-visible .code-label-hide {
-  display: inline; }
-.code-snippets-visible .code-label-show {
-  display: none; }
 
 @media (min-width: 550px) {
   .header {
@@ -119,3 +76,95 @@
     margin-top: 12px;
   }
 }
+
+
+
+
+
+
+
+.navbar + .docs-section {
+  border-top-width: 0;
+}
+.navbar,
+.navbar-spacer {
+  width: 100%;
+  height: 6.5rem;
+  background: #fff;
+  z-index: 99;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+}
+.navbar-spacer {
+  display: none;
+}
+.navbar > .container {
+  width: 100%;
+}
+.navbar-list {
+  list-style: none;
+  margin-bottom: 0;
+}
+.navbar-item {
+  position: relative;
+  float: left;
+  margin-bottom: 0;
+}
+.navbar-link {
+  text-transform: uppercase;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: .1rem;
+  margin-right: 50px;
+  text-decoration: none;
+  line-height: 6.3rem;
+  color: #222;
+}
+.navbar-link.active {
+  color: #33C3F0;
+}
+.has-docked-nav .navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.has-docked-nav .navbar-spacer {
+  display: block;
+}
+
+
+.popover {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #fff;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  top: 92%;
+  left: -50%;
+}
+.popover-list {
+  padding: 10px 0;
+  margin: 0;
+  list-style: none;
+}
+.popover-item {
+  padding: 0;
+  margin: 0;
+}
+.popover-link {
+  color: #999;
+  display: block;
+  padding: 5px 20px;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-size: 1.0rem;
+  font-weight: 600;
+  text-align: center;
+  letter-spacing: .1rem;
+}
+.popover-link:hover {
+  color: #fff;
+  background: #33C3F0;
+}