menu animation

js/main.js

@@ -22,6 +22,7 @@ $(function(){
     var threeView = new ThreeView({model:threeModel, lattice:lattice});
 
 
-    MenuWrapper();
-    setupNavBar(threeModel);
+    //setup ui
+    var menu = MenuWrapper();
+    NavBar(menu);
 });

js/menus/LatticeMenuView.js

@@ -24,7 +24,7 @@ LatticeMenuView = Backbone.View.extend({
         Cell Connection:<br/>\
         Scale:<br/>\
         Column Separation:<br/><br/>\
-        <a href="#" class=" btn btn-block btn-lg btn-default">Clear All</a><br/>\
+        <a href="#" class=" btn btn-block btn-lg btn-default">Clear All Cells</a><br/>\
         <span class="btn btn-default btn-file fullWidth">\
             Upload STL<input id="uploadMesh" type="file">\
        </span><br/><br/>\

js/menus/MenuWrapper.js

@@ -5,12 +5,15 @@
 
 function MenuWrapper(){
 
+    var $el = $("#menuWrapper");
+
     //init all tab view controllers
     var latticeMenu = new LatticeMenuView();
     var sketchMenu = new SketchMenuView();
     var partMenu = new PartMenuView();
     var scriptMenu = new ScriptMenuView();
 
+    init();
 
     var tabItems = $(".nav-tabs>li>a");
     tabItems.click(function(e){
@@ -37,6 +40,20 @@ function MenuWrapper(){
         }
     });
 
-    latticeMenu.render();//init with lattice menu open
+    function init(){
+        latticeMenu.render();//init with lattice menu open
+    }
+
+    function hide(){
+        $el.animate({right: "-400"});
+    }
+
+    function show(){
+        $el.animate({right: "0"});
+    }
 
+    return {//return public properties and methods
+        hide: hide,
+        show:show
+    };
 }
\ No newline at end of file

js/menus/navbar.js

@@ -3,7 +3,7 @@
  */
 
 
-function setupNavBar(three){
+function NavBar(menu){
 
     var allMenus = $(".navMenu");
     var allNavMenuLinks = $(".menuHoverControls");
@@ -17,13 +17,25 @@ function setupNavBar(three){
 //        $(menuId).show();
 //    });
 
-    var clearButton = $("#clearAll");
-    clearButton.mouseout(function(){
+    var showHideMenuBtn = $("#showHideMenu");
+    showHideMenuBtn.mouseout(function(){
         $(this).parent().removeClass("open");
     });
-
-    //clear canvas
-    clearButton.click(three.clearAll);
+    //show/hide menu
+    showHideMenuBtn.click(function(e){
+        e.preventDefault();
+        var $this = $(this);
+        var state = $this.data('state');
+        if(state){
+            $this.html("<< Show Menu");
+            menu.hide();
+        } else {
+            $this.html("Hide Menu >>");
+            menu.show();
+        }
+        $this.data('state', !state);
+        $this.blur();
+    });
 
     function hideAllMenus(){
         allMenus.hide();

main.html

@@ -64,7 +64,7 @@
 
     <!--<script src="js/views/elementMenu.js"></script>-->
     <script src="js/menus/exportMenu.js"></script>
-    <script src="js/menus/navbar.js"></script>
+    <script src="js/menus/Navbar.js"></script>
     <link rel="stylesheet" type="text/css" href="css/main.css">
 
 </head>
@@ -94,7 +94,7 @@
         <li><a data-menu-id="about" class="menuHoverControls" href="#">About</a></li>
        </ul>
         <ul class="nav navbar-nav navbar-right">
-            <li><a id="clearAll" class="menuHoverControls" href="#">Show/Hide Menu >></a></li>
+            <li><a id="showHideMenu" data-state=true class="menuHoverControls" href="#">Hide Menu >></a></li>
         </ul>
        <!--<a href="#fakelink" id="clearAll" class=" btn btn-lg btn-primary">Clear All</a>-->
     </div><!-- /.navbar-collapse -->