Question

我尝试使用（对我而言）“新”css3来制作一个小测试菜单时遇到问题。菜单应位于页脚中，该页脚始终位于View端口的底部。但是，我想讨论css3提供的过渡效果，因此当你:hover时，我希望增加一个菜单点。

相对菜单div中的菜单点设置为float:left。转换按预期进行，除了高度转换将元素向下扩展并且（显然就像页脚一样）从页面中扩展。
相反，我希望菜单点向上增长。要解决此问题，我可以将float:left更改为position:absolute并添加bottom:0，但我必须手动水平定位每个菜单点（超链接），我希望避免。由于菜单大小（菜单点数）应该是可变的，我也不想使用和JavaScript，我很无能。

这是css和html：

<div id="footer">
    <div class="menu">
        <a href="#">menp1</a>
        <a href="#">menp2</a>
        <a href="#">menp3</a>
        <a href="#">menp4</a>
        <a href="#">menp5</a>
        <a href="#">menp6</a>
    </div>
</div>

和css：

#footer {
  position: absolute;
  background-color: #497044;
  bottom: 0px;
  width: 100%;
  height: 45px;
  padding: 5px; }

div.menu {
  position: relative;
  height: 45px;
  width: 480px;
  left: 50%;
  margin-left: -240px; }

div.menu a {
  float:left;
  width: 80px;
  height: 50px;
  border: 3px dashed;
  margin-left: 5px;
  text-align: center;
  -moz-transition: height 2s; }
div.menu a:hover {
  background-color: white;
  height: 100px; }

感谢您的建议！

Answer 1

http://jsfiddle.net/nqCgu/2/

你的意思是这样的吗？

您可以使用负的保证金最高值和保证金最高转换来实现此目的。添加：

div.menu { ...
transition: margin-top .2s;
-moz-transition: margin-top .2s;}

div.menu a:hover {
margin-top:-50px;
background-color:white;
height: 100px; }

css页脚菜单转换

1 个答案: