figma_adp_04

images/header_top/Vector right mobile.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 6.75H16.75M16.75 6.75L10.75 0.75M16.75 6.75L10.75 12.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

index.html

@@ -160,18 +160,41 @@
                         </div>
                     </div>
                 </div>
-                <div class="dropdown-list">
+                <div class="header_top_list_active">
-                  <div class="dropdown-list_wrapper">
+                  <div class="top_list_btn_burger"><button class="top_list_btn">Предоставляемые услуги <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 6.75H16.75M16.75 6.75L10.75 0.75M16.75 6.75L10.75 12.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg></button></div>
+                    <div class="header_nav_burger">
+                        <!-- 1 -->
+                        <div class="header_nav_item">
+                            <a class="header_nav_link" href="#">Яндекс продвижение</a>
+                        </div>
+                        <!-- 2 -->
+                        <div class="header_nav_item">
+                            <a class="header_nav_link" href="#">Google продвижение</a>
+                        </div>
+                        <!-- 3 -->
+                        <div class="header_nav_item">
+                            <a class="header_nav_link" href="#">Разработка сайтов</a>
+                        </div>
+                        <!-- 4 -->
+                        <div class="header_nav_item">
+                            <a class="header_nav_link" href="#">Интернет-магазины</a>
+                        </div>
+                        <!-- 5 -->
+                        <div class="header_nav_item">
+                            <a class="header_nav_link" href="#">Мобильные приложения</a>
+                        </div>
                         <!-- 6 -->
-                        <div class="header_nav_item header_nav_item-show">
+                        <div class="header_nav_item header_nav_item-empty">
                             <a class="header_nav_link" href="#">Брендинг</a>
                         </div>
                         <!-- 7 -->
-                        <div class="header_nav_item header_nav_item-show">
+                        <div class="header_nav_item header_nav_item-empty">
                             <a class="header_nav_link" href="#">SEO-продвижение</a>
                         </div>
                         <!-- 8 -->
-                        <div class="header_nav_item header_nav_item-show">
+                        <div class="header_nav_item header_nav_item-empty">
                             <a class="header_nav_link" href="#">Лендинги</a>
                         </div>
                     </div>

main.js

@@ -76,7 +76,7 @@ document.querySelector('.header_nav_link-reverse').addEventListener('click', fun
   }
 });
 
-// -------------------------------------BURGER-MENU-----------------------------------------------------------------------------------
+// -------------------------------------BURGER-MENU-TOP-----------------------------------------------------------------------------------
 
 document.addEventListener('DOMContentLoaded', () => {
   const burgerBtn = document.querySelector('.burger_menu_btn');
@@ -98,3 +98,14 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   });
 });
+
+// -----------------------------------------BURGER-MENU-----------------------------------------------------------------
+
+document.addEventListener("DOMContentLoaded", () => {
+  const toggleBtn = document.querySelector(".top_list_btn");
+  const menu = document.querySelector(".header_nav_burger");
+
+  toggleBtn.addEventListener("click", () => {
+    menu.classList.toggle("open");
+  });
+});

style.css

@@ -139,12 +139,12 @@ html, body, * {
     padding: 0 5px;
 }
 .header_nav_item {
-    margin: 0;
     display: block;
     justify-content: space-between;
     align-items: center;
     white-space: nowrap;
     padding: 10px;
+    width: 500px;
 }
 .header_nav_item-reverse {
   display: none;
@@ -224,6 +224,12 @@ html, body, * {
     margin: 0;
     font-weight: 500;
 }
+.header_top_list_active {
+  display: none;
+}
+.header_top_list {
+  display: block;
+}
 /* --------------------------------------------------------------------------------------------- */
 .header_row_info {
     display: flex;
@@ -1565,7 +1571,6 @@ html, body, * {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 40px;
 }
 .logo_link {
   margin: 0;
@@ -1624,6 +1629,83 @@ body.lock {
   padding: 15px;
   border-radius: 33px;
 }
+.top_list_btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  background-color: #F4F4F4;
+  padding: 13px 0px;
+  width: 100%;
+  border-radius: 33px;
+  font-weight: 500;
+}
+.top_list_btn svg {
+  margin: 0;
+}
+.header_top {
+  margin-right: 80px;
+  margin-left: 80px;
+}
+.container {
+  margin: 0 40px;
+}
+.header_top_list-active {
+  display: block;
+  max-height: 0;
+  overflow: hidden;
+  transition: all 0.4s;
+}
 
+.header_top_list-active.open {
+  max-height: 500px; /* подстрой под высоту меню */
+}
+.header_nav_burger {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s ease;
+}
+
+.header_nav_burger.open {
+  margin: 0;
+  width: 500px;
+  max-height: 500px; /* подстрой под контент */
+}
+.header_nav {
+  display: none;
+}
+.header_top_list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.top_list_btn_burger {
+  margin: 0;
+  width: 100%;
+  margin-bottom: 20px;
+}
+.header_nav_item {
+  display: flex;
+  border-radius: 33px;
+  padding: 13px 0px;
+  background-color: #F4F4F4;
+  margin-bottom: 20px;
+}
+.header_top_list_active {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.header_nav_burger.open {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+.header_top {
+  margin-bottom: 30px;
+}
+.footer_chart_content {
+  width: 71%;
+}
 
 }