1

我已经在谷歌上搜索了大约一个星期，但我找不到适用于所有三种浏览器的解决方案。我正在尝试找到一种使用跨平台 css 水平输出嵌套无序列表的方法。

我在这里做了一个模拟：http: //jsfiddle.net/gNqJb/如果您单击第 1 层和第 2 层块（菜单开始展开，因此您需要首先执行此操作），您将看到我想要的功能。这个想法是，如果您单击菜单标题，它将在标题旁边水平展开子菜单。此代码的问题在于子菜单位于列表项块 (<.li>) 之外。此外，它在 IE 中根本不起作用。在此示例中，名称中带有 * 的所有内容都是标题块。

因为我正在使用 Drupal，所以我被它的菜单卡住了，这些菜单的输出如下：

<ul class="menu">
    <li class="first expanded"><a href="#" class="active">Home</a>
        <ul class="menu">
            <li class="first last leaf"><a href="#" class="active">Test</a></li>
        </ul>
    </li>
    <li class="first expanded"><a href="#" class="active">Home</a>
        <ul class="menu">
            <li class="first last leaf"><a href="#" class="active">Test</a></li>
        </ul>
    </li>
    <li class="first expanded"><a href="#" class="active">Home</a>
        <ul class="menu">
            <li class="first last leaf"><a href="#" class="active">Test</a></li>
        </ul>
    </li>
    <li class="first expanded"><a href="#" class="active">Home</a>
        <ul class="menu">
            <li class="first last leaf"><a href="#" class="active">Test</a>
                <ul class="menu">
                    <li class="first last leaf"><a href="#" class="active">Test</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="last leaf"><a href="#" class="active">Test Outside</a></li>
</ul>

当我对其应用格式时，我得到了这个：http: //jsfiddle.net/C2eU4/

我将不胜感激在使用 Drupal 修复此布局以在 IE/Chrome/FF 中使用的任何帮助。

提前感谢你们可以提供的任何帮助！

4

1 回答 1

0

好吧，我有一个纯 CSS 解决方案，至少可以让您了解它应该如何工作。需要注意的是，动画目前仅适用于 webkit 浏览器。

在这里提琴

以下是对 CSS 的相关更改：

li ul {
    width:0px;
    position: absolute;
    left:100%;
    top: -1px;
    overflow:hidden;
    -webkit-animation-name: slide;
   animation-name: slide;
   -webkit-animation-duration: .5s;
   animation-duration: .5s;
   -webkit-animation-timing-function: ease-in-out;
   animation-timing-function: ease-in-out;
   -webkit-animation-direction: reverse;
   animation-direction: reverse;
}
li + li{
   -webkit-animation-name: push;
   animation-name: push;
   -webkit-animation-duration: .5s;
   animation-duration: .5s;
   -webkit-animation-timing-function: ease-in-out;
   animation-timing-function: ease-in-out;
   -webkit-animation-direction: reverse;
   animation-direction: reverse;
}
li:hover ul {
   -webkit-animation-name: slide;
   animation-name: slide;
   -webkit-animation-duration: .5s;
   animation-duration: .5s;
   -webkit-animation-timing-function: ease-in-out;
   animation-timing-function: ease-in-out;
   -webkit-animation-direction: normal;
   animation-direction: normal;
   display:inline-block;
   width: 100px;
}
li:hover + li {
   -webkit-animation-name: push;
   animation-name: push;
   -webkit-animation-duration: .5s;
   animation-duration: .5s;
   -webkit-animation-timing-function: ease-in-out;
   animation-timing-function: ease-in-out;
   -webkit-animation-direction: normal;
   animation-direction: normal;
   margin-left: 100px;
}
@-webkit-keyframes slide{
   from {
     width: 0px;  
    }
   to {
     width: 100px;  
    }
}
@-webkit-keyframes push{
   from {
     margin-left:0px;}
   to {
     margin-left:100px;}
   }
}

编辑：

好吧，我继续为 jQuery 做了这件事。缓慢的一天，我猜：

在这里提琴

于 2013-03-07T21:04:50.140 回答