how do I make my submenu position dynamic based on the distance to the edge of the window?
- by Mario Antoci
I'm trying to write a jQuery script that will find the distance to the right edge of the browser window from my css class element and then position the child submenu dropdowns to the right or left depending on the available space to the right. Also it needs to revert to the default settings on hoverout. Here is what I have so far but it's not calculating properly.
$(document).ready(function(){
$('#dnnMenu .subLevel').hover(function(){
if ($(window).width() - $('#dnnMenu .subLevel').offset().left - '540' >= '270')
{
$('#dnnMenu .subLevelRight').css('left', '270px');}
else {$('#dnnMenu .subLevelRight').css('left', '-270px');}
});
$(document).ready(function () {
function HoverOver() {
$(this).addClass('hover');
}
function HoverOut() {
$(this).removeClass('hover');
}
var config = {
sensitivity: 2,
interval: 100,
over: HoverOver,
timeout: 100,
out: HoverOut
};
$("#dnnMenu .topLevel > li.haschild").hoverIntent(config);
$(".subLevel li.haschild").hover(HoverOver, HoverOut);
});
Basically I tried to take the width of the current window, minus the distance to the left edge of the browser of the first level submenu, minus the width of both elements together which would equal 540px, to calculate the distance to the right edge of the window when the first level submenu is hovered over. if the distance to the right of my first level submenu element is less than 540px then the second level sub menu css property is changed to position to the left instead of right. I also know that it needs to revert back to default after hover out so it can recalculate the distance from other positions within the menu structure and still have those second level submenus with enough room to still display on the right of the first level. here is css for the elements in question.
#dnnMenu .subLevel{
display: none;
position: absolute;
margin: 0;
z-index: 1210;
background: #639ec8;
text-transform: none;}
#dnnMenu .subLevelRight{
position: absolute;
display: none;
left: 270px;
top: 0px;}
The site's not live yet and I tried to create a jsfiddle but it doesn't look right. Any help would be greatly appreciated!
Best Regards,
Mario
