Infragistics WebDataMenu control for ASP.NET has a neat feature: if items for horizontal menu don’t fit in allocated width – it automatically adds scroll buttons:

Unfortunately this works only if you set menu width in ASPX markup or server-side code. But what if menu is built dynamically and you don’t know in advance how many items there will be. Or if user resizes browser window and available width changes?

We need to be able to set menu width in client-side JavaScript code. Also we need to check whether all items fit into menu width and if not – enable scroll buttons – on demand. The code below does just that.

function adjustMenuWidth() {
	/// <summary>
	/// Sets horizontal menu width with scrolling if needed
	/// </summary>

    //getting reference to menu DOM elements
    var oMenuOuterDiv = $get('xmyMenu');
    var oMenuInnerDiv = oMenuOuterDiv.children[1];
    var oMenuRightScroll = oMenuInnerDiv.children[2];

    //calculating width available to menu
    var iMenuAvailWidth = document.documentElement.offsetWidth;
    
    // if real menu width is wider than available screen width - resize the menu
    if (oMenuInnerDiv.offsetWidth > iMenuAvailWidth) {
        
        //Resizing outer DIV
        oMenuOuterDiv.style.width = iMenuAvailWidth + 'px';

        //Resizing inner DIV ans showing Right Scroll button
        //Need to do this on setTimeout because Infragistics code
        //runs after this and overwrites the values otherwise
        setTimeout(function () {
            oMenuInnerDiv.style.width = iMenuAvailWidth + 'px';
            oMenuRightScroll.style.display = '';
        }, 500);
        
    }
}

The idea here is to emulate what happens when you set menu width server side or in ASPX markup. When menu is generated in that mode – resulting HTML gives the inner and outer DIVs of the menu the set width – and this is what we’re doing here in JavaScript code. The code checks width available to menu (full window width in the example above, but it can also be calculated) and then compares it to real menu width width all elements rendered. If the menu is wider, it gets shortened to available width and scrol button is made visible.

A call to this function can be placed in Menu Init and/or Window resize event.