Hello to all.
At the moment, when I make a page size < 992px and click on the "Main Menu", a list of submenus appears. But, when we make the page size > 992px , the menu disappears. (because of slideToggle) .
There is also a bug when I put a media request for > 992px , then in the normal version of the page both menus will be opened, although what we clicked on the mob should be open. versions
Help correct the mobile menu for adaptive.
Once again, who did not understand: 1. It should be so initially - prntscr.com/e7uyii Now the Main is closed. Check jsfiddle.net/m5o8pwrd/21 2. It is necessary that when you click in the mob. the version on the Second menu (as now prntscr.com/e7uzb1) in the normal version the Second menu was also opened (prntscr.com/e7uzx1), and also with the Main menu. 3. There is an animation bug: when I click on the Main menu in normal mode, but there is no slide down, but just the appearance of the list ... And if I click on the Second menu, then the animation of the Main menu will also work crookedly.
$(function() { $a = $('.side-menu > li > span'); $showlist = $('.side-menu > li > span + ul'); $a.on('click', function() { if ($(this).next().css('overflow', 'hidden')) { $(this).next().slideDown(300); $a.not(this).next().slideUp(300); } }); }); $(function() { $(".mobile").on('click', function() { $(".side-menu").slideToggle(300); }) }); * { 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; } @media (max-width: 992px) { .our-menu { display: none; } .mobile { display: block } .side-menu { display: none; } .main-container { display: block; } .sidebar aside { margin: 20px 0px; } .sub-menu { display: none; } } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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 invisible"> <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> Link to third-party editor: jsfiddle-m5o8pwrd-13
