Запустить
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Демо navmenu с эффектом slide</title> <!-- Bootstrap --> <link href="/examples/vendors/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="/assets/demo/jasny-bootstrap/css/jasny-bootstrap.min.css" rel="stylesheet"> <style> html, body { height: 100%; } .navbar-toggle { float: left; margin-left: 15px; } .navmenu { z-index: 1; } .canvas { position: relative; left: 0; z-index: 2; min-height: 100%; padding: 50px 0 0 0; background: #fff; } @media (min-width: 0) { .navbar-toggle { display: block; /* force showing the toggle */ } } @media (min-width: 992px) { body { padding: 0; } .navbar { right: auto; background: none; border: none; } .canvas { padding: 0; } } </style> </head> <body> <div class="navmenu navmenu-default navmenu-fixed-left"> <a class="navmenu-brand" href="#">Название сайта</a> <ul class="nav navmenu-nav"> <li class="active"><a href="#">Пункт 1</a></li> <li><a href="#">Пункт 2</a></li> <li><a href="#">Пункт 3</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Пункт 4 <b class="caret"></b></a> <ul class="dropdown-menu navmenu-nav"> <li><a href="#">Подпункт 4.1</a></li> <li><a href="#">Подпункт 4.2</a></li> <li><a href="#">Подпункт 4.3</a></li> <li class="divider"></li> <li class="dropdown-header">Заголовок для подпунктов</li> <li><a href="#">Подпункт 4.4</a></li> <li><a href="#">Подпункт 4.5</a></li> </ul> </li> </ul> </div> <div class="canvas"> <div class="navbar navbar-default navbar-fixed-top"> <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="container"> <div class="page-header"> <h1>Навигационное меню с эффектом reveal</h1> </div> <p>Lorem ipsum dolor sit amet. Odio dignissimos ducimus, qui blanditiis praesentium voluptatum. Vel eum fugiat, quo voluptas. Obcaecati cupiditate non numquam eius modi tempora. Temporibus autem quibusdam et voluptates repudiandae sint et expedita. Sunt, explicabo nesciunt, neque porro quisquam est, omnis dolor sit. Corporis suscipit laboriosam, nisi. Autem vel eum fugiat, quo minus id, quod maxime placeat facere. Debitis aut perferendis doloribus asperiores repellat. aperiam. Numquam eius modi tempora incidunt, ut aut rerum hic tenetur. Accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore. Hic tenetur a sapiente delectus, ut aliquid ex ea commodi autem. Odio dignissimos ducimus, qui dolorem ipsum quia. Velit, sed quia voluptas sit, aspernatur.</p> </div><!-- /.container --> </div> <!-- jQuery --> <script src="/examples/vendors/jquery/jquery-3.3.1.min.js"></script> <!-- Bootstrap --> <script src="/examples/vendors/bootstrap-3.3.7/js/bootstrap.min.js"></script> <script src="/assets/demo/jasny-bootstrap/js/jasny-bootstrap.min.js"></script> </body> </html>