monsterito,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.main-container {
display:flex;
padding: 20px 0;
}
.sidebar {
flex: 3;
}
aside a {
color: #000;
display: block;
padding: 8px 30px;
}
.sidebar aside {
margin-right: 50px;
border: 1px solid #e2e1e1;
cursor: pointer;
background: white;
margin-right: 35px;
}
.mobile {
display:none;
padding: 15px 20px;
background: rgba(33, 32, 32, 0.83);
color: #fff;
letter-spacing: 5px;
}
.our-menu {
padding: 15px 20px;
background: rgba(33, 32, 32, 0.83);
color: #fff;
letter-spacing: 5px;
}
.invisible {
display: none;
}
.sub-menu li {
background: #f7f7f7;
}
.side-menu li {
transition: all .3s;
}
.side-menu li .sub-menu li{
font-style: italic;
font-size: 16px;
}
.side-menu li:hover{
background: #e8e8e8;
}
.side-menu > li > a, .side-menu > li > span {
padding: 10px 18px;
display: block;
font-size: 18px;
border-top: 1px solid #eeeeee;
}
.active {
background: #e8e8e8;;
}
.main {
flex: 9;
}
.side-menu > li:first-child{
display: block;
}
.side-menu > li:last-child{
display: none;
}
@media (max-width : 992px) {
.main-container {
display: block;
}
.our-menu {
display: none;
}
.mobile {
display:block
}
.side-menu > li:first-child{
display: none;
}
.side-menu > li:last-child{
display: block;
}
}
</style>
<title></title>
<script>
$(function(){
$a = $('.side-menu > li > span');
$a.on('click', function(event) {
event.stopPropagation();
$(this).next().slideToggle(300);
});
$(".mobile").on('click',function() {
$(".side-menu > li:last-child").slideToggle(300);
})
});
</script>
</head>
<body>
<div class="main-container">
<div class="sidebar">
<aside>
<h3 class="our-menu"><i class="fa fa-bars"></i>Меню</h3>
<div class="mobile"><h3><i class="fa fa-bars"></i>Меню</h3></div>
<ul class="side-menu">
<li><span>Основное меню</span>
<ul class="sub-menu">
<li><a href="index.php" class="sub-list" data="1">Холодные закуски</a></li>
<li><a href="index.php" class="sub-list" data="2">Горячие закуски</a></li>
<li><a href="index.php" class="sub-list" data="3">Первые блюда</a></li>
</ul>
</li>
<li><span>Второе меню</span>
<ul class="sub-menu">
<li><a href="index.php" class="sub-list" data="14">Первые блюда</a></li>
<li><a href="index.php" class="sub-list" data="15">Вторые блюда</a></li>
<li><a href="index.php" class="sub-list" data="16">Сладкие блюда</a></li>
</ul>
</li>
</ul>
</aside>
</div>
<div class="main">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus nostrum explicabo rem dolorem vel vero culpa repellat ipsa maiores, optio alias tempora ducimus voluptates et neque unde. Quia necessitatibus, deserunt!</div>
<div>Vero eius molestias exercitationem non molestiae, sint aspernatur. Quos voluptatum modi vitae minima eos magni quas nesciunt architecto, odio vel explicabo officiis hic, voluptates ut. Repudiandae voluptatum maxime eos consequatur!</div>
<div>Quasi mollitia illo, aliquid rerum atque ipsum accusantium, maiores nulla, repudiandae quo libero rem. Mollitia dolore, ipsum asperiores praesentium voluptatum, aliquam laudantium magnam nemo, tenetur rerum iusto quo laboriosam ullam.</div>
<div>Expedita minima accusantium asperiores vel doloremque, unde est nulla dolore debitis dolorem, corrupti eos earum nemo, sunt, quos quidem perferendis. Harum enim praesentium vero quo id tempore, voluptatum aliquid cumque.</div>
<div>In repellat, vel impedit delectus fugiat eligendi eum expedita aspernatur velit hic provident veniam quaerat nostrum assumenda, id ducimus? Maxime eligendi dolores laboriosam. Molestias eius est dicta eaque in! Et!</div>
<div>Totam possimus officiis odio necessitatibus, ratione repellendus id nesciunt delectus explicabo, amet inventore quaerat, laborum mollitia earum quos nihil eaque at quisquam suscipit non officia unde. Excepturi dignissimos eaque, facere.</div>
<div>Fugiat voluptas nam repudiandae sed facere, iste, quae enim cum! Quaerat distinctio sed consequuntur neque dolores, necessitatibus totam animi cum veniam, ad obcaecati assumenda iste tempore, itaque nostrum eius sint!</div>
<div>Voluptatibus minima inventore consequatur voluptatem dolorem quia illum doloremque ducimus provident veritatis voluptates natus amet assumenda, ullam sequi delectus distinctio eum repudiandae quibusdam quod aspernatur voluptate, culpa itaque dolore. Nemo.</div>
<div>Possimus placeat ipsa asperiores doloribus, totam, unde provident illo, cumque, ut similique dolore iure. At ex explicabo iure officiis numquam eligendi aliquam tempore dolores aut distinctio quibusdam quaerat minima, obcaecati.</div>
<div>Quia voluptatem sed nam possimus qui ad doloremque quos placeat, sequi laboriosam sunt maiores distinctio repellat laborum, cum labore iste illo vitae. Aut expedita modi, tempora laborum! Neque, nulla, blanditiis.</div>
</div>
</div>
</body>
</html>