From 68410569816912018560377c590e3e409539dc9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Batista?= <jnfbatista@gmail.com>
Date: Sat, 4 Aug 2012 20:01:10 +0200
Subject: [PATCH] Navigation much better: still much work to do

---
 css/structure.css |  21 ++++++++++
 main.html         | 100 ++++++++++++++++++++++++----------------------
 2 files changed, 74 insertions(+), 47 deletions(-)
diff --git a/css/structure.css b/css/structure.css
index ee20343..13d4066 100644
--- a/css/structure.css
+++ b/css/structure.css
@@ -2,3 +2,24 @@
     height: 4em;
     width: 4em;
 }
+
+.navigation {
+    background: #2C2C2C;
+    overflow: hidden;
+}
+
+#topbar {
+    width:100%;
+    position: absolute;
+}
+
+#nav-button {
+    border-radius: 0px 0px 20px 20px ;
+    background:  #2C2C2C;
+    margin: 0px;
+    padding: 0.5em;
+    padding-right: 1em;
+    padding-left: 1em;
+    margin-right: 5em;
+}
+
diff --git a/main.html b/main.html
index 881b741..dc7d3ae 100644
--- a/main.html
+++ b/main.html
@@ -19,59 +19,65 @@
 
     </head>
     <body>
-        <div class="navbar">
-            <div class="navbar-inner">
-                <div class="container">
-                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
+        <div id="topbar">
+            <div class="navigation">
+                <ul class="nav nav-pills" >
+                    <li class="active">
+                    <a class="image-link"  >
+                        <img class="chapter-image" src="img/firefox.png" >
+                        <p>Subtitle</p>
                     </a>
-                    <div class="nav-collapse">
-
-                        <ul class="nav">
-                            <li class="active">
-                            <a class="image-link"  >
-                                <img class="chapter-image" src="img/firefox.png" >
-                                <p>Subtitle</p>
-                            </a>
-                            </li>
-                            <li class="">
-                            <a class="image-link"  >
-                                <img class="chapter-image" src="img/firefox.png" >
-                                <p>Subtitle</p>
-                            </a>
-                            </li>
-                            <li class="">
-                            <a class="image-link"  >
-                                <img class="chapter-image" src="img/firefox.png" >
-                                <p>Subtitle</p>
-                            </a>
-                            </li>
-                            <li class="">
-                            <a class="image-link"  >
-                                <img class="chapter-image" src="img/firefox.png" >
-                                <p>Hide it!</p>
-                            </a>
-                            </li>
-                        </ul>
-                    </div>
-
-                </div>
+                    </li>
+                    <li class="">
+                    <a class="image-link"  >
+                        <img class="chapter-image" src="img/firefox.png" >
+                        <p>Subtitle</p>
+                    </a>
+                    </li>
+                    <li class="">
+                    <a class="image-link"  >
+                        <img class="chapter-image" src="img/firefox.png" >
+                        <p>Subtitle</p>
+                    </a>
+                    </li>
+                </ul>
             </div>
+            <a id="nav-button" class="pull-right" href="#">Nav me!! <i class="icon-chevron-down
+                    icon-white"></i> </a> 
         </div>
-        <div id="left-hidden">
-        </div>
-        <div id="main" class="span12">
-            fopjefoj apojpefjpwj pwej epfj 
-        </div>
-        <div id="right-hidden">
+        <div style="clear: both;"></div>
+        <div id="wrapper">
+            <div id="left-hidden">
+            </div>
+            <div id="main" class="span12">
+                fopjefoj apojpefjpwj pwej epfj 
+            </div>
+            <div id="right-hidden">
+            </div>
         </div>
         <script>
             $(".collapse").collapse();
-            $(".navbar-inner").hover(function(){
-                $(this).height('0.2em');
-            },function(){});
+
+            $(document).ready(function() {
+                var original_height = $(".navigation").height();
+
+                $(".navigation").height('0em');
+
+                $("#nav-button").click(function(){
+                    if ( $(".navigation").height() == 0) {
+                        $(".navigation").animate({
+                            'height' : original_height }
+                        );
+                        $("#nav-button").find('i').attr('class', 'icon-chevron-up icon-white');
+                        } else {
+                        $(".navigation").animate({
+                            'height' : '0em'
+                        }
+                        );
+                        $("#nav-button").find('i').attr('class', 'icon-chevron-down icon-white');
+                    }
+                });
+            });
         </script>
     </body>
 </html>
