Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I am trying to get the top nav bar's drop down menu working with the keyboard. What should happen is when a user presses the tab key and the top menu item is reached, the drop down should show just like the mouse hover event does.

Typically, I just add a function to the onfocus event that calls the mouseover event, but that isn't working. The following code causes a "TypeError: Object doesn't support property or method 'mouseover'" error.

var hoverMenuItems = document.getElementsByTagName('li');
for (x = 0; x < hoverMenuItems.length; x++) {
    if (hoverMenuitem[x].className.indexOf('dynamic-children') != -1) {
        hoverMenuItems[x].onfocusin = function () { try { this.mouseover(); } catch (err) { alert(err); } }
        hoverMenuItems[x].onfocusout = function () { try { this.mouseout(); } catch (err) { alert(err); } }
    }
}

I've already been informed that I can't modify any of the existing source code, so I need to find a solution that will modify the page after it's rendered.

Any help would be greatly appreciated.

share|improve this question

2 Answers 2

It took a lot of trial and error, but I finally found a way to get keyboard users able to see the drop down menus. The fix below will only work in IE (I'm working on the cross-browser version, so if you need it, let me know).

While I was tracing the events, I discovered that the only changes were the addition of the class name to the li elements and the styles to the child ul element. I also discovered that for some reason, the tabIndex attribute had to be added to make this work.

var hoverMenuItems = document.getElementsByTagName('li');
for (x = 0; x < hoverMenuItems.length; x ++) {
    if (hoverMenuItems[x].className.indexOf('dynamic-children') != -1) {
        hoverMenuItems[x].tabIndex=-1;
        hoverMenuItems[x].onfocusin = function () {
            this.className = "static dynamic-children hover";
            this.getElementsByTagName('ul')[0].style.cssText="top:25px; left:1px;";
        }
        hoverMenuItems[x].onfocusout = function () {
            this.className = "static dynamic-children";
            this.getElementsByTagName('ul')[0].style.cssText="";
        }
    }
}
share|improve this answer

Those people stumbling across this solution by Leeland may be interested in the slightly updated version for SharePoint 2013 below. I have also added a second if statement to distinguish between dynamic sub menus.

var hoverMenuItems = document.getElementsByTagName('li');
for (x = 0; x < hoverMenuItems.length; x ++) {
    if (hoverMenuItems[x].className.indexOf('static dynamic-children') != -1) {
        hoverMenuItems[x].tabIndex=-1;
        hoverMenuItems[x].onfocusin = function () {
            this.className = "static dynamic-children shown hover";
        }
        hoverMenuItems[x].onfocusout = function () {
            this.className = "static dynamic-children";
        }
    }
    if (hoverMenuItems[x].className.indexOf('dynamic dynamic-children') != -1) {
        hoverMenuItems[x].tabIndex=-1;
        hoverMenuItems[x].onfocusin = function () {
            this.className = "dynamic dynamic-children shown hover";
        }
        hoverMenuItems[x].onfocusout = function () {
            this.className = "dynamic dynamic-children";
        }
    }
}

@Leeland, if you ever did find a useful working solution for other browsers, I'd be interested to hear!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.