Alena/Figma_2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

figma_adp_04

Browse Source
This commit is contained in:
Alena Trushcheva
2025-10-28 20:39:49 +03:00
parent ea9432e103
commit cf8c7da979
4 changed files with 129 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
images/header_top/Vector right mobile.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 258 B

37
index.html
View File

@@ -160,21 +160,44 @@
</div>
</div>
</div>
<div class="dropdown-list">
<div class="dropdown-list_wrapper">
<!-- 6 -->
<div class="header_nav_item header_nav_item-show">
<div class="header_top_list_active">
<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-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>
</div>
</div>
</div>
</header>

13
main.js
View File

@@ -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");
});
});

86
style.css
View File

@@ -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%;
}
}