diff --git a/src/app/_modules/pages/menu/item/pages-menu-item.component.html b/src/app/_modules/pages/menu/item/pages-menu-item.component.html
index bf62322..4f2db0f 100644
--- a/src/app/_modules/pages/menu/item/pages-menu-item.component.html
+++ b/src/app/_modules/pages/menu/item/pages-menu-item.component.html
@@ -1,6 +1,6 @@
-{{item.name}}
+
diff --git a/src/app/_modules/pages/menu/pages-menu.component.ts b/src/app/_modules/pages/menu/pages-menu.component.ts
index ef7e594..15246ba 100644
--- a/src/app/_modules/pages/menu/pages-menu.component.ts
+++ b/src/app/_modules/pages/menu/pages-menu.component.ts
@@ -8,7 +8,7 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
export class PagesMenuComponent {
@Input() items = [];
@Output() onSelected = new EventEmitter();
- public hidden = false;
+ public hover:boolean[]=[]
private hiddenPages = ['/o-tsentre/protivodeistvie-korruptsii', '/o-tsentre/zashchita-personalnykh-dannykh', '/o-tsentre/okhrana-truda'];
@@ -20,17 +20,22 @@ export class PagesMenuComponent {
});
}
-
- close() {
- this.hidden = !this.hidden;
- // setTimeout(() => {this.hidden = false;}, 100);
- }
- leave(){
- this.hidden = false;
- }
-
itemSelect(event:any){
this.onSelected.emit(event);
}
+ setHover(i:number,hover:boolean){
+ this.hover=[];
+ this.hover[i]=hover;
+ }
+
+ getDepth(item){
+ if (!item.hasOwnProperty('depth')) item.depth=0;
+ if (item.children?.data.length) item.depth = 1;
+ item.children?.data.forEach(child => {
+ if (this.getDepth(child)>=item.depth) item.depth++;
+ });
+ return item.depth
+ }
+
}
diff --git a/src/assets/css/main-menu.scss b/src/assets/css/main-menu.scss
index 86163c7..7f45da5 100644
--- a/src/assets/css/main-menu.scss
+++ b/src/assets/css/main-menu.scss
@@ -93,166 +93,88 @@
@media screen and (min-width: 1264px){
-
pages-menu {
-
- pages-menu-item {
-
- a {
- transition: all 0.3s;
- &:not(:hover).active{
-
- >span{
- display: inline-block;
- box-sizing: border-box;
- }
- }
- }
- &:hover {
- &>pages-menu {
- display: flex;
- }
- }
- &.hidden{
- pages-menu {
- display:none !important;
- }
- }
- }
- }
- .grid-menu>pages-menu>pages-menu-item>a.active:not(:hover)>span,
- .grid-menu>pages-menu>pages-menu-item.hidden>a.active>span {
- padding-top: 2px;
- border-bottom: 2px solid var(--blue-1) ;
- color: var(--blue-1);
+ display: none;
}
// level 1
- pages-menu {
-
+ .grid-menu>pages-menu {
width: 100%;
display: flex;
align-items: stretch;
- overflow: hidden;
- margin: 0 4px;
+ overflow: hidden;
+ flex-grow: 0;
+ flex-shrink: 0;
+ margin: 0;
- &>pages-menu-item {
- animation: slide-from-top-and-fade-in 0.2s;
+ >pages-menu-item {
+ animation: slide-from-top-and-fade-in 0.2s;
+ padding: 0 20px;
+ margin: 0 -4px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
- justify-content: flex-start;
- align-items: stretch;
- flex-grow: 0;
- flex-shrink: 0;
- text-align: center;
- padding: 0 20px;
- margin: 0 -4px;
- &:hover:not(.hidden) {
- background-color: #004077;
- a{
- color: #FFF;
- }
- }
-
+ align-items: center;
- &>a {
- display: flex;
- flex-direction: column;
- justify-content: center;
+ a {
color: #0070BA;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 32px;
-
-
- // &:hover {
- // text-decoration: none;
- // color: white;
- // background: #004077;
- // }
- }
-
- &>:hover {
- & > pages-menu {
- display: flex;
- }
- }
- &>pages-menu:first-child {
- &>pages-menu {
- display: flex;
+ &.active-mob{
+ >span{
+ display: inline-block;
+ border-bottom: 2px solid #0070BA;
+ }
}
}
// level 2
- &>pages-menu {
- display: none;
- justify-content: center;
- align-items: stretch;
- position: absolute;
- top: 100%;
- left: 0;
- max-width: 100%;
- background-color: #004077;
- z-index: 1000;
- padding: 24px calc( (100% - 1400px) / 2);;
- margin: 0;
- &>pages-menu-item {
- display: flex;
- flex-direction: column;
- align-items: stretch;
- flex-grow: 0;
- flex-shrink: 1;
- text-align: left;
-
- // &.hidden {display: none;}
-
- &>a {
- font-family: PT Sans;
- font-size: 20px;
- font-style: normal;
- font-weight: 400;
- line-height: 32px; /* 160% */
- color: white;
-
- &>span {
- display: block;
- overflow: hidden;
- }
-
- &:hover, &.active {
- &:after {
- opacity: 1;
- }
+ &.depth{
+ >a::after{
+ content:"";
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ background-image: url('~src/assets/images/icons/chevron_right_24dp.svg');
+ transform: rotateZ(90deg);
+ transition: transform 0.3s;
+ vertical-align: -6px;
+ margin-left: 4px;
+ }
+ &.hover {
+ >a::after{
+ transform: rotateZ(-90deg);
+ }
+ >pages-menu {
+ position:absolute ;
+ height: 68px;
+ background-color: #FFF;
+ top:104px;
+ left: 0;
+ width: 100%;
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ overflow: hidden;
+ flex-grow: 0;
+ flex-shrink: 0;
+ >pages-menu-item{
+ animation: slide-from-top-and-fade-in 0.2s;
+ padding: 0 20px;
+ margin: 0 -4px;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
}
}
-
- // level 3
- &>pages-menu {
- position: relative;
- padding: 20px 0 0 0;
- top: 0;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: left;
- &>pages-menu-item {
- position: relative;
- display: block;
- padding: 0;
- margin: 20px 0 0 0;
- a{
- opacity: 0.63;
- }
- a:hover{
- opacity: 1;
- }
- }
- }
}
}
+
+
}
}
}
\ No newline at end of file