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

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 文本包裹在一个 span 中并为其指定背景颜色以匹配标题(导航栏)的颜色，您可以在菜单就位时遮盖住菜单。

此外，我没有为 float 定位和绝对定位操心。同样，我没有看到您的实际标记，但完成此特定布局不需要它。

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;
}

<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>