100% jqxMenu

by Chris99

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="outer">
    <div id="menu1">
        <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Cherry Pie</li>
        </ul>
    </div>   
    <div id="menu2">
        <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Cherry</li>
        </ul>
    </div>   
</div>
<button id="noWidthButton">No CSS Width</button>
<button id="widthButton">100% CSS Width</button>

CSS

#outer { width:400px; height:400px; background-color:#777799; border:1px solid #000000; }
#menu1, #menu2 { display:none; }
#menu2 { width:100%; }
#menu1 li, #menu2 li { height: 20px; line-height: 20px !important; white-space:nowrap; }

JavaScript

var theme = "eneryblue";

$("#noWidthButton").jqxButton({theme:theme});
$("#widthButton").jqxButton({theme:theme});

$("#menu1").jqxMenu({
	theme: theme,
	autoOpen: false,
	autoOpenPopup: false,
	autoCloseOnClick: true,
	animationShowDelay: 10,
	animationShowDuration: 10,
	animationHideDuration: 10,
	mode: 'popup'
});

$("#menu2").jqxMenu({
	theme: theme,
	autoOpen: false,
	autoOpenPopup: false,
	autoCloseOnClick: true,
	animationShowDelay: 10,
	animationShowDuration: 10,
	animationHideDuration: 10,
	mode: 'popup'
});

$('#noWidthButton').on('click', showNoWidthMenu);
$('#widthButton').on('click', showWidthMenu);

function showNoWidthMenu(){
    showMenu('#menu1');
}

function showWidthMenu(){
    showMenu('#menu2');
}

function showMenu(menuId) {
    if ($(menuId).css('display') === 'none') {
		var x = $("#outer").width() - $(menuId).width();
		var y = $("#outer").height() - $(menuId).height();

		console.log("More: x=(" + $("#outer").width() + "-" + $(menuId).width() + ")=" + x + " y=(" + $("#outer").height() + "-" + $(menuId).height() + ")=" + y);

		$(menuId).jqxMenu('open', x, y);
	}
}