diff --git a/js/main.js b/js/main.js
index 624dca30ba273bd2f8a20f5ae17554d80d9d31e6..3a8c5904f0b5904125bf5c91480a56b9a4505ef9 100644
--- a/js/main.js
+++ b/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);
 });
diff --git a/js/menus/LatticeMenuView.js b/js/menus/LatticeMenuView.js
index 8e5946f54e1f2ecd7044e760f61ef4a6fcd7d0d2..eb142474099488d5c3049b658206bc335fa0b040 100644
--- a/js/menus/LatticeMenuView.js
+++ b/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/>\
diff --git a/js/menus/MenuWrapper.js b/js/menus/MenuWrapper.js
index 6affe9af4138c982c65fd75299268a547add146c..dae27453004cb61c3d8cbf7c2151fdc6d5be26a0 100644
--- a/js/menus/MenuWrapper.js
+++ b/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
diff --git a/js/menus/navbar.js b/js/menus/navbar.js
index fcf60d63a6b34ba008b45abdb4792ba1cc66abe3..6c830e4b20a7bcbb4cd2ffb52a0941c33dfbc7b1 100644
--- a/js/menus/navbar.js
+++ b/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();
diff --git a/main.html b/main.html
index ada75f56a5e18a86d76b4f7228f8f5edec086fb9..8e4f1d759eb38970b6ef504229fe89a6a8fea205 100644
--- a/main.html
+++ b/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 -->