CSS3过渡效果：下拉元素

Question

CSS3过渡效果：下拉元素

5

我正在尝试重新创建类似于《僵尸世界大战》电影网站上的菜单效果，但我似乎无法正确地使用CSS过渡。我已经让悬停元素显示了隐藏块，但CSS过渡不起作用。我正在尝试获得一个酷效果，可以从顶部或底部滑动，我没有具体的偏好。此外，如果我试图在任何链接上悬停，子菜单就会在我点击之前消失。这里是Fiddle。 HTML:

    <ul id="menutitle">Menu Title</ul>
        <ul id="submenu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>
</nav>

CSS：

#topmenu {
    background: #000; 
    width: 150px;
    height: 50px;
    color: #fff; 
}

#submenu {
    display: block;
    position: absolute;
    width: 110px;
    display: none;
    background: #333;
    list-style: none;
    line-height: 2em; 
}

#menutitle:hover + #submenu {
     display: block; 
    -webkit-transition: height 1s ease;
    -moz-transition: ease-in 2s none;
    -ms-transition: ease-in  2s none;
    -o-transition: ease-in  2s none;
    transition: ease-in  2s none;  
}

#menutitle { color: #ff0000; }

a { color: #FF0; }

- RomeNYRR

我正在处理这个问题，但是你的HTML结构不正确。 - Josh Powell

@JoshPowell他的小提琴有起始导航元素，但ul元素很好-制表符只是不一致的。 - Katana314

2

@Katana314，ul不正确，因为除了li之外，ul中不能包含任何内容。这一行<ul id="menutitle">Menu Title</ul>需要更改为<ul id="menutitle"><li>Menu Title</li></ul>才能成为有效的HTML。 - Josh Powell

2

@JoshPowell 啊，你真是发现了一个好问题。我并没有考虑到这一点，因为浏览器似乎仍然可以正常渲染它。 - Katana314

1

它可能不是问题的根源，但它可能会在项目后期引起很多问题。：] - Josh Powell

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Katana314 · Accepted Answer

一些事情：

您的:hover选择器应该在#topmenu元素上，而不是标题上。这就是为什么导航区域会突然消失的原因 - 只需将鼠标悬停在菜单文本上即可。

您可能对动画属性定义有些误解。您需要选择一个特定的属性进行动画处理；通常是像“高度”这样的东西。在这种情况下，我的解决方案是设置“最大高度”。可能有一些方法可以将高度设置为“自动”之类的东西，但如果是这样的话，我就不知道了。

此外，“过渡”属性始终在对象上设置 - 不仅仅是“悬停时”。它是一种常态，表示“当此属性发生变化时，请平稳过渡”。这样，您可以拥有一系列不同的状态，给出不同的高度。

http://jsfiddle.net/8YHbq/4/

#topmenu {background: #000; width: 150px; height: 50px; color: #fff; }

#submenu {display: block;
position: absolute;
width: 110px;
background: #333;
list-style: none;
line-height: 2em;
overflow: hidden;
    max-height:0;
    transition: max-height 0.7s ease-in; 
}

#topmenu:hover #submenu {
max-height: 200px;}

#menutitle {color: #ff0000;}
a {color: #FF0}

目前，我意识到我的版本存在一个问题，即由于最大高度动画效果达到200像素，导航菜单在达到200像素之前就已经完全展开，使得动画效果不够平滑。也许您可以根据自己的需求对此进行一些调整。