Push div to the right on opening menu using jQuery.

<style type="text/css">

.buttonMenu {
font-family:verdana;
font-weight:bold;
width:100%;
padding:10px;
background-color:rgba(0, 0, 0, 0.9);
border:0px;
color:white;
}

.buttonMenu:hover {
font-family: verdana;
font-weight: bold;
width: 100%;
padding: 10px;
background-color: rgba(0, 0, 0, 1);
border: 0px;
color: white;
}

.buttonMenu:focus {
outline: 0;
}

#showmenu {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
font-weight: bold;
padding: 5px;
padding-top: 25px;
padding-bottom: 25px;
background-color: black;
font-family: Arial;
color: white;
position: fixed;
top: 45%;
left:0;
border-width: 2px;
border-style: solid;
border-color: black;
border-left-width: 0;
}

#showmenu:hover {
color: black;
background-color: white;
}

#menu {
display: block;
border: 0;
border-right-width: 2px;
border-style: solid;
border-color: rgba(0, 0, 0, 1);
top: 0;
left: -302px;
height: 100%;
width: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
}

#accountDetails {
text-align: center;
font-family: verdana;
color: white;
padding: 15px;
height: 100px;
width: 270px;
background-color: rgba(0, 0, 0, 0.4);
}

#profilePic {
vertical-align: middle;
border-radius: 15px;
border-width: 4px;
border-style: solid;
border-color: rgba(25, 120, 0, 5);
}

.black {
background-color: black;
color: black;
height: 2px;
border: 0;
}

</style>

<script src="jquery-1.11.1.min.js"></script>

<div id="menu">
    <div id="accountDetails">
        <img id="profilePic" width="100px" height="100px" src="">Account name
</div>
    <hr class="black">
    <button class="buttonMenu">HOME</button>
    <button class="buttonMenu">Profile</button>
    <button class="buttonMenu">Friends</button>
    <button class="buttonMenu">Log out</button>
</div>

<div id="showmenu">M<br>E<br>N<br>U</div>

<script type="text/javascript">

    $(document).ready(function () {
        var cnt = 0;
        $('#showmenu').click(function () {
            if (cnt % 2 == 0) {
                $('#menu').animate({'left': '-2px'});
                $('#showmenu').animate({'left': '300px'});
            } else {
                $('#menu').animate({'left': '-302px'});
                $('#showmenu').animate({'left': '0px'});
            }
            cnt++;
        });
    });

</script>


Output :)

1)

2)