diff --git a/css/main.css b/css/main.css index d4786992e9da0139689f5878935d606d7701392f..a0a8816cc5fd152d5c2057e2a32f5cb4c592fbd2 100644 --- a/css/main.css +++ b/css/main.css @@ -28,7 +28,7 @@ body { .navbar-header { padding-right: 0px; - width: 100px; + width: 104px; } #logo { diff --git a/js/menus/navbar.js b/js/menus/navbar.js index 9d52b6ca29bfcceed4df8423bf9882faf7118af3..0e5177e598505d4014d7c445f6571eb425021273 100644 --- a/js/menus/navbar.js +++ b/js/menus/navbar.js @@ -12,17 +12,18 @@ NavBar = Backbone.View.extend({ events: { "click #showHideMenu": "_setMenuVis", - "click .menuHoverControls": "_setNavSelection", - "click .navDropdown": "_deselectAllNavItems" + "click .menuHoverControls": "_setNavSelection" }, initialize: function(){ - _.bindAll(this, "_setMenuVis"); + _.bindAll(this, "_setMenuVis", "_setNavSelection"); this.listenTo(this.model, "change:menuIsVisible", this._updateShowHideButton); + this.listenTo(this.model, "change:currentNav", this._updateNavSelectionUI); this._uiStuff(); + this._updateNavSelectionUI(); }, _setMenuVis: function(e){ @@ -44,11 +45,11 @@ NavBar = Backbone.View.extend({ _setNavSelection: function(e){ e.preventDefault(); - var $link = $(e.target); - this._deselectAllNavItems(); - $link.parent().addClass("open");//highlight - var navSelection = $link.data("menuId"); - if (navSelection == "about") return; + var navSelection = $(e.target).data("menuId"); + if (navSelection == "about") { + $(e.target).blur(); + return; + } if (navSelection) { if (navSelection=="navDesign") this.model.set("currentTab", "lattice", {silent: true}); else if (navSelection=="navSim") this.model.set("currentTab", "physics", {silent: true}); @@ -57,6 +58,15 @@ NavBar = Backbone.View.extend({ } }, + _updateNavSelectionUI: function(){ + this._deselectAllNavItems(); + var navSelection = this.model.get("currentNav"); + _.each($(".menuHoverControls"), function(link){ + var $link = $(link); + if ($link.data("menuId") == navSelection) $link.parent().addClass("open");//highlight + }); + }, + _uiStuff: function(){ var $logo = $("#logo"); $logo.mouseover(function(){