8

假设菜单具有以下结构：

<li class="parent-of-all"><a href="">Parent</a>
    <ul class="sub-menu level-0">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a>
            <ul class="sub-menu level-1">
                <li><a href="">Item 1.1</a></li>
                <li><a href="">Item 1.2</a></li>
                <li><a href="">Item 1.3</a>
                    <ul class="sub-menu level-2">
                        <li><a href="">Item 2.1</a></li>
                        <li><a href="">Item 2.2</a>
                            <ul class="sub-menu level-3">
                                <li><a href="">Item 3.1</a></li>
                                <li><a href="">Item 3.2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>

这就是样式化时的样子（请注意嵌套的子菜单是position: absolute; left: 100%;）。

在此处输入图像描述

现在的问题是 - 我可以避免它被推离屏幕吗？我正在寻找 Windows7 菜单使用的解决方案（它们永远不会离开屏幕）。有一些简单的 Javascript 检查吗？我认为这样做left: -100%;会起作用，但在什么条件下？我只需要一些想法，我可以用 Javascript 编写代码 :)

4

3 回答 3

2

据我所知，没有办法只用 CSS 来做这个检查。您将不得不使用 javascript。最直接的方法是将鼠标悬停/鼠标悬停（或悬停，如果您使用 jquery）绑定到项目，然后将元素 x-offset + width 与窗口宽度进行比较。

于 2012-10-29T10:38:13.640 回答
2

使用纯 CSS 解决方案，您可以随时更改子菜单的位置。当第一个被放置在其父级的右侧时，以下（第三个）子菜单可以位于左侧，依此类推。也许你甚至可以使用:nth-child-selector 来做到这一点。

之后，您可以为更宽的屏幕创建例外，只需从第 n 个子菜单开始交替左侧位置（使用 CSS 媒体查询）。

于 2012-10-29T12:09:13.570 回答
0

不，您需要使用 JavaScript 来计算位置

于 2012-10-29T10:39:57.963 回答