如何根據到窗口邊緣的距離使我的子菜單位置動態？

我想寫一個jQuery腳本，它會從我的CSS類元素中找到到瀏覽器窗口右邊緣的距離，然後根據右側的可用空間將子菜單下拉菜單定位到右側或左側。還需要恢復到overout的默認設置。這是我迄今爲止的，但它沒有正確計算。如何根據到窗口邊緣的距離使我的子菜單位置動態？

$(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); 

    });

基本上我試圖採取當前窗口的寬度，減去到第一電平的子菜單的瀏覽器的左邊緣的距離，再減去兩個元件一起的寬度將等於540px，以計算當第一級子菜單懸停時，距窗口右邊緣的距離。如果我的第一級子菜單元素右側的距離小於540px，則第二級子菜單css屬性將更改爲左側而不是右側。我也知道，鼠標懸停後需要恢復默認設置，以便重新計算菜單結構中其他位置的距離，並且仍然有足夠空間的第二級子菜單仍然顯示在第一級的右側。這裏是問題的元素的CSS。

#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;}

該網站還沒有生活，我試圖創建一個jsfiddle，但它看起來不正確。任何幫助將不勝感激！

最好的問候，馬里奧

來源

2012-08-24 Mario Antoci

我想了解更多關於W3C上css hierachy和position屬性的信息。有很多事情可以避免你從這件作品中獲得，而且有很多網站對此有很大的幫助。我不認爲你會找到確切的答案。也許你需要訪問Code Review堆棧交換站點 –

以及我不知道.offset（）。剩下的事情就是它測量的是沒有幫助我的父元素。我能夠通過爲每個菜單項創建2px高透明div id來實現這一目標。由於必須跨越它們才能進入子菜單，因此可以計算到瀏覽器窗口邊緣的距離。 –

這裏是jQuery的我寫的解決我的問題。

$(document).ready(function() { 
$('#dnnMenu').mouseout(function() { 

    if ((viewportRight - myRight) >= '540') { 
     $('#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); 
}); 
    $(document).ready(function() { 
$('#position1').mouseout(function() { 
    var myLeft = $("#position1").offset().left; 
    var myTop = $("#position1").offset().top; 
    var myRight = myLeft + $("#position1").outerWidth(); 
    var myBottom = myTop + $("#position1").outerHeight(); 
    var viewportRight = $(window).width() + $(window).scrollLeft(); 
    var viewportBottom = $(window).height() + $(window).scrollTop(); 
    if ((viewportRight - myRight) >= '400') { 
     $('#dnnMenu .subLevelRight').css('left', '270px'); 
    } 

    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); } 
    }); 
}); 
    $(document).ready(function() { 
$('#position2').mouseout(function() { 
    var myLeft = $("#position2").offset().left; 
    var myTop = $("#position2").offset().top; 
    var myRight = myLeft + $("#position2").outerWidth(); 
    var myBottom = myTop + $("#position2").outerHeight(); 
    var viewportRight = $(window).width() + $(window).scrollLeft(); 
    var viewportBottom = $(window).height() + $(window).scrollTop(); 
    if ((viewportRight - myRight) >= '400') { 
     $('#dnnMenu .subLevelRight').css('left', '270px'); 
    } 

    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); } 
    }); 
}); 
    $(document).ready(function() { 
$('#position3').mouseout(function() { 
    var myLeft = $("#position3").offset().left; 
    var myTop = $("#position3").offset().top; 
    var myRight = myLeft + $("#position3").outerWidth(); 
    var myBottom = myTop + $("#position3").outerHeight(); 
    var viewportRight = $(window).width() + $(window).scrollLeft(); 
    var viewportBottom = $(window).height() + $(window).scrollTop(); 
    if ((viewportRight - myRight) >= '400') { 
     $('#dnnMenu .subLevelRight').css('left', '270px'); 
    } 

    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); } 
    }); 
}); 
    $(document).ready(function() { 
$('#position4').mouseout(function() { 
    var myLeft = $("#position4").offset().left; 
    var myTop = $("#position4").offset().top; 
    var myRight = myLeft + $("#position4").outerWidth(); 
    var myBottom = myTop + $("#position4").outerHeight(); 
    var viewportRight = $(window).width() + $(window).scrollLeft(); 
    var viewportBottom = $(window).height() + $(window).scrollTop(); 
    if ((viewportRight - myRight) >= '400') { 
     $('#dnnMenu .subLevelRight').css('left', '270px'); 
    } 

    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); } 
    }); 
}); 
    $(document).ready(function() { 
$('#position5').mouseout(function() { 
    var myLeft = $("#position5").offset().left; 
    var myTop = $("#position5").offset().top; 
    var myRight = myLeft + $("#position5").outerWidth(); 
    var myBottom = myTop + $("#position5").outerHeight(); 
    var viewportRight = $(window).width() + $(window).scrollLeft(); 
    var viewportBottom = $(window).height() + $(window).scrollTop(); 
    if ((viewportRight - myRight) >= '400') { 
     $('#dnnMenu .subLevelRight').css('left', '270px'); 
    } 

    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); } 
    }); 
}); 
    $(document).ready(function() { 
$('#position6').mouseout(function() { 
    var myLeft = $("#position6").offset().left; 
    var myTop = $("#position6").offset().top; 
    var myRight = myLeft + $("#position6").outerWidth(); 
    var myBottom = myTop + $("#position6").outerHeight(); 
    var viewportRight = $(window).width() + $(window).scrollLeft(); 
    var viewportBottom = $(window).height() + $(window).scrollTop(); 
    if ((viewportRight - myRight) >= '400') { 
     $('#dnnMenu .subLevelRight').css('left', '270px'); 
    } 

    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); } 
    }); 
}); 
    $(document).ready(function() { 
$('#position7').mouseout(function() { 
    var myLeft = $("#position7").offset().left; 
    var myTop = $("#position7").offset().top; 
    var myRight = myLeft + $("#position7").outerWidth(); 
    var myBottom = myTop + $("#position7").outerHeight(); 
    var viewportRight = $(window).width() + $(window).scrollLeft(); 
    var viewportBottom = $(window).height() + $(window).scrollTop(); 
    if ((viewportRight - myRight) >= '400') { 
     $('#dnnMenu .subLevelRight').css('left', '270px'); 
    } 
    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); } 
    }); 
});

這裏是CSS

#position1{ 
background:transparent no-repeat; 
width:110px; 
height:2px; 
margin-left:15px; 
margin-top:-2px; 
position:absolute;} 
    #position2{ 
background:transparent no-repeat; 
width:118px; 
height:2px; 
margin-left:127px; 
margin-top:-2px; 
position:absolute;} 
#position3{ 
background:transparent no-repeat; 
width:153px; 
height:2px; 
margin-left:247px; 
margin-top:-2px; 
position:absolute;} 
#position4{ 
background:transparent no-repeat; 
width:178px; 
height:2px; 
margin-left:402px; 
margin-top:-2px; 
position:absolute;} 
#position5{ 
background:transparent no-repeat; 
width:213px; 
height:2px; 
margin-left:582px; 
margin-top:-2px; 
position:absolute;} 
#position6{ 
background:transparent no-repeat; 
width:106px; 
height:2px; 
margin-left:797px; 
margin-top:-2px; 
position:absolute;} 
#position7{ 
background:transparent no-repeat; 
width:78px; 
height:2px; 
margin-left:905px; 
margin-top:-2px; 
position:absolute;}

我說是唯一的其他東西的DIV ID的直接下的HTML我的其他菜單項

<div id="position1"></div><div id="position2"></div><div id="position3"></div><div id="position4"></div><div id="position5"></div><div id="position6"></div><div id="position7"></div>

它的工作原理只是不知道如果一切都寫得完美。如果你可以看到錯誤的東西，請讓我知道，這樣我就可以清理我的代碼。

來源

2012-08-30 21:36:35

如何根據到窗口邊緣的距離使我的子菜單位置動態？

回答

相關問題