diff --git a/src/css/video-js.less b/src/css/video-js.less index cd2be602d..5c349ac70 100644 --- a/src/css/video-js.less +++ b/src/css/video-js.less @@ -717,7 +717,8 @@ easily in the skin designer. http://designer.videojs.com/ } .vjs-default-skin .vjs-menu { - display: none; + z-index: -1; + display: block; position: absolute; bottom: 0; left: 0em; /* (Width of vjs-menu - width of button) / 2 */ @@ -748,8 +749,9 @@ easily in the skin designer. http://designer.videojs.com/ .box-shadow(-0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2)); } -.vjs-default-skin .vjs-menu-button:hover .vjs-menu { - display: block; +.vjs-default-skin .vjs-menu-button:hover .vjs-menu, +.vjs-default-skin .vjs-menu-button .vjs-visible-menu { + z-index: 1; } .vjs-default-skin .vjs-menu-button ul li { list-style: none; diff --git a/src/js/control-bar/volume-menu-button.js b/src/js/control-bar/volume-menu-button.js index b3a634397..f50eb5b11 100644 --- a/src/js/control-bar/volume-menu-button.js +++ b/src/js/control-bar/volume-menu-button.js @@ -30,6 +30,12 @@ vjs.VolumeMenuButton.prototype.createMenu = function(){ contentElType: 'div' }); var vc = new vjs.VolumeBar(this.player_, vjs.obj.merge({'vertical': true}, this.options_.volumeBar)); + vc.on('focus', function() { + menu.addClass('vjs-visible-menu'); + }); + vc.on('blur', function() { + menu.removeClass('vjs-visible-menu'); + }); menu.addChild(vc); return menu; }; diff --git a/src/js/menu.js b/src/js/menu.js index 55558a9c0..a1b73b402 100644 --- a/src/js/menu.js +++ b/src/js/menu.js @@ -139,9 +139,17 @@ vjs.MenuButton.prototype.createMenu = function(){ this.items = this['createItems'](); if (this.items) { + var focusHandler = function(){ + menu.addClass('vjs-visible-menu'); + }; + var blurHandler = function() { + menu.removeClass('vjs-visible-menu'); + }; // Add menu items to the menu for (var i = 0; i < this.items.length; i++) { menu.addItem(this.items[i]); + this.items[i].on('focus', focusHandler); + this.items[i].on('blur', blurHandler); } } @@ -213,4 +221,3 @@ vjs.MenuButton.prototype.unpressButton = function(){ this.menu.unlockShowing(); this.el_.setAttribute('aria-pressed', false); }; -