Save

2025-08-07 12:13:56 +02:00
parent f44312fcb9
commit 5ea0b5507a
4 changed files with 228 additions and 86 deletions
--- a/layout/style-scss/nav-menu.scss
+++ b/layout/style-scss/nav-menu.scss
@@ -0,0 +1,108 @@
+@import 'variables';
+@import '_mixins';
+
+header#header {
+	.header-data {
+		// position: relative;
+		height: 54px;
+	}
+	#header-nav {
+		nav#header-mine-menu {
+			.submenu {
+				position: absolute;
+				left: 0;
+				right: 0;
+				top: calc(100% - 25px);
+				background: $cWhite;
+				border-bottom: 1px solid #dcdcdc;
+				box-shadow: 0 1.5px 4px 0 rgba(0, 0, 0, 0.05);
+				padding-top: 25px;
+				padding-bottom: 25px;
+
+				opacity: 0;
+				visibility: hidden;
+			}
+			ul {
+				list-style: none;
+
+				&:not(.container) {
+					padding: 0;
+					margin: 0;
+				}
+
+				&.lvl-1 {
+					display: flex;
+					flex-direction: row;
+					column-gap: 40px;
+
+					> li {
+						height: 54px;
+						align-content: center;
+
+						&:hover {
+							> .submenu {
+								opacity: 1;
+								visibility: visible;
+							}
+						}
+						> a {
+							display: flex;
+							flex-direction: row;
+							align-items: center;
+							column-gap: 5px;
+
+							span {
+								color: $cTxtBlack;
+								font-size: 15px;
+								font-family: $font3;
+								font-weight: 700;
+								letter-spacing: 1px;
+								text-transform: uppercase;
+								line-height: 1;
+								margin-bottom: -4px;
+							}
+						}
+					}
+				}
+				&.lvl-2 {
+					// position: absolute;
+					// top: 100%;
+					// top: calc(100% - 25px);
+					// left: 0;
+					// right: 0;
+					// width: 100%;
+					// padding-top: 25px;
+					// padding-bottom: 25px;
+					// margin-left: auto;
+					// margin-right: auto;
+
+					// opacity: 0;
+					// visibility: hidden;
+
+					&::after {
+						// content: '';
+						// position: absolute;
+						// left: 50%;
+						// top: 0;
+						// bottom: 0;
+						// width: 100svw;
+						// // background: rgba($cWhite, 0.5);
+						// background: $cWhite;
+						// transform: translateX(-50%);
+
+						// // backdrop-filter: blur(10px);
+						// border-bottom: 1px solid #dcdcdc;
+						// box-shadow: 0 1.5px 4px 0 rgba(0, 0, 0, 0.05);
+					}
+
+					// > * {
+					// 	position: relative;
+					// 	z-index: 1;
+					// }
+				}
+				&.lvl-3 {
+				}
+			}
+		}
+	}
+}