jquery - Bootstrap navbar slide from left -

i have navbar slide right, in https://evernote.com/

here code:

<nav class="navbar navbar-inverse" style="padding-top:20px;">     <div class="container">       <div class="navbar-header">         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">           <span class="sr-only">toggle navigation</span>           <span class="icon-bar"></span>           <span class="icon-bar"></span>           <span class="icon-bar"></span>         </button>         <a class="navbar-brand" href="#" style="padding:0px;"><img src="img/logo.png"></a>       </div>       <div id="navbar" class="collapse navbar-collapse" style="text-align:center; width:490px; font-size:35px;position:absolute; top:-10px; right:0">         <ul class="nav navbar-nav">           <li class="passivx" style="padding-top:20px; padding-bottom:20px; padding-right:30px; text-align:right;"><button data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" style="background-color:#3081c5; color:#fff; border:none;"><b>x</b></button></li>           <li class="active" id="activelink" style="padding-top:97px; "><a href="#">fŐoldal</a></li>           <li class="passiv" style="text-align:center;"><a href="#ref">referenciÁk<img src="img/line.png" style="padding-top:20px; "></a></li>           <li class="passiv"><a href="#rolunk">rÓlunk<img src="img/line.png" style="padding-top:20px; "></a></li>           <li class="passiv"><a href="#infokt">informatikai oktatÁs<img src="img/line.png" style="padding-top:20px; "></a></li>           <li class="passiv"><a href="#szatr">szakmai trÉningek<img src="img/line.png" style="padding-top:20px; "></a></li>           <li class="passiv"><a href="#feszo" style="height:155px; padding-top:30px;">felnŐttkÉpzÉsi <br><br><br><br> szolgÁltatÁsok<img src="img/line.png" style="padding-top:20px; "></a></li>           <li class="passiv"><a href="#dobedo">dobedu<img src="img/line.png" style="padding-top:20px; "></a></li>           <li class="passiv" ><a href="#contact">kapcsolat</a></li>         </ul>       </div><!--/.nav-collapse -->     </div>   </nav> 

however, menu appears top, , not right. how can able let appear right?

to want can find bootstrap extension here:

http://jasny.github.io/bootstrap/javascript/#offcanvas