Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> </head> <body> <header class="page-header"> <div id="menu"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> <nav class="page-header__menu"> <a href="https://"><h1>_a_g</h1></a> </nav> <div class="page-header__logout"> <a href="/"> <img src="https://svgshare.com/i/Cqb.svg" alt="" height="22"/> </a> </div> </header> <div id="main"> <ul> <li>Курсы</li> <li>Новости</li> <li>Вопросы</li> <li>Блог</li> <li>О нас</li> </ul> </div> <div id="main1"> r </div> </body> </html>
html, body { margin:0; padding:0; background-color:#dcdcdc; } header { background-color:white; width:100%; height:50px; position:fixed; } .page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
$(function(){ $('#menu').on('click', function(){ $('#main').toggleClass('menu-open'); $('#main1').toggleClass('menu-open1'); }); }); $(function(){ $('#main1').on('click', function(){ $('#main').toggleClass('menu-close'); $('#main1').toggleClass('menu-close1'); }); });
Средний
Простой
