better nav experience on small screens

nquinlan · nquinlan · commit 55f88095faa8 · 2013-08-29T13:35:18.000-07:00
diff --git a/source/javascripts/menu.js b/source/javascripts/menu.js
@@ -44,4 +44,10 @@ $(function() {
 		dataType: "jsonp"
 	});
 
+	$(".sidebar-nav").click(function (e) {
+		if(e.target == this){
+			$(this).toggleClass("shown");
+		}
+	});
+
 });
diff --git a/source/stylesheets/style.css b/source/stylesheets/style.css
@@ -180,6 +180,39 @@ body:before {
 	margin-top:-32767px;/
 }
 
+.sidebar-nav {
+	height: 45px;
+	margin-bottom: 10px;
+	background-color: #f5f5f5;
+	border: 1px solid #eee;
+	border: 1px solid rgba(0,0,0,0.05);
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	border-radius: 4px;
+	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+	box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+}
+.sidebar-nav:before {
+	display: block;
+	padding: 10px;
+	cursor: pointer;
+	content: "Menu";
+	font-size: 15px;
+	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-weight: bold;
+	color: #08c;
+}
+.sidebar-nav:hover, .sidebar-nav.shown {
+	height: auto;
+}
+.sidebar-nav #nav-menu {
+	display: none;
+}
+.sidebar-nav:hover #nav-menu, .sidebar-nav.shown #nav-menu {
+	display: block;
+}
+
 .sidebar-nav > #nav-menu { border-right: 1px solid #ddd; font-size: 18px; line-height:21px; }
 
 .callout > a { color: rgb(240, 132, 2); }
@@ -251,3 +284,24 @@ li.official {
 	width: 100%;
 	height: 100%;
 }
+
+@media (min-width: 767px) {
+	.sidebar-nav {
+		height: auto;
+		background: transparent;
+		margin: 0;
+		border: none;
+		-webkit-border-radius: 0;
+		-moz-border-radius: 0;
+		border-radius: 0;
+		-webkit-box-shadow: none;
+		-moz-box-shadow: none;
+		box-shadow: none;
+	}
+	.sidebar-nav:before {
+		content: "";
+	}
+	.sidebar-nav #nav-menu {
+		display: block;
+	}
+}
