Question

我目前正在开发HTML和CSS项目。它需要某种导航菜单，我已经创建了它。单击按钮时菜单会打开，它应该从左侧滑入。现在我的问题是过渡不起作用，我不明白为什么。这是我第一次使用CSS过渡。

这是jsfiddle： http://jsfiddle.net/Lunaetic/tonqr3gx/（按钮的图像无法在那里显示并不重要）

这里是代码：

HTML

<div class="collapsibleList">
        <label for="box1"><img src="TOPBAR_Icon_Home.png" alt="Menu icon"/></label>
        <input type="checkbox" id="box1" />
        <ul class="menu">
            <li></li>
            <li>Menu item 1</li>
            <li>Menu item 2</li>
            <li>Menu item 3</li>
            <li>Menu item 4</li>
            <li>Menu item 5</li>
        </ul>
</div>

CSS

.menu{
    list-style-type: none;
    position: fixed;
    top: -16px;
    left: -300px;
    max-width: 300px;
    transition: left 1s ease;
    -webkit-transition: left .5s ease;
}

.menu li {
    font-family: Arial;
    font-size: 1.5em;
    font-weight: bold;
    padding: 10px;
    background-color: #ffd012;
    color: #000000;
    border-bottom: 1px solid #ffffff;
    padding-left: 55px;
    min-height: 25px;
}

.collapsibleList > input + * {
    display: none;
}

.collapsibleList > input:checked + * {
    display: block;
    left: -40px;
}

.collapsibleList > input {
    display: none;
}

.menu li:last-child {
    border-bottom-right-radius: 25px;
    border: none;
}

label {
    cursor: pointer;
    position: fixed;
    left: 10px;
    top: 10px;
    z-index: 2;
}

有人可以给我一个可能的解决方案，让菜单从左边滑入，并告诉我为什么我的尝试不起作用？

Answer 1

如果删除此

.collapsibleList > input + * {
    display: none;
}

菜单滑入。

如何创建转换以使某些内容滑入？

1 个答案: