adding dropdowns to tabs by refactoring the shizzzz out of them

2 files changed, 28 insertions, 10 deletions

diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 30677829e..aaf76e0f0 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -5,6 +5,7 @@ $(document).ready(function(){
 
   prettyPrint();
 
+
   // scroll spy logic
   // ================
 
@@ -19,7 +20,6 @@ $(document).ready(function(){
         return $(id).offset().top;
       });
 
-
   function setButton(id) {
     nav.parent("li").removeClass('active');
     $(nav[$.inArray(id, targets)]).parent("li").addClass('active');
@@ -48,10 +48,10 @@ $(document).ready(function(){
   // ===============================
 
   $("body").bind("click", function (e) {
-    $('a.menu').parent("li").removeClass("open");
+    $('.dropdown-toggle').parent("li").removeClass("open");
   });
 
-  $("a.menu").click(function (e) {
+  $(".dropdown-toggle").click(function (e) {
     var $li = $(this).parent("li").toggleClass('open');
     return false;
   });
diff --git a/docs/index.html b/docs/index.html
index bc0e216ab..cbc482002 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -34,10 +34,10 @@
     <!-- Topbar
     ================================================== -->
     <div class="topbar">
-      <div class="fill">
+      <div class="wrapper">
         <div class="container">
           <h3><a href="#">Bootstrap</a></h3>
-          <ul>
+          <ul class="nav">
             <li class="active"><a href="#masthead">Overview</a></li>
             <li><a href="#about">About</a></li>
             <li><a href="#grid-system">Grid</a></li>
@@ -901,22 +901,31 @@
   <h2>Fixed topbar</h2>
   <div class="topbar-wrapper" style="z-index: 5;">
     <div class="topbar">
-      <div class="fill">
+      <div class="wrapper">
         <div class="container">
           <h3><a href="#">Project Name</a></h3>
-          <ul>
+          <ul class="nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#">Link</a></li>
             <li><a href="#">Link</a></li>
             <li><a href="#">Link</a></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle">Dropdown</a>
+              <ul class="dropdown-menu">
+                <li><a href="#">Secondary link</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Another link</a></li>
+              </ul>
+            </li>
           </ul>
           <form action="">
             <input type="text" placeholder="Search" />
           </form>
           <ul class="nav secondary-nav">
-            <li class="menu">
-              <a href="#" class="menu">Dropdown</a>
-              <ul class="menu-dropdown">
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle">Dropdown</a>
+              <ul class="dropdown-menu">
                 <li><a href="#">Secondary link</a></li>
                 <li><a href="#">Something else here</a></li>
                 <li class="divider"></li>
@@ -960,6 +969,15 @@
         <li><a href="#">Messages</a></li>
         <li><a href="#">Settings</a></li>
         <li><a href="#">Contact</a></li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle">Dropdown</a>
+          <ul class="dropdown-menu">
+            <li><a href="#">Secondary link</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Another link</a></li>
+          </ul>
+        </li>
       </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="tabs"&gt;