переделал меню pc на ul

This commit is contained in:
Kirill Pet
2024-12-23 16:12:24 +03:00
parent d272e126ad
commit a68e12af2f
3 changed files with 136 additions and 120 deletions

View File

@@ -114,6 +114,7 @@
.header-menu__list li:first-child{
margin-left: 0;
}
.header-menu__list a{
color: var(--text-white);
text-decoration: none;
@@ -127,18 +128,16 @@
display: block;
}
.header-menu-list-next__block{
position: relative;
}
.header-menu-list-next__content{
.header-menu-list__sub{
margin-top: 30px;
position: absolute;
top: 50px;
left: 0;
width: 300px;
padding: 14px 0;
list-style-type: none;
background-color: var(--background-grey);
opacity: 0;
@@ -146,66 +145,53 @@
transition: all .3s;
}
.header-menu-list-next__content.active{
.header-menu-list__sub.open{
opacity: 1;
pointer-events: auto;
}
.header-menu-list-next-content__item{
display: block;
.header-menu-list__sub li{
margin-left: 0;
}
.header-menu-list__sub li > a{
padding: 14px 24px;
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
color: var(--text-white);
transition: all .3s;
display: block;
}
.header-menu-list__sub > li:hover{
padding-right: 23px;
background-color: var(--background-grey-hover);
border-right: 1px solid var(--text-white);
}
.header-menu-list__sub > li > ul{
transition: all .3s;
}
.header-menu-list-next-content__item:hover{
padding-right: 23px;
border-right: 1px solid var(--text-white);
background-color: var(--background-grey-hover);
.header-menu-list__sub > li:hover > ul{
opacity: 1;
pointer-events: auto;
}
.header-menu-list-next-content__item.active{
padding-right: 23px;
border-right: 1px solid var(--text-white);
background-color: var(--background-grey-hover);
}
.header-menu-list-next__content-next{
.header-menu-list__sub ul{
position: absolute;
top: 0;
left: 300px;
left: 100%;
width: 100%;
height: 100%;
display: block;
min-height: 100%;
width: 300px;
padding: 12px;
background-color: var(--background-grey-hover);
display: flex;
flex-direction: column;
list-style-type: none;
opacity: 0;
pointer-events: none;
transition: all .6s;
}
.header-menu-list-next__content-next.active{
.header-menu-list__sub ul.open{
opacity: 1;
pointer-events: auto;
}
.header-menu-list-next-content-next__item{
padding: 12px;
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
color: var(--text-white);
}
.header-menu__search{
display: flex;
align-items: center;