CODEWITHSUNDEEP
htmlcss
Lunaetic
Lunaetic

Reputation: 229

How do I create a transition to make something slide in?


I'm currently working on a project in HTML and CSS. It requires some kind of navigation menu, which I already created. The menu opens up on clicking a button and it should slide in from the left. Now my problem is that the transition does not work and I have no idea why. It's my first time working with CSS transitions.

Here's the jsfiddle: http://jsfiddle.net/Lunaetic/tonqr3gx/ (it's not important that the image of the button cannot be displayed there)

And here the code:

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

Could somebody give me a possible solution to make the menu slide in from the left and tell me why my attempt does not work?

Upvotes: 1

Views: 53

Answers (1)

Thorgeir
Thorgeir

Reputation: 4433

If you remove this 

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

the menu slides in.

Upvotes: 5

Related Questions