Menu Samping / Sidebar

Membuat sidebar dengan CSS dan Javascript.

HTML :

 <div id="c_nav">
                   
                        <button onclick="c_hidenav()">&times;</button>
                        <a href="#">Home</a>
                        <a href="#">Register</a>
                        <a href="#">Profile</a>
                        <a href="#">Info</a>
                   
                </div><!-- e o nav -->
                <div id="main">
                    <button onclick="c_shownav()">Tampil_M</button>
                    stuffss
                </div>

.
Javascript :

 function c_hidenav(){
                    document.getElementById("c_nav").style.width="0";
                    document.getElementById("main").style.marginLeft="0";
                }
                 function c_shownav(){
                   
                    document.getElementById("c_nav").style.width="250px";
                    document.getElementById("main").style.marginLeft="250px";
                }

.
CSS :

/*css*/
#c_nav{
    top: 0px;
    left: 0px;
    width: 250px;
    background: #222;
    height: 100%;
    position: fixed;
    transition: 0.3s;
    overflow:hidden;
}
#c_nav a{
    display: block;
}
#main{
    margin-left: 250px;
    transition: margin-left .5s;
    padding: 20px;
}

.
Hasil :

Home Register Profile Info

isinya...................................aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaazzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzxxxxxxxxxxxxxxxxxxxxxxxxxxhhhhhhhhhhhhhhhhhhhhh

.