Как открыть меню offcanva с сайта

ul,li{
  list-style:none;
  padding:0px;
  margin:0px;
  }
  
  #yourMenu{
    border:1px solid #000;
    height:200px;
    width:30%;
   }
   #yourMenu>li{
     width:100%;
     padding:5px;
     background-color:blue;
     box-sizing:border-box;
     color:#fff;
    }
    #yourMenu>li:hover{
     cursor:pointer;
     background-color:red;
   
    }

<ul id = "yourMenu">
  <li>menu 1</li>
  <li>menu 2</li>
  <li>menu 3</li>
</ul>