Question

.header {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:50px;
        z-index:2
}    
.menu ul {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        -webkit-transform:translateY(-100%);
        -moz-transform:translateY(-100%);
        transform:translateY(-50%);
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

    .menu ul.is-visible {
        -webkit-transform:translateY(50px);
        -moz-transform:translateY(50px);
        transform:translateY(50px)
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

以上是我用来使用过渡元素切换菜单打开/关闭的CSS，用于向下滑动/向上滑动效果。

目前菜单从标题顶部滑动;是否有可能从顶部50px的标题底部滑动？

我仍在努力学习如何使用转换，所以我们非常感谢任何建议。

谢谢！

Answer 1

这是你想要的吗？

DEMO

你没有提供你的标记，所以我不得不猜。基本上，如果你将li文本包装在一个范围内并给它一个背景颜色以匹配标题的颜色（导航栏），你可以在菜单落到位时使其模糊。

另外，我没有为浮动和绝对定位而烦恼。同样，我没有看到你的实际标记的好处，但是完成这个特定的布局是不必要的。

<强> HTML：

<header>
    <ul class="menu">
        <li><span>Menu Item 1</span>
            <ul>
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
                <li><a href="#">Submenu Item 3</a></li>
                <li><a href="#">Submenu Item 4</a></li>
                <li><a href="#">Submenu Item 5</a></li>
            </ul>
        </li>
        <li><span>Menu Item 2</span>
            <ul>
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
            </ul>
        </li>
        <li><a href="">Menu Item 3</a></li>
        <li><span>Menu Item 4</span>
            <ul>
                <li><a href="#">Submenu Item 1</a></li>
            </ul>
        </li>        
    </ul>
</header>

<强> CSS：

header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:50px;
    background-color: yellowgreen;
    font-family: sans-serif;
}
a {
    color: yellowgreen;
    text-decoration: none;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.menu > li {
    float: left;
    line-height: 50px;
    text-align: center;
    color: white;
    width: 150px;
}
li span {
    height: 50px;
    width: 100%;
    display: block;
    background-color: yellowgreen;
    position: relative;
    z-index: 100;
    cursor:pointer;
}
ul.menu > li > a {
    color: white;
}
li > ul {
    background-color: white;
    color: yellowgreen;
    text-align: left;
    -webkit-transform:translateY(-200%);
    -moz-transform:translateY(-200%);
    transform:translateY(-100%);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
li > ul > li {
    border: 1px solid yellowgreen;
    border-top: none;
    padding: 0 10px;    
}
li:hover ul {
    opacity: 1;
    -webkit-transform:translateY(0px);
    -moz-transform:translateY(0px);
    transform:translateY(0px) -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

Answer 2

尚未发表评论，但您是否尝试将100px而非50px放在此处：

-webkit-transform:translateY(50px);
        -moz-transform:translateY(50px);
        transform:translateY(50px)

让我知道它是怎么回事，我会调查记住怎么做！很长一段时间以来我都没有使用它！

<强>更新

试试这个：

.menu ul {
        position:absolute;
        top:50px;
        left:0;
        width:100%;
        -webkit-transform:translateY(-100%);
        -moz-transform:translateY(-100%);
        transform:translateY(-50%);
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

将顶部设置为50px，应该从顶部移动菜单50px，因此它将从标题的底部开始向下滚动。

如果没有，请尝试使用jQuery。设置完全向下滚动时所需的菜单，然后使用hide()隐藏它。然后在一个简单的click()函数中设置你希望它具有的效果（淡入淡出，滚动等），然后用show()显示它。

如果您需要更详细的jQuery代码，请告诉我并为您编写。祝好运！ ;）

<强> UPDATE2：

我用jQuery做了一个小提琴示例（非常基本）：

http://jsfiddle.net/3DvVL/1/

jQuery效果的速度设置为800，你可以修改它。与效果本身相同。我拿的按钮也是为了快速演示，只要你通过jQuery中的名字，ID或类来指出它，你就可以随心所欲。

Answer 3

首先：.menu ul.is-visible已经过了＆＃34;过渡＆＃34;属性继承自.menu ul，因此您不必再次设置它。其次，尝试将top的{{1}}属性设置为50px，但没有转换（因此您无法使用.menu ul.is-visible，但例如transition: all t）

编辑：如果你可以把你的代码放在jsFiddle上，我会非常高兴。

更新：

DEMO

我已设法通过将transition: transform t的副本放入.menu ul之前放置的新div.menu元素并将两者都置于新{{1}中来解决此问题。 }}。它有效，但我相信它可以更轻松。

CSS3过渡向下滑动/向上滑动

3 个答案:

DEMO