New dropdown menu for the documentation

_layouts/default.html

@@ -52,12 +52,14 @@ t: 0; border: 0;" src="https://assets.github.com/img/bec6c51521dcc8148146135149f
       </div>
       
       <div id="menu">
-	<ul>
-	  <li><a href="index.html">Overview</a></li> · 
-	  <li><a href="index.html#download">Download</a></li> · 
-	  <li><a href="documentation.html">Documentation</a></li> ·
-	  <li><a target="_blank" href="https://github.com/NicolasPetton/jtalk">Source</a></li> 
-	</ul>
+	<div class="main">
+	  <ul>
+	    <li><a href="index.html">Overview</a></li> · 
+	    <li><a href="index.html#download">Download</a></li> · 
+	    <li><a id="doc_link" href="documentation.html">Documentation</a></li> ·
+	    <li><a target="_blank" href="https://github.com/NicolasPetton/jtalk">Source</a></li> 
+	  </ul>
+	</div>
       </div>
 
       <div id="content">

_site/css/style.css

@@ -32,15 +32,15 @@ html,body {
     border-bottom: 1px solid #aaa;
     position: absolute;
     width: 100%;
+    height: 36px;
     top: 210px;
     font-family: arial,helvetica,sans;
     z-index: 1;
 }
 
 #menu ul {
-    width: 980px;
-    margin: 0 auto;
     padding: 5px 0;
+    margin: 0;
 }
 
 #menu li {
@@ -51,7 +51,7 @@ html,body {
 #menu a {
 	color: #515a6a;
 	text-decoration: none;
-	padding: 5px 15px;
+	padding: 10px 15px;
 }
 
 #menu a:hover {
@@ -64,6 +64,21 @@ html,body {
 	color: #072d5a;
 	text-decoration: none;
 }
+
+#menu #dropdown {
+    float: left;
+    margin-left: 220px;
+    background: #d0def1;
+    border: 1px solid #aaa;
+    border-top: 0 none;
+    width: auto; 
+    display: none;
+}
+
+#menu #dropdown li {
+    display: block;
+    padding: 5px 0;
+}
 	
 #content .main {
 	width: 980px;
@@ -175,7 +190,7 @@ html,body {
 }
 
 .box .content pre {
-	border: 1px solid #aaa;
+	border: 1px solid #ccc;
 	background-color: #eee;
 	border-radius: 10px;
 	-moz-border-radius: 10px;

_site/documentation.html

@@ -52,12 +52,14 @@ t: 0; border: 0;" src="https://assets.github.com/img/bec6c51521dcc8148146135149f
       </div>
       
       <div id="menu">
-	<ul>
-	  <li><a href="index.html">Overview</a></li> · 
-	  <li><a href="index.html#download">Download</a></li> · 
-	  <li><a href="documentation.html">Documentation</a></li> ·
-	  <li><a target="_blank" href="https://github.com/NicolasPetton/jtalk">Source</a></li> 
-	</ul>
+	<div class="main">
+	  <ul>
+	    <li><a href="index.html">Overview</a></li> · 
+	    <li><a href="index.html#download">Download</a></li> · 
+	    <li><a id="doc_link" href="documentation.html">Documentation</a></li> ·
+	    <li><a target="_blank" href="https://github.com/NicolasPetton/jtalk">Source</a></li> 
+	  </ul>
+	</div>
       </div>
 
       <div id="content">
@@ -164,15 +166,23 @@ t: 0; border: 0;" src="https://assets.github.com/img/bec6c51521dcc8148146135149f
   </div>
 </div>
 
-<!-- Add ids and anchors to doc titles -->
+<!-- Add anchors to doc titles and build the dropdown menu -->
 <script type="text/javascript">
+  jQuery('#menu .main').append("<ul id='dropdown'></ul>");
   jQuery.each(jQuery('.doc h3'), function(i, heading) {
-  	jQuery(heading).attr({'id': jQuery(heading).text().replace(/ /g,"_")})
-  	jQuery(heading).html(
-		i + ". " + 
-  		jQuery(heading).html() +
-		" <a href='#" + jQuery(heading).attr('id') + "'>&para;</a>");
+  	jQuery(heading).attr({'id': jQuery(heading).text().replace(/ /g,"_")});
+  	jQuery(heading).html(i + ". " + jQuery(heading).html());
+  	jQuery('#dropdown').append("<li><a href='#" + jQuery(heading).attr('id') + "'>" + jQuery(heading).text() + "</a></li>");
+  	jQuery(heading).html(jQuery(heading).html() + " <a href='#" + jQuery(heading).attr('id') + "'>&para;</a>");
   });
+
+  jQuery('#doc_link')
+  	.bind('mouseenter', function() {jQuery('#dropdown').show()})
+  	.bind('mouseleave', function() {jQuery('#dropdown').hide()});
+  jQuery('#dropdown')
+  	.bind('mouseenter', function() {jQuery('#dropdown').show()})
+  	.bind('mouseleave', function() {jQuery('#dropdown').hide()})
+  	.bind('click', function() {jQuery('#dropdown').hide()});
 </script>
 
 	</div>

_site/index.html

@@ -52,12 +52,14 @@ t: 0; border: 0;" src="https://assets.github.com/img/bec6c51521dcc8148146135149f
       </div>
       
       <div id="menu">
-	<ul>
-	  <li><a href="index.html">Overview</a></li> · 
-	  <li><a href="index.html#download">Download</a></li> · 
-	  <li><a href="documentation.html">Documentation</a></li> ·
-	  <li><a target="_blank" href="https://github.com/NicolasPetton/jtalk">Source</a></li> 
-	</ul>
+	<div class="main">
+	  <ul>
+	    <li><a href="index.html">Overview</a></li> · 
+	    <li><a href="index.html#download">Download</a></li> · 
+	    <li><a id="doc_link" href="documentation.html">Documentation</a></li> ·
+	    <li><a target="_blank" href="https://github.com/NicolasPetton/jtalk">Source</a></li> 
+	  </ul>
+	</div>
       </div>
 
       <div id="content">

css/style.css

@@ -32,15 +32,15 @@ html,body {
     border-bottom: 1px solid #aaa;
     position: absolute;
     width: 100%;
+    height: 36px;
     top: 210px;
     font-family: arial,helvetica,sans;
     z-index: 1;
 }
 
 #menu ul {
-    width: 980px;
-    margin: 0 auto;
     padding: 5px 0;
+    margin: 0;
 }
 
 #menu li {
@@ -51,7 +51,7 @@ html,body {
 #menu a {
 	color: #515a6a;
 	text-decoration: none;
-	padding: 5px 15px;
+	padding: 10px 15px;
 }
 
 #menu a:hover {
@@ -64,6 +64,21 @@ html,body {
 	color: #072d5a;
 	text-decoration: none;
 }
+
+#menu #dropdown {
+    float: left;
+    margin-left: 220px;
+    background: #d0def1;
+    border: 1px solid #aaa;
+    border-top: 0 none;
+    width: auto; 
+    display: none;
+}
+
+#menu #dropdown li {
+    display: block;
+    padding: 5px 0;
+}
 	
 #content .main {
 	width: 980px;
@@ -175,7 +190,7 @@ html,body {
 }
 
 .box .content pre {
-	border: 1px solid #aaa;
+	border: 1px solid #ccc;
 	background-color: #eee;
 	border-radius: 10px;
 	-moz-border-radius: 10px;

documentation.html

@@ -103,13 +103,21 @@ title: Jtalk Smalltalk - documentation
   </div>
 </div>
 
-<!-- Add ids and anchors to doc titles -->
+<!-- Add anchors to doc titles and build the dropdown menu -->
 <script type="text/javascript">
+  jQuery('#menu .main').append("<ul id='dropdown'></ul>");
   jQuery.each(jQuery('.doc h3'), function(i, heading) {
-  	jQuery(heading).attr({'id': jQuery(heading).text().replace(/ /g,"_")})
-  	jQuery(heading).html(
-		i + ". " + 
-  		jQuery(heading).html() +
-		" <a href='#" + jQuery(heading).attr('id') + "'>&para;</a>");
+  	jQuery(heading).attr({'id': jQuery(heading).text().replace(/ /g,"_")});
+  	jQuery(heading).html(i + ". " + jQuery(heading).html());
+  	jQuery('#dropdown').append("<li><a href='#" + jQuery(heading).attr('id') + "'>" + jQuery(heading).text() + "</a></li>");
+  	jQuery(heading).html(jQuery(heading).html() + " <a href='#" + jQuery(heading).attr('id') + "'>&para;</a>");
   });
+
+  jQuery('#doc_link')
+  	.bind('mouseenter', function() {jQuery('#dropdown').show()})
+  	.bind('mouseleave', function() {jQuery('#dropdown').hide()});
+  jQuery('#dropdown')
+  	.bind('mouseenter', function() {jQuery('#dropdown').show()})
+  	.bind('mouseleave', function() {jQuery('#dropdown').hide()})
+  	.bind('click', function() {jQuery('#dropdown').hide()});
 </script>