Add collapsible navbar

_config.yml

@@ -1,4 +1,4 @@
-baseurl: /tufte-jekyll 
+baseurl: /tufte-jekyll
 title: Tufte
 subtitle: Content-centric blogging
 author: clay harmon

_includes/footer.html

@@ -12,4 +12,6 @@
 <span>&copy; {{ site.time | date: '%Y' }} &nbsp;&nbsp;{{site.author | upcase }}</span></br> <br>
 <span>This site created with the <a href="//github.com/clayh53/tufte-jekyll">Tufte theme for {{site.subtitle}} </a> in <a href="//jekyllrb.com">Jekyll</a>.</span> 
 </div>  
-</footer>
+</footer>
+<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
+<script src="/css/navscript.css"></script>

_includes/head.html

@@ -17,7 +17,7 @@
   {% endif %}
 
   <link rel="stylesheet" href="{{ "/css/tufte.css" | prepend: site.baseurl }}"> 
-
+  <link rel="stylesheet" href="{{ "/css/navbar.css" | prepend: site.baseurl }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
 
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />

_includes/header.html

@@ -1,15 +1,13 @@
 <!--- Header and nav template site-wide -->
 <header>
-    <nav class="group">
-	<a href="{{site.baseurl}}/"><img class="badge" src="{{site.baseurl}}/assets/img/badge_1.png" alt="CH"></a>
-	{% for node in site.pages %}
-		{% unless node.nav_exclude %}
-		    {% if page.url == node.url %}
-		      <a class="active" href="{{node.url | prepend: site.baseurl}}" class="active">{{node.title}}</a>
-		    {% else %}
-		      <a href="{{node.url | prepend: site.baseurl}}">{{node.title}}</a>
-		    {% endif %}
-	    {% endunless %}
-  	{% endfor %}
-	</nav>
-</header>
+  <nav id="menu">
+    <ul id="menu">
+      <li><a href="{{site.baseurl}}/"><img class="badge" src="{{site.baseurl}}/assets/img/badge_1.png" alt="CH"></a></li>
+      {% for node in site.pages %}{% unless node.nav_exclude %}{% if page.url == node.url %}
+            <li><a class="active"  id="menu" href="{{node.url | prepend: site.baseurl}}">{{node.title}}</a> </li>
+	    {% else %}
+	          <li><a id="menu" href="{{node.url | prepend: site.baseurl}}">{{node.title}}</a></li>
+      {% endif %}{% endunless %}{% endfor %}
+    </ul>
+  </nav>
+  </header>

css/navbar.css

@@ -0,0 +1,198 @@
+/*--------------------------------------------------
+Nav
+--------------------------------------------------*/
+
+header {
+padding: 0px 5px;   // CE  15 5
+position: relative;
+z-index: 1;
+}
+
+body.full-width > header {
+}
+
+
+
+#menu {
+white-space:nowrap;
+position: relative;
+z-index: 1;
+width: auto;
+}
+
+#menu ul {
+list-style: none;
+list-style-type: none;
+margin: 0;
+padding: 0;
+white-space: nowrap;
+display: inline-block;
+}
+
+#menu ul li {
+display: inline-block;
+position: relative;
+}
+
+#menu ul li a {
+text-decoration: none;
+padding: 0.7em;
+}
+
+/*--------------------------------------------------
+On Hidden Menu
+--------------------------------------------------*/
+
+
+#menu ul li.on-hidden { display: none; margin-top: 0px;}
+
+#on-hidden-menu {
+display: block;
+position: absolute;
+z-index: 10;
+right: 0px;
+margin-top: 0px;
+margin-right: 0px;
+min-width: 280px;
+}
+
+#on-hidden-menu ul {
+margin: 0;
+padding: 0;
+list-style: none;
+position: relative;
+overflow: hidden;
+height: 0;
+}
+
+/* Menu */
+#on-hidden-menu li {
+    margin-top: 0px;
+    background: #a00000;
+    border-bottom: 1px solid #273640;
+    opacity: 0;
+    padding: 0px;
+    -moz-transition: all .4s ease-in-out .2s;
+    -o-transition: all .4s ease-in-out .2s;
+    -webkit-transition: all .4s ease-in-out .2s;
+    transition: all .4s ease-in-out .2s;
+    position: relative;
+}
+
+#on-hidden-menu li a {
+color: rgba(255,255,255,.9);
+text-decoration: none;
+padding: 10px 15px; /* Menu item box size */
+display: block;
+
+}
+
+#on-hidden-menu li a:hover { background: #800000; }
+
+/* on hidden menu open */
+
+
+#on-hidden-menu.open ul {
+display: block;
+height: 100%;
+}
+
+#on-hidden-menu.open ul li {
+    opacity: 1;
+}
+
+#on-hidden-menu.open ul li:first-child {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+}
+
+
+#on-hidden-menu.open ul li:last-child {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+/* toggle */
+
+/* This is the menu box with the dots */ 
+#on-hidden-menu .toggle {
+width: 32px;
+position: absolute;
+top: -57px;
+right: 13px;
+height: 32px;
+background-color: #a00000;
+z-index: 1;
+cursor: pointer;
+border-radius: 2px;
+}
+
+#on-hidden-menu .toggle:before, #on-hidden-menu .toggle:after,
+#on-hidden-menu .toggle span:before {
+content: '';
+width: 4px;
+height: 4px;
+background: #fff;
+border-radius: 5px;
+position: absolute;
+top: 17px;
+left: 5px;
+-moz-transition: all .4s ease-in-out;
+-o-transition: all .4s ease-in-out;
+-webkit-transition: all .4s ease-in-out;
+transition: all .4s ease-in-out;
+}
+
+#on-hidden-menu .toggle:after {
+left: 13px;
+-moz-transition-delay: .1s;
+-o-transition-delay: .1s;
+-webkit-transition-delay: .1s;
+transition-delay: .1s;
+}
+
+#on-hidden-menu .toggle span:before {
+left: 21px;
+-moz-transition-delay: .2s;
+-o-transition-delay: .2s;
+-webkit-transition-delay: .2s;
+transition-delay: .2s;
+}
+
+/* close */
+
+
+#on-hidden-menu.open .toggle:before, #on-hidden-menu.open .toggle:after {
+width: 20px;
+-moz-transform: rotate(225deg);
+-ms-transform: rotate(225deg);
+-o-transform: rotate(225deg);
+-webkit-transform: rotate(225deg);
+transform: rotate(225deg);
+top: 14px;
+height: 3px;
+}
+
+#on-hidden-menu.open .toggle:after {
+-moz-transform: rotate(-225deg);
+-ms-transform: rotate(-225deg);
+-o-transform: rotate(-225deg);
+-webkit-transform: rotate(-225deg);
+transform: rotate(-225deg);
+left: 5px;
+-moz-transition-delay: .0s;
+-o-transition-delay: .0s;
+-webkit-transition-delay: .0s;
+transition-delay: .0s;
+}
+
+#on-hidden-menu.open .toggle span:before {
+top: 14px;
+left: 13px;
+width: 2px;
+height: 2px;
+-moz-transition-delay: .0s;
+-o-transition-delay: .0s;
+-webkit-transition-delay: .0s;
+transition-delay: .0s;
+}

css/navscript.css

@@ -0,0 +1,57 @@
+/*--------------------------------------------------
+Hidden Nav
+--------------------------------------------------*/
+hiddenNavBar = {
+    $menu: $('#menu'),
+    init: function () {
+	this.resize();
+	$('<div id="on-hidden-menu"><div class="toggle"><span></span></div><ul class="collapse-ul"></ul></div>').hide().insertAfter(this.$menu);
+	// toggle
+	$('#on-hidden-menu .toggle').click(function () {
+						  $('#on-hidden-menu').toggleClass('open');
+					      });
+
+	// win load & resize
+	$(window).on('load resize', function () {
+			 hiddenNavBar.resize();
+		     });
+    },
+    resize: function () {
+	setTimeout(function () {
+			  var menuWidth = $('ul', this.$menu).width() + 120;
+			  var winW = $(window).width();
+
+			  console.log(menuWidth, winW);
+
+			  if (menuWidth > winW) {
+			      console.log('init');
+
+			      $('#on-hidden-menu').show();
+/*			      $clone = $('li:not(".on-hidden"):last', this.$menu).addClass('on-hidden').clone(); */
+			      $clone = $('#menu li:not(".on-hidden"):last', this.$menu).addClass('on-hidden sans').clone();
+			      if ($clone.parent().size() == 0) {
+				  $clone.prependTo($('#on-hidden-menu ul'));
+			      }
+
+			      hiddenNavBar.resize();
+			      /** this.menu */
+			  } else if (menuWidth + $('li.on-hidden:first').width() < winW) {
+			      $('li.on-hidden:first').removeClass('on-hidden sans');
+			      $('#on-hidden-menu ul li:first').remove();
+			  }
+
+			  if ($('.on-hidden').size() == 0) {
+			      $('#on-hidden-menu').removeClass('open').hide();
+			  }
+		      }, 10);
+    }
+};
+
+
+
+/*--------------------------------------------------
+DOC READY
+--------------------------------------------------*/
+$(function () {
+	 hiddenNavBar.init();
+     })