[stem/master] Simplifying site navigation via a navbar menu - tor-commits

8 Apr 2013

commit c719b1e5680898e9d1f6ede953b3169d12580f64
Author: Damian Johnson atagar@torproject.org
Date:   Sun Apr 7 17:22:17 2013 -0700
Simplifying site navigation via a navbar menu
Using a CSS style navbar to make site navigation easier. This is based on the
    one from...
http://aext.net/2009/09/elegant-drop-menu-with-css-only/
---
 docs/_static/haiku.css_t    |   87 +++++++++++++++++++++++++++++++++++++++++++
 docs/_templates/layout.html |   46 +++++++++++++++++------
 docs/change_log.rst         |    1 +
 3 files changed, 122 insertions(+), 12 deletions(-)

diff --git a/docs/_static/haiku.css_t b/docs/_static/haiku.css_t
index 28be8f4..cd3b28d 100644
--- a/docs/_static/haiku.css_t
+++ b/docs/_static/haiku.css_t
@@ -367,3 +367,90 @@ div.viewcode-block:target {
     margin: -1px -12px;
     padding: 0 12px;
 }
+
+/* Navbar */
+
+#navbar { 
+  list-style: none; 
+  margin: 0; 
+  padding: 0;
+  float: left;
+  position: relative;
+}
+
+#navbar li {
+  float: left;
+  position: relative;
+}
+
+/* top navbar items */
+
+#navbar li a {
+  float: left;
+  display: block;
+  text-decoration: none;
+  color: #666;
+  font-weight: normal;
+  text-indent: 10px;
+  width: 130px;
+  font-size: 0.9em;
+}
+
+#navbar li:hover a,
+#navbar li a:hover {
+  font-weight: normal;
+  background: #999;
+  color: #fff;
+}
+
+/* start child items as invisible, but make them visible on hover */
+
+#navbar ul {
+  display: none;
+}
+
+#navbar li:hover ul {
+  display: block;
+}
+
+/* attributes for child navbar items */
+
+#navbar ul {
+  float: none;
+  position: absolute;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  top: 1.1em;
+  left: 0;
+}
+
+#navbar ul li {
+  float: none;
+  clear: none;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  color: #666;
+}
+
+#navbar li:hover ul li a,
+#navbar ul li {
+  font-weight: normal;
+  text-indent: 5px;
+  line-height: 200%;
+  display: block;
+  padding: 0 0 0 0;
+  float: none;
+  color: #666;
+  background-color: #e0e0e0;
+}
+
+#navbar li:hover ul li a:hover,
+#navbar ul li a:hover {
+  font-weight: normal;
+  text-indent: 5px;
+  background-color: #c1c1c1;
+  color: #000;
+}
+
diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html
index 1b87971..e0cc749 100644
--- a/docs/_templates/layout.html
+++ b/docs/_templates/layout.html
@@ -19,17 +19,40 @@
         <p>
         {%- block haikurel1 %}
         {%- endblock %}
-        <a class="uplink" href="{{ pathto(master_doc) }}">Home</a>
-        &#160;&#160;|&#160;&#160;
-        <a class="uplink" href="{{ pathto('tutorials') }}">Tutorials</a>
-        &#160;&#160;|&#160;&#160;
-        <a class="uplink" href="{{ pathto('api') }}">API</a>
-        &#160;&#160;|&#160;&#160;
-        <a class="uplink" href="https://trac.torproject.org/projects/tor/wiki/doc/stem/bugs">Bug Tracker</a>
-        &#160;&#160;|&#160;&#160;
-        <a class="uplink" href="{{ pathto('change_log') }}">Change Log</a>
-        &#160;&#160;|&#160;&#160;
-        <a class="uplink" href="{{ pathto('download') }}">Download</a>
+
+        <ul id="navbar">
+          <li><a href="{{ pathto(master_doc) }}">Home</a></li>
+          <li><a href="{{ pathto('tutorials') }}">Tutorials</a>
+            <ul>
+              <li><a href="{{ pathto('tutorials/the_little_relay_that_could') }}">Hello World</a></li>
+              <li><a href="{{ pathto('tutorials/to_russia_with_love') }}">Client Usage</a></li>
+              <li><a href="{{ pathto('tutorials/tortoise_and_the_hare') }}">Event Listening</a></li>
+              <li><a href="{{ pathto('tutorials/mirror_mirror_on_the_wall') }}">Tor Descriptors</a></li>
+              <li><a href="{{ pathto('tutorials/double_double_toil_and_trouble') }}">Examples</a></li>
+            </ul>
+          </li>
+          <li><a href="{{ pathto('api') }}">API</a>
+            <ul>
+              <li><a href="{{ pathto('api/control') }}">stem.control</a></li>
+              <li><a href="{{ pathto('api/connection') }}">stem.connection</a></li>
+              <li><a href="{{ pathto('api/socket') }}">stem.socket</a></li>
+              <li><a href="{{ pathto('api/process') }}">stem.process</a></li>
+              <li><a href="{{ pathto('api/response') }}">stem.response</a></li>
+              <li><a href="{{ pathto('api/exit_policy') }}">stem.exit_policy</a></li>
+              <li><a href="{{ pathto('api/version') }}">stem.version</a></li>
+              <li><a href="{{ pathto('api') }}#descriptors">Descriptors</a></li>
+              <li><a href="{{ pathto('api') }}#utilities">Utilities</a></li>
+            </ul>
+          </li>
+          <li><a href="https://trac.torproject.org/projects/tor/wiki/doc/stem">Development</a>
+            <ul>
+              <li><a href="{{ pathto('change_log') }}">Change Log</a></li>
+              <li><a href="https://trac.torproject.org/projects/tor/wiki/doc/stem/bugs">Bug Tracker</a></li>
+              <li><a href="{{ pathto('download') }}">Download</a></li>
+            </ul>
+          </li>
+        </ul>
+
         {%- block haikurel2 %}
         {%- endblock %}
         </p>
@@ -65,6 +88,5 @@
         {% block body %}{% endblock %}
       </div>
       <div class="bottomnav">
-      {{ nav() }}
       </div>
 {% endblock %}
diff --git a/docs/change_log.rst b/docs/change_log.rst
index 696bfda..479cb73 100644
--- a/docs/change_log.rst
+++ b/docs/change_log.rst
@@ -46,6 +46,7 @@ The following are only available within stem's `git repository
* Overhaul of stem's `download page <download.html>`_. This included several
     improvements, most notably the addition of PyPI, FreeBSD, and RedHat.
+  * Replaced default sphinx header with a navbar menu.
   * Added this change log.
   * Settled on a `logo
     http://www.wpclipart.com/plants/assorted/P/plant_stem.png.html`_ for

    