adding menus

css/main.css

@@ -74,8 +74,9 @@ nav .btn {
     z-index: 2;
     position: absolute;
     display: block;
-    background-color: rgba(255,255,255,0.8);
+    background-color: rgba(255,255,255,0.7);
     right: 0;
+    overflow:hidden;
 }
 
 /*menus*/
@@ -96,7 +97,6 @@ nav .btn {
 
 .nav-tabs .active a{
     background-color: transparent !important;
-    border-width:2px !important;
     border-bottom-color: transparent!important;
 }
 
@@ -105,12 +105,24 @@ nav .btn {
 }
 
 .nav-tabs li a{
+    border-left-width: 1px;
+    border-right-width; 1px;
+    border-color: #DDD;
     border-bottom: 2px solid #DDD!important;
+    color:#bebebe;
+    margin-left: -2px;
+    margin-right: -2px;
+    margin-top:-2px;
+    background-color: rgba(0,0,0,0.03);
 }
 
-.nav-tabs li{
-    /*width:100%;*/
-    margin-bottom: -2px;
+.nav-tabs li a:hover{
+    color:#555;
+    background-color: transparent;
+}
 
+#menuContent{
+    padding: 30px;
 }
 
+

js/main.js

@@ -22,5 +22,6 @@ $(function(){
     var threeView = new ThreeView({model:threeModel, lattice:lattice});
 
 
+    MenuWrapper();
     setupNavBar(threeModel);
 });

js/menus/LatticeMenuView.js

@@ -5,7 +5,7 @@
 
 LatticeMenuView = Backbone.View.extend({
 
-    el: "",
+    el: "#menuContent",
 
     events: {
     },
@@ -13,14 +13,26 @@ LatticeMenuView = Backbone.View.extend({
     initialize: function(){
 
         _.bindAll(this, "render");
-
-        this.render();
     },
 
     render: function(){
-
+        this.$el.html(this.template());
     },
 
-    template: null;
+    template: _.template('\
+        Cell Type: <br/>\
+        Cell Connection:<br/>\
+        Scale:<br/>\
+        Column Separation:<br/><br/>\
+        <a href="#" class=" btn btn-block btn-lg btn-default">Clear All</a><br/>\
+        <span class="btn btn-default btn-file fullWidth">\
+            Upload STL<input id="uploadMesh" type="file">\
+       </span><br/><br/>\
+        <div class="btn-group fullWidth">\
+            <button data-toggle="dropdown" class="btn btn-default dropdown-toggle fullWidth" type="button">Select Model <span class="caret"></span></button>\
+            <ul role="menu" class="dropdown-menu">\
+              <li><a class="selectMesh" data-file="Airbus_A300-600.stl" href="#">Plane</a></li>\
+            </ul>\
+        </div><!-- /btn-group -->')
 
 });
\ No newline at end of file

js/menus/MenuWrapper.js

-
-
+/**
+ * Created by aghassaei on 1/26/15.
+ */
 
 
 function MenuWrapper(){
 
-    var cellMenu =
-
-
-
+    //init all tab view controllers
+    var latticeMenu = new LatticeMenuView();
+    var sketchMenu = new SketchMenuView();
+    var partMenu = new PartMenuView();
+    var scriptMenu = new ScriptMenuView();
+
+
+    var tabItems = $(".nav-tabs>li>a");
+    tabItems.click(function(e){
+        e.preventDefault();
+        var $this = $(this);
+
+        _.each(tabItems, function(tab){
+            $(tab).parent().removeClass("active");
+        });
+        $this.parent().addClass("active");
+
+        var tabName = $this.parent().data('name');
+        if (tabName == "lattice"){
+            latticeMenu.render();
+        } else if (tabName == "sketch"){
+            sketchMenu.render();
+        } else if (tabName == "part"){
+            partMenu.render();
+        } else if (tabName == "script"){
+            scriptMenu.render();
+        } else {
+            console.warn("no tab initialized!");
+            $("menuContent").html('');//clear out content from menu
+        }
+    });
+
+    latticeMenu.render();//init with lattice menu open
 
 }
\ No newline at end of file

js/menus/PartMenuView.js

+/**
+ * Created by aghassaei on 1/26/15.
+ */
+
+PartMenuView = Backbone.View.extend({
+
+    el: "#menuContent",
+
+    events: {
+    },
+
+    initialize: function(){
+
+        _.bindAll(this, "render");
+    },
+
+    render: function(){
+        this.$el.html(this.template());
+    },
+
+    template: _.template('\
+        Part Type: <br/>\
+        ')
+
+});
\ No newline at end of file

js/menus/ScriptMenuView.js

+/**
+ * Created by aghassaei on 1/26/15.
+ */
+
+ScriptMenuView = Backbone.View.extend({
+
+    el: "#menuContent",
+
+    events: {
+    },
+
+    initialize: function(){
+
+        _.bindAll(this, "render");
+    },
+
+    render: function(){
+        this.$el.html(this.template());
+    },
+
+    template: _.template('\
+        some kind of scripting functionality?\
+        ')
+
+});
\ No newline at end of file

js/menus/SketchMenuView.js

+/**
+ * Created by aghassaei on 1/26/15.
+ */
+
+
+SketchMenuView = Backbone.View.extend({
+
+    el: "#menuContent",
+
+    events: {
+    },
+
+    initialize: function(){
+
+        _.bindAll(this, "render");
+    },
+
+    render: function(){
+        this.$el.html(this.template());
+    },
+
+    template: _.template('\
+        sketch and extrude commands\
+        ')
+
+});
\ No newline at end of file

main.html

@@ -54,12 +54,10 @@
     <!--views-->
     <script src="js/menus/MenuWrapper.js"></script>
     <script src="js/menus/LatticeMenuView.js"></script>
-    <script src="js/threeViews/meshHandle.js"></script>
+    <script src="js/menus/PartMenuView.js"></script>
+    <script src="js/menus/SketchMenuView.js"></script>
+    <script src="js/menus/ScriptMenuView.js"></script>
     <script src="js/threeViews/threeView.js"></script>
-    <script src="js/threeViews/pushPullMeshView.js"></script>
-    <script src="js/menus/importView.js"></script>
-    <script src="js/threeViews/fillGeometryView.js"></script>
-    <script src="js/threeViews/latticeView.js"></script>
 
     <script src="js/main.js"></script>
 
@@ -81,14 +79,7 @@
     </div>
     <div class="collapse navbar-collapse" id="navbar-collapse-01">
       <ul class="nav navbar-nav navbar-left">
-        <li><a data-menu-id="importGeometry" class="menuHoverControls" href="#">Import</a></li>
-        <li><a data-menu-id="element" class="menuHoverControls" href="#">Element</a></li>
-
-        <!--<li><a data-menu-id="controls1Menu" class="menuHoverControls" href="#">Controls1</a></li>-->
-        <!--<li><a data-menu-id="controls2Menu" class="menuHoverControls" href="#">Controls2</a></li>-->
-        <!--<li><a data-menu-id="controls3Menu" class="menuHoverControls" href="#">Glyphs</a></li>-->
-        <!--<li><a data-menu-id="controls4Menu" class="menuHoverControls" href="#">Buttons</a></li>-->
-        <!--<li><a data-menu-id="controls5Menu" class="menuHoverControls" href="#">Inputs</a></li>-->
+        <li><a data-menu-id="file" class="menuHoverControls" href="#">File</a></li>
         <li class="dropdown navDropdown">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Export <b class="caret"></b></a>
           <span class="dropdown-arrow"></span>
@@ -103,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="#">Clear All</a></li>
+            <li><a id="clearAll" class="menuHoverControls" href="#">Show/Hide Menu >></a></li>
         </ul>
        <!--<a href="#fakelink" id="clearAll" class=" btn btn-lg btn-primary">Clear All</a>-->
     </div><!-- /.navbar-collapse -->
@@ -111,10 +102,13 @@
 
 <div id="menuWrapper">
     <ul class="nav nav-tabs nav-justified">
-      <li role="presentation" class="active"><a href="#">Cell</a></li>
-      <li role="presentation"><a href="#">Part</a></li>
-      <li role="presentation"><a href="#">Script</a></li>
+      <li role="presentation" class="active" data-name="lattice"><a href="#">Lattice</a></li>
+        <li role="presentation" data-name="sketch"><a href="#">Sketch</a></li>
+      <li role="presentation" data-name="part"><a href="#">Part</a></li>
+      <li role="presentation" data-name="script"><a href="#">Script</a></li>
     </ul>
+
+    <div id="menuContent"></div>
 </div>
 
 <div id="importGeometry" class="row navMenu">