Question

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

我已经模拟了我在这里尝试做的事情：http://jsfiddle.net/gNqJb/如果你点击Tier1和Tier 2块（菜单开始展开，那么你需要这样做首先），你会看到我想要的功能。我们的想法是，如果您单击菜单标题，它将在标题旁边水平扩展子菜单。该代码的问题在于子菜单被放置在列表项块（＆lt; .li＆gt;）之外。此外，它根本不适用于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中使用。

提前感谢你们给予的任何帮助！

Answer 1

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

Fiddle here

以下是对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做了这件事。我想是缓慢的一天：

Fiddle here

解开嵌套的无序列表并在IE / Chrome / FF中水平显示

1 个答案: