0

请看一下JSFiddle 示例。

我想在右侧制作带有关闭“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();
    });
});

有2个问题：

  • li 项目没有正确溢出其中的文本；

  • [x] 元素在菜单下，而不是在它的右侧；

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

重要的是不应该有任何硬编码值。正确的值只有 %。那是因为它应该在不同的浏览器尺寸上看起来不错。

任何想法如何解决这些问题？

4

1 回答 1

0

你应该看看CSS Box 模型。填充、边框和边距始终添加到元素的宽度/高度，并且不包含在您定义的宽度中。您的浮动 X 正在向下跳，因为 . 右侧没有 20% 的空间ul。

最好将 X 放在 div 之外。你也可以省略所有的浮动。设置position: absolutediv.close 并使用 将其移到容器边界之外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，这不是很灵活。

于 2013-01-28T16:46:12.330 回答