展开嵌套无序列表和水平显示在IE/Chrome/FF

Unraveling nested unordered lists and displaying horizontally in IE/Chrome/FF

本文关键字：IE Chrome FF 显示 水平 嵌套 无序 列表      更新时间：2023-09-26

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

我已经把我在这里尝试做的模拟放在一起:http://jsfiddle.net/gNqJb/如果您单击Tier1和tier2块(菜单开始展开，所以您需要先这样做)，您将看到我想要的功能。这个想法是，如果你点击一个菜单标题，它会水平展开标题旁边的子菜单。这段代码的问题在于子菜单被放置在列表项块(<.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/

我将非常感谢任何帮助在得到这个布局固定使用在IE/Chrome/FF与Drupal。

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

好吧，我有一个纯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做了这个。我想今天是懒散的一天。

这里的

小提琴

相关文章：