New mobile navigation menu

Author: ZhangYiJiang

site/javascript/garden.js

@@ -196,8 +196,7 @@ Page.prototype = {
         this.resizeTimeout = setTimeout(function() {
             that.sections.map();
             that.sections.expand(that.section);
-
-        }, 50);
+        }, 100);
     }
 };
 
@@ -206,8 +205,7 @@ prettyPrint();
 
 // GA tracking code
 var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-20768522-1']);
-_gaq.push(['_trackPageview']);
+_gaq.push(['_setAccount', 'UA-20768522-1'], ['_trackPageview']);
 (function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

site/style/garden.css

@@ -97,18 +97,21 @@ nav > div li.active a {
     color: #FFC76D;
 }
 
-nav > div ul {
-    height: 40px;
+#hide_menu {
+	display: none;
 }
 
-#top {
-	position: absolute;
-	top: 0;
-	right: 0;
+#top, #hide_menu {
+	float: right;
 }
 
-#hide_menu {
-	display: none;
+#nav_main > div {
+	overflow: hidden;
+}
+
+#nav_main > div ul {
+	float: left;
+    height: 40px;
 }
 
 nav li {
@@ -278,11 +281,12 @@ nav li h1 a:after {
 	display: none;
 }
 
-nav li.nav_intro h1 a:after					{ content: 'i'; font-style: italic; }
-#object:after, nav li.nav_object h1 a:after	{ content: '{ }'; }
-#array:after, nav li.nav_array h1 a:after	{ content: '[ ]'; }
-#types:after, nav li.nav_types h1 a:after	{ content: '='; font-weight: bold; }
-#core:after, nav li.nav_core h1 a:after		{ content: 'js'; }
+nav li.nav_intro h1 a:after						{ content: 'i'; font-style: italic; }
+#object:after, nav li.nav_object h1 a:after		{ content: '{ }'; }
+#array:after, nav li.nav_array h1 a:after		{ content: '[ ]'; }
+#types:after, nav li.nav_types h1 a:after		{ content: '='; font-weight: bold; }
+#core:after, nav li.nav_core h1 a:after			{ content: 'js'; }
+#appendix:after, nav li.nav_appendix h1 a:after	{ content: '*'; }
 
 #function:after, nav li.nav_function h1 a:after {
 	content: 'f(x)';
@@ -421,6 +425,7 @@ a abbr {
 	}
 
 	section, footer {
+		font-size: inherit;
 		margin-left: 30px;
 		margin-right: 0;
 	}
@@ -451,24 +456,27 @@ a abbr {
 
 	#nav_main li h1 a {
 		background-image: none;
-		height: 70px;
-		padding: 20px 0 30px;
+		height: 5em;
+		padding: 1.5em 0 2em;
 	}
 
 	#nav_main li h1 a:after {
 		display: block;
 		font-family: Georgia;
-		font-size: 40px;
+		font-size: 3em;
 		font-weight: normal;
 		margin-top: 10px;
 	}
 
-	#nav_main > div ul {
-		height: auto;
+	#nav_main > div {
 		overflow: hidden;
 		border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 	}
 
+	#nav_main > div ul {
+		height: auto;
+	}
+	
 	nav a:hover,
 	nav li.active,
 	nav li.active a {
@@ -477,9 +485,6 @@ a abbr {
 
 	#hide_menu {
 		display: block;
-		position: absolute;
-		top: 0;
-		right: 45px;
 	}
 
 	#nav_mobile {
@@ -500,14 +505,14 @@ a abbr {
 	}
 
 	#nav_next_section, #nav_prev_section {
-		font-size: 10px;
+		font-size: 0.55em;
 		text-transform: uppercase;
 	}
 
 	#nav_next_section .nav_section_name,
 	#nav_prev_section .nav_section_name {
 		display: block;
-		font-size: 14px;
+		font-size: 1.5em;
 		margin-top: 3px;
 		font-weight: bold;
 		line-height: 1.3em;
@@ -556,15 +561,11 @@ screen and (-webkit-min-device-pixel-ratio: 2) {
 	aside {
 		position: static;
 		width: auto;
-		margin: 30px;
-		padding: 0.6em 1em 0.625em;
+		margin: 1em;
+		padding: 0.6em 0.8em 0.625em;
 		border-top: 1px solid #9eabb7;
 		opacity: 0.85;
 	}
-
-	aside p {
-		font-size: 13px;
-	}
 
 	#nav_main > ul > li {
 		width: 25%;
@@ -574,8 +575,7 @@ screen and (-webkit-min-device-pixel-ratio: 2) {
 		width: 160px;
 	}
 
-	#nav_next_section .nav_section_name,
-	#nav_prev_section .nav_section_name {
-		font-size: 13px;
+	aside.es5:after {
+		display: none;
 	}
 }