Question

我想制作菜单，右边是关闭'x'。单击绿色div后弹出菜单。

HTML

<div class="field">
<nav id="menu">
    <ul>
        <li>Menu item 1</li>
        <li>Menu item 2</li>
        <li>Item 3</li>
    </ul>
    <div class="close">X</div>
</nav>

CSS

.field {
    background: green;
    width: 350px;
    height: 200px;
    margin: 10px auto;
    position: relative;
    cursor: pointer;
}
#menu {
    position: absolute;
    display: none;
}
#menu ul {
    width: 80%;
    border: 1px solid #999;
    float: left;
}
#menu li {
    background: #fff;
    padding: 5% 15%;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #999;
    white-space: nowrap;
}
#menu .close {
    background: #ccc;
    width: 20%;
    padding: 5%;
    float: right;
}

JS

（JS很乱，我写的很快）

$('.field').on('click', function (e) {

 var $pointer = $('#pointer'),
        $menu = $('#menu'),
        parentOffset = $(this).offset(),
        relX = e.pageX - parentOffset.left,
        relY = e.pageY - parentOffset.top,
        circleX = relX - ($pointer.outerWidth() / 2) + 1,
        circleY = relY - ($pointer.outerHeight() / 2) + 1;

    $pointer.css('left', circleX);
    $pointer.css('top', circleY);
    $pointer.show();

    $menu.css('left', circleX + $pointer.outerWidth());
    $menu.css('top', circleY);
    $menu.show();

    $menu.one('click', '.close', function (e) {
        $menu.hide();
        $pointer.hide();
        e.stopPropagation();
    });
});

有两个问题：

li项目内的文本没有正确溢出;
[x]元素位于菜单下，而不是右侧;

我尝试了其他类似问题中提出的不同组合，但没有任何作用，或者我累了，我错过了一些东西。

重要的是不应该有任何硬编码值。适当的值只是％。这是因为它应该在不同的borwser尺寸上看起来很好。

如何解决这些问题？

Answer 1

你应该看一下CSS Box model。填充，边框和边距始终添加到元素的宽度/高度，并且不包括在您定义的宽度中。您的浮动X正在向下跳跃，因为ul右侧不再有20％的空间。

最好把X放在你的div之外。你也可以省去所有花车。在div.close上设置position: absolute并使用left: 100%将其移出容器边界。

#menu {
    position: absolute;
    display: none;
}
#menu ul {
    border: 1px solid #999;
}
#menu li {
    background: #fff;
    padding: 5% 15%;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #999;
}
#menu .close {
    background: #ccc;
    width: 20%;
    padding: 5%;
    position: absolute;
    top: 0;
    left: 100%;
}

顺便说一句，white-space: nowrap会导致您的菜单元素的文本超出li的边界，这不是很灵活。

溢出结合绝对位置和浮点数

HTML

CSS

JS

1 个答案: