Question

我正在使用右对齐导航构建网站。

最后一个菜单项下拉菜单离开页面，因为它位于父页面左侧的绝对位置。

我正在尝试为下面的菜单创建一个解决方案。

jsfiddle - http://jsfiddle.net/ashconnolly/6gjVr/

我无法对pos左-xx样式进行硬编码，因为最后一个菜单项的宽度会有所不同（由于其中的文本），因此我使用了js。我几乎破解了它，但我只需要在悬停时将变量应用为绝对左侧的位置。可能有更好的css解决方案，但我找不到。

任何帮助表示赞赏！：d

编辑：更新说明。

Answer 1

您已经计算了最后一个菜单的左侧，为什么没有使用？

$(document).ready(function () {
var menuitemwidth = document.getElementById("last-menu-item").offsetWidth;
var menuitemdropdownwidth = document.getElementById("last-menu-item-drop-down").offsetWidth;
//alert(menuitemwidth);
var leftval = menuitemdropdownwidth - menuitemwidth;
//alert(leftval);
    $("#last-menu-item").mouseenter(function(){
        $("#last-menu-item-drop-down").css({'position':'absolute','left':'-'+leftval+'px','display':'block'});
    });
    $("#last-menu-item").mouseleave(function(){
        $("#last-menu-item-drop-down").css({'display':'none'});
    });

});

Check Here

Answer 2

正如您可能已经知道的那样，＆＃34; print＆＃34;使用框架的javascript值。它很快就会变得无法维持。

但是可以将（元素）逻辑与（元素）表示分开，即通过在html中设置data-attribute这样的模板中的打印/格式化html元素：

<ul id="last-menu-item-drop-down" data-pos="left" data-val="-133px">

然后将您的javascript更改为：

// cache last element, no need to jquery search on every hover
var last_elem = $("#last-menu-item-drop-down");

// set position and alignment
last_elem.css('position','absolute').css(last_elem.data("pos"), last_elem.data("val"));

// set dropdown meny visibility to hidden (do it by css)
last_elem.hide()

// show/hide
// ...

您还可以在javascript中执行偏移计算，并仅在模板中指定位置

小提琴：http://jsfiddle.net/cYsp6/7/

Answer 3

我不能用css

$("#last-menu-item").mouseenter(function(){
var a=-(parseInt($("#last-menu-item-drop-down").css('width'))-parseInt($("#last-menu-item").css('width')));
 $("#last-menu-item-drop-down").css('position','absolute').css('left',a);
 $("#last-menu-item-drop-down").show();
});
$("#last-menu-item").mouseleave(function(){
   $("#last-menu-item-drop-down").hide();
});

更新小提琴：

Fiddle

使用JavaScript / jQuery应用位置绝对样式

3 个答案: