Forging layout using Bootstrap. There was a need to do so that the sideebar on the left (a screenshot was attached) in the mobile version was hidden and it could be made departing by pressing a button or finally by swiping the screen from the edge. Please tell me how to implement it? enter image description here

  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

Not bootstrap, but I think it will not be difficult for him to do it:

$('.menu_icon, .close').on('click', function(){ $('.menu-mobile--itself').toggleClass('show') }) 
 * { box-sizing: border-box; } body { font-family: "Open Sans", sans-serif; } .wrapper { border: 1px solid #333; margin: 30px auto; max-width: 768px; width: 100%; height: 768px; padding: 10px; position: relative; overflow: hidden; } .menu-mobile--itself { position: absolute; padding: 30px; background-color: #333; width: 50%; height: 100%; top: 0; right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: cubic-bezier(0.52, 0.26, 0, 0.92) 0.5s; transition: cubic-bezier(0.52, 0.26, 0, 0.92) 0.5s; color: #fff; } .menu-mobile--itself.show { -webkit-transform: translateX(0); transform: translateX(0); } .menu-mobile--itself .close { position: absolute; top: 15px; right: 15px; font-size: 22px; color: #fff; cursor: pointer; } .menu_block { border: 1px solid #f2f2f2; display: table; width: 100%; } .menu_block .logo, .menu_block .menu_icon { display: table-cell; width: 50%; vertical-align: middle; } .menu_block .logo { padding: 10px; } .menu_block .logo img { max-width: 200px; width: 100%; vertical-align: middle; } .menu_block .menu_icon { font-size: 32px; text-align: right; padding: 0 30px; -webkit-transition: 500ms; transition: 500ms; cursor: pointer; } .menu_block .menu_icon:hover { color: #727272; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet"> <div class="wrapper"> <div class="menu-mobile--itself"> <div class="close"> <i class="fa fa-times-circle" aria-hidden="true"></i> </div> <ul> <li>Option #1</li> <li>Option #2</li> <li>Option #3</li> <li>Option #4</li> <li>Option #5</li> </ul> </div> <div class="menu_block"> <div class="image-block logo"> <img src="http://www.juggcash.com/images/hd_tools/default_logo.png" alt="" /> </div> <div class="menu_icon"> <i class="fa fa-bars" aria-hidden="true"></i> </div> </div> </div>