Soldan Kayan menü yapımı

HTML

<input type="checkbox" name="" id="l1">

<div class="ana">

    <label for="l1" class="l1">&#9776;</label>

    <div class="icerik">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptate dolorem
    </div>



    <nav class="menu" id="ac">
        <ul>
            <li>Ana Sayfa</li>
            <li>Hakkımızda</li>
            <li>İletişim</li>
            <li>Sayfalar</li>
            <li>Bize Yazın</li>
        </ul>
    </nav>   

</div>

-----------------
CSS
.icerik{
    width: 580px;
    margin: 0 auto;
    z-index: 0;
    position: relative;
    transition: all .3s ease;
    position: relative;
}
.menu{
    position: fixed;
    width: 120px;
    background: #000;
    z-index: 0;
    height: 100%;
    top: 0;
    left: -120px;
    transition: all .5s ease-in;
}
.menu ul{
    margin: 0;
    padding: 0;
}
.menu ul li{
    list-style: none;
    color: white;
}
.l1{
    text-decoration: none;
    font-size: 30px;
    position: fixed;
    top: 0;
    left: 40px;
    cursor: pointer;
    transition: all .5s ease-in;
}
input[type="checkbox"]{
    display: none;
}
input[type="checkbox"]:checked + .ana .menu{
    left: 0px;
}
input[type="checkbox"]:checked + .ana .l1{
    left: 140px;
}
input[type="checkbox"]:checked + .ana .icerik{
    padding-left: 50px;
}